![eyecatch](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj81fzpJ2Z7TsW7EEETT88cuChK1suxOwPZWW0bvYW_IGHM9BLP8wRkXmSEpDTigZa5uv2dDNHolhT557nTUDe0-g0lUG5D6ho5BnCwGxjZMg1keyt4Hl6r86s-5frcsSgBxjf6ycwvIME2rjIL3y4nbquokz6Zg2Xj4yGHQvb7I5EslMrNdHKPoddA/s1600-rw/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-22%207.15.58%202.png)
今年の4月頃から、SearchConsoleのページエクスペリエンスで何やらエラーが発生し始めて、ついにエラーがページ全体の100%に達してしまいました。
このままでは、SEOにはいい影響が出ないと思ったので、改善に取り組み、どうやらその改善に成功したっぽいので、何をやったかという備忘録を公開しておきます。
ページエクスペリエンスのエラー原因を深掘り
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7MtZQM_UpU-zsz15y2M8kBX0w401kC_KKMA4sw-6oNihesQFE5yLWfSV_l5qZl1lr7oa817lknSLYyeJsBWg3EjROUs8akExsA1fmsoHZDzZvUtjOclU1NJIKSX3_dnbEGQRsjfuQe-PARXl81I-CNuaD-Hb_2u0RccgqxZ5ItD3muPp-mvY7wHGx/s1600-rw/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-22%207.18.51.png)
Searchコンソールは、PCとモバイルの2つのパターンで計測されていて、PCの方のページエクスペリエンスでは全く問題は出ておらず、モバイルのみが100%のページエラーが発生していました。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcWe0vd2sdWtJKLStMoNRgpLb-OgPOOcATDpNHnniuk41DW-dNXJllcYlvFC3MrIBZFC1rPa29rddvPggNBHHonyoeTMG2NzV2L_v6oe78K0U3F3VzfzfBkRL3hJAPPY5-kLG6cyQj-BbcjMtBuHQiA2j_fwlJGo483h_eZVs40d_RNBLF5ZXVbxl1/s1600-rw/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-22%207.19.20.png)
一体どういうエラーかというと、「CLSに関する問題 : 0.1超(モバイル)」と書かれていて、なんじゃこれ?状態だったので、問題箇所の詳細を見る為に、その項目をクリックしてみる。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL6paX5XaD8QwSRM_LVmPegBbUsxPRzFiHzlro62lRgPYamHHgqvsQhTaiL7DlBWoch4Ul3lhXdaqZb7sY5c3UO0lPzIxgcWMltz8rA_FhrtovMJ-3IJl6i6eKAzFm9kYO_kUl3Gq90kxPGhsC7cjDlZ8S5C8MsbadizlClqxBVWDX4Zh1Qa4lDk2q/s1600-rw/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-22%207.19.31.png)
一体この
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;と個別設置することで対応できる仕様です。
解決確認
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUOk192FSiPpPqO-iFGkc5uBCi-gcJ9KLAta4bysnYdF66U7f5n-9uW0c2fbps1FyPM92GoM4V9rhWcxW5wVNOVpaU1HWwxgPp7mCJZWfB7kJsY6Qkb-ro6NNkDlzx-3HvrY4n-8K4qvt4DTGNik7lmdgqWQrRuIzMKeQCvmJVy0tOBIdxPWD4hLXf/s1600-rw/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-22%207.19.38.png)
GW直後の5月に入ってこの対応をしてみたのですが、徐々にエラー件数が減ってきているのが分かります。
画像を多く使っているページには適用できておらずエラーがそのまま残っているので、そういうサイトは、個別に画像に対して、サイズを指定してあげることで対応できるはずです。
おそらくこのまま1ヶ月ぐらいしたらかなりエラーが減り、ページの個別対応をしていくことで対応ができると思います。
あとがき
同じエラーが出て、解決方法がわからない人は、とにかく簡易にcssで対応して、エラー推移をチェックしてみることをオススメします。
このエラーにおけるSEOの影響なども含めて、しばらく計測をウォッチして見守っていきたいと思いますね。
何かわかったら、またブログでご報告したいと思います。
0 件のコメント:
コメントを投稿