SearchConsoleのページエクスペリエンスのエラーを改善した話

2023年6月2日

SEO テクノロジー 日記

eyecatch 今年の4月頃から、SearchConsoleのページエクスペリエンスで何やらエラーが発生し始めて、ついにエラーがページ全体の100%に達してしまいました。 このままでは、SEOにはいい影響が出ないと思ったので、改善に取り組み、どうやらその改善に成功したっぽいので、何をやったかという備忘録を公開しておきます。

ページエクスペリエンスのエラー原因を深掘り

Searchコンソールは、PCとモバイルの2つのパターンで計測されていて、PCの方のページエクスペリエンスでは全く問題は出ておらず、モバイルのみが100%のページエラーが発生していました。 一体どういうエラーかというと、「CLSに関する問題 : 0.1超(モバイル)」と書かれていて、なんじゃこれ?状態だったので、問題箇所の詳細を見る為に、その項目をクリックしてみる。 一体このCLSに関する問題って何なのか?さらに「詳細」というリンクをクリックしてみると次のページに遷移しました。 https://web.dev/cls/ そのページ内CLSについての説明が書かれてありました。
Cumulative Layout Shift (CLS) Cumulative Layout Shift (累積レイアウト シフト数、CLS) は、視覚的な安定性を測定するための重要なユーザーを中心とした指標です。これは、ユーザーが予期しないレイアウト シフトに遭遇する頻度の数値化に役立つ指標であり、CLS が低ければ低いほど、そのページが快適であることが保証されます。
どうやら、ページの見た目が旧に変わる事場合に、マイナス判定されてしまうようですね。 スマホでどこかのホームページを見ていた時に、画像が読み込まれた瞬間に、見ていた箇所が下に大きくズレて、ページの見ている場所を見失って迷子になってしまう事ありますよね。 そうしたページ内迷子になりそうになる割合を数値化して、それが0.1以上になると、SearchConsoleでは、エラー判定して、CLSエラーとして表示しているようでした。

対応方法

画像以外にも色々なCLSエラーが有りそうですが、このブログ・サイトの場合、アイキャッチ画像の読み込まれるのが遅くて、表示がガタついているのは、以前から気になっていたので、その点を修正してみることにしました。 やった処理としては、ブログページの一番最初に書かれているIMGタグのサイズ(height)を固定で入力してみることにしました。 全てのページに適用されるCSSに、次のコードを差し込んでみました。 /* Search Console CLS対応 */ @media (min-width:501px){ #main-content .widget.Blog #single #single-content > img:first-child{ width:100%; min-height : 320px; object-fit:cover; } } @media (max-width:500px){ #main-content .widget.Blog #single #single-content > img:first-child{ width:100%; min-height : 200px; object-fit:cover; } }

コード解説

メディアクエリで、500pxをブレイクポイントとして、それより大きいものをpc表示、小さいものをモバイル表示として処理することにして、 アイキャッチ画像は大体の比率を同じ感じにしているので、高さをPCは320px、モバイルは200pxとして強制設定してみました。 ※この値は、ページの表示領域での画像サイズとの兼ね合いなので、大きく見栄えが変わってしまう場合は、タグに直接height属性を書くか、style属性を書いて、height:%サイズpx;と個別設置することで対応できる仕様です。

解決確認

GW直後の5月に入ってこの対応をしてみたのですが、徐々にエラー件数が減ってきているのが分かります。 画像を多く使っているページには適用できておらずエラーがそのまま残っているので、そういうサイトは、個別に画像に対して、サイズを指定してあげることで対応できるはずです。 おそらくこのまま1ヶ月ぐらいしたらかなりエラーが減り、ページの個別対応をしていくことで対応ができると思います。

あとがき

同じエラーが出て、解決方法がわからない人は、とにかく簡易にcssで対応して、エラー推移をチェックしてみることをオススメします。 このエラーにおけるSEOの影響なども含めて、しばらく計測をウォッチして見守っていきたいと思いますね。 何かわかったら、またブログでご報告したいと思います。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。