今年の4月頃から、SearchConsoleのページエクスペリエンスで何やらエラーが発生し始めて、ついにエラーがページ全体の100%に達してしまいました。
このままでは、SEOにはいい影響が出ないと思ったので、改善に取り組み、どうやらその改善に成功したっぽいので、何をやったかという備忘録を公開しておきます。
ページエクスペリエンスのエラー原因を深掘り
Searchコンソールは、PCとモバイルの２つのパターンで計測されていて、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の影響なども含めて、しばらく計測をウォッチして見守っていきたいと思いますね。
何かわかったら、またブログでご報告したいと思います。
0 件のコメント:
コメントを投稿