Google Search Console : Google AdSenseで自動広告を設定したことにより、CLS 0.1超の改善が必要になった場合の対応例

Google AdSenseで自動広告を設定したことにより、CLS 0.1超の改善が必要になったため、対応した内容です。

CLSとは？

「CLS」とは、Cumulative Layout Shift（累積レイアウトシフト） の略で、Google が定める Core Web Vitals（コアウェブバイタル） 指標のひとつです。
主に「ページの読み込み中にどれだけレイアウトがズレるか」を数値化したものです。

CLS評価基準（Google公式）

参考：
Core Web Vitals – Google Search Central
https://developers.google.com/search/docs/appearance/core-web-vitals?hl=ja

CLS が悪化する主な原因

以下、実際に対応を行った内容です。

広告ユニットごとにCSSのmin-heightを指定

広告ユニットの作成

Google AdSense＞広告＞広告ユニットごと
サイトに設定したい広告ユニットを作成します。

CSSのmin-heightを指定

• WordPress管理画面で
  　[外観] → [カスタマイズ] → [追加CSS] を開く
• 編集欄にCSSコードを記述
• 「公開」をクリック

data-ad-slot=”XXXXXXXXXX”の部分には、広告ユニットのIDを指定して、広告に適した最小サイズを設定します。

.adsbygoogle[data-ad-slot="XXXXXXXXXX"] {
  display:block;
  min-height:250px;
}

画像のサイズのリサイズ

画像のサイズが必要以上に大きい場合は、リサイズして軽量化しましょう。

• ヘッダーのサイトアイコン
• アイキャッチ画像
• 記事内画像など

適切なサイズの画像をアップロードするか、プラグインで既にアップロード済みの画像のサイズを変更することもできます。

プラグイン「WPaint」でリサイズする例

「WPaint」では、WordPress のメディアライブラリにある画像を、ブラウザ上で直接編集することができます。
レイヤー操作、回転、拡大縮小、トリミング、テキスト挿入、明るさ／コントラスト調整、色相変更、ぼかしなどの基本的な画像編集機能を備えています。

• WP Paint – WordPress Image Editor
  https://wordpress.com/plugins/wp-paint

メディア＞WPPaint＞Image＞Resize
画像をリサイズすることができます。

改善結果

この内容は、GoogleSearchConsole>エクスペリエンス＞ウェブに関する主な指標で確認することができます。
改善が必要なURLをすべて改善することに成功しました。
尚ウェブに関する主な指標は、対応してから反映されるまでには、おおむね28日程度かかります。

サイトの状況により、対応内容はそれぞれ異なりますが、参考になれば幸いです。

参考

• Google AdSense:レスポンシブディスプレイ広告の一般的なサイズについて
  https://support.google.com/google-ads/answer/7031480
• Google Developers: Avoid large layout shifts
  https://web.dev/cls/?hl=ja#images-without-dimensions
• Google Search Central: Core Web Vitals 指標
  https://developers.google.com/search/docs/appearance/core-web-vitals?hl=ja
• MDN Web Docs: aspect-ratio
  https://developer.mozilla.org/ja/docs/Web/CSS/aspect-ratio