Google Search Console（サーチコンソール）からの突然メール。「ウェブに関する主な指標 エラーの修正を検証しています」
Webページに広告を入れたことで、「ウェブに関する主な指標 エラーの修正」についてのメールを受け取ったブログ運営者も多いのではありませんか。
ウェブに関する主な指標のエラーをそのままにしておくと、ユーザに優しくないページとして検索順位が下がります。いくらSEOを意識した記事づくりをしても、Google側で順位を意図的に下げられてしまうという構造です。
この記事では、ウェブに関する主な指標のエラーの改善方法を紹介します。ただし、このエラーはひとそれぞれなので、私のブログの環境を踏まえたものとして紹介します。
この記事を読むと、CLSの値を改善するための具体的な方法を理解することができます。
私のブログ環境
- WordPressテーマはCocoon Child
- Google AdSenseの自動広告を利用
- 各種ASP（アフィリエイト・サービス・プロバイダ）を利用
- CLSとLCPが不合格
エラーに対する対処
- 自動広告はON
- オーバーレイフォーマットは全画面広告のみ表示
- ページ内フォーマットは全てOFF
- 追加CSSのカスタムして広告を固定化
CLS・LCP不合格はモバイル端末での表示崩れ
Webページは今やモバイル端末（スマートフォン）で閲覧されることが多くなってきました。
このモバイル端末での表示に問題があるとGoogle Search Consoleでは改善を求められます。
後述しますが、CLSに問題があると、芋づる式にLCPにも影響が出ます。私の場合、CLSが0.13であり、合格ラインの0.1をオーバーしていました。
CLSに問題があると、LCP（ユーザがページを開いたと体感する速度）も低下し、ユーザーエクスペリエンス（ユーザー体験）の低下を招いてしまいます。
モバイル端末でのWeb閲覧が多い昨今は、CLSを適切な値に収め、ユーザーエクスペリエンスを向上させるような工夫が必要です。
CLSがモバイル表示に影響する理由
Webページはテキストやボタン・画像など様々な”要素”で構成されています。
CLSとはページ読み込み中にページの中の要素が動いてしまうことを言います。これが累積レイアウトシフト（Cumulative Layout Shift）です。
CLSが起きる原因は、AdSense広告の自動広告がページを一番下まで読み込んだ後に読み込まれるため、ページの要素が下方へずれこみ、ユーザーが見づらいページになってしまいます。
ページレイアウト崩れがCLSの値を悪化させ、モバイル表示に影響する！
ブラウザがHTML・CSSを読み込んだ後にGoogle AdSense広告が読み込まれることで、ページのレイアウトが崩れます。
モバイル端末は横幅が狭いため、特にレイアウトが崩れやすいという特徴も持っています。
広告領域をCSSで固定化してCLSを抑制
- 自動広告の設定
- Coocoonの追加CSSをカスタマイズ
CLSを改善するための自動広告の設定
AdSense広告の合格に舞い上がり、自動広告の設定をいじらず、デフォルトのままにしていました。
CLSに影響のあるAdSense広告は次の通りです。
オフを推奨するCLSに影響があるオーバーレイフォーマット
- サイドレール広告
オフを推奨するCLSに影響があるページ内フォーマット
- バナー広告
- Multiplex 広告
- 関連する検索
オーバーレイフォーマットのうちサイドレール広告はオフにします。モバイル端末の場合、サイドレール広告はバナー広告扱いになる場合があるため、CLSへの影響を加味してオフにしました。
アンカー広告はCLSに影響はありません。しかし、アンカー広告はユーザーの画面を大きく占有します。その結果、ボタンが見づらくなるなどユーザー目線に立つと不便なため、オフにしています。
ページ内フォーマットは、CLSに大きく影響するのですべてオフにしています。
CSSで広告サイズを固定化
CLS対策のため広告枠の高さを確保する
CLS対策のために広告枠の高さをHTMLとCSSを読み込んだ段階で確保します。これにより広告の高さが確定し、レイアウトのずれが無くなります。Cocoon Childではadsbygoogleクラスが該当します。
※汎用的に利用できるようにCSSセレクタは除いています。
【高さを確保するために記述したCSS】
display: block;
width: 100%;
min-height: 250px;
text-align: center;CLS対策のため記事内の画像のレイアウトずれを防止する
CLS対策のために記事内に貼り付けている画像の枠を確保します。これにより、画像の読み込み後に画像の高さや幅が変わる問題を防止します。
Cocoon Childではentry-contentクラス、comment-contentクラス、widgetクラスのそれぞれのimgタグに対して指定します。
【画像枠を確保するためのCSS】
display: block;
width :100%;
height : auto:
max-width :100%;
background-color: #f5f5f5;CLS対策のためfigure要素の画像ブロックの余白を調整する
Cocoon Childではfigure要素で画像コンテンツとそのキャプションをまとめています。ここではCLS対策のため、figure要素を利用するブロックの余白をあらかじめ調整します。
Cocoon Childではentry-contentクラス、comment-contnentクラスに設定します。
【figure要素の画像ブロックの余白の調整をするためのCSS】
margin: 1em 0;CLS対策のため広告・iframeの高さを事前に確保する
Cocoon Childではiframe要素で、広告などの記事内の外部コンテンツを埋め込む際に利用されます。
Cocoon Childではad-boxクラスのimgタグとiframeタグに指定します。
【iframe要素が担当する広告の高さの調整をするためのCSS】
width: 100%;
height: auto;
min-height: 250px;
display: block;CSSをカスタマイズ後は「修正を検証」
CSSをカスタマイズし、広告の大きさを調整することができたらGoogle Search Consoleで「修正を検証」しましょう。
私の場合、PageSpeed Insightsで自サイトのCLSを再計測しても結果はすぐに変わりませんでした。修正したことをGoogleに報告し、クロール（Googleが自動でサイトを確認）してもらうことで結果が反映されました。
改善後の結果：CLS・LCPが大きく改善
Cocoon Childの追加CSSを入力し、検証を申請したところモバイル表示が「良好」となりました。
広告や画像のブロックの高さをCSSで指定したことで、モバイル表示時のレイアウトシフトが低減しました。特に、広告は後読み込みされやすいため、レイアウトが崩れやすい原因を作ってしまいます。
今回のCSSの追加では後読み込みされた広告でも、指定された枠の中に収まるのでレイアウトが安定するという仕組みです。
CLSの改善にともないLCPも改善し、ユーザーが見やすいページとすることができました。
まとめ「CSSでCLSは大幅改善できる」
CLSが異常値になった場合、広告サイズを固定化することが効果が高い改善策です。
ウェブに関する主な指標の数値が下がると、ユーザーはWebサイトが見づらい、ブロガーは検索順位が下げられるなどいいことは一つもありません。
今回は、CSSに追加するコード数行でCLSを改善した内容をお伝えしました。近々、Cocoon Childユーザがコピペするだけで利用できるものを配信したいと思います。
コメント