WordPress

「CLS に関する問題: 0.1 超(パソコン)」「CLS に関する問題: 0.25 超(パソコン)」の対策・修正方法(WordPress)




Google Search Console から「CLS に関する問題: 0.1 超(パソコン)」「CLS に関する問題: 0.25 超(パソコン)」のエラー(警告)受け取ったら焦りますが、直せるエラー(警告)ですので、修正のポイントを本記事で解説します。


Google Search Console からのエラー表示


エラー内容の確認方法


[Google Search Console] のメニューから [ウェブに関する主な指標] を選択します。


  • 「CLS に関する問題: 0.1 超(パソコン)」(改善が必要)
  • 「CLS に関する問題: 0.25 超(パソコン)」(不良)

エラー(または、改善が必要)が発生している場合、[レポートを開く] をクリックすることで、レポートの画面を表示し、エラー、または改善が必要な内容(および対象のページ)を確認できます。


主な原因


CLS とは、「Cumulative Layout Shift」の略称です。簡単に言うと 「ページを表示中にページ内の要素(画像やリンク)の位置がガタガタ動いてなかなか定まらない」 ことを表しており、ページ表示中にページ内の配置が変わることで 広告を誤クリックするなどユーザに不便なページとなるため、Google では、このようなページに対して警告を発しています。



画像(イメージ)などのサイズを指定していない場合、イメージファイルをロードするまで縦・横のサイズが確定しません。そのためページは最初に暫定のレイアウトで表示しますが、画像を読み込み縦・横が確定したタイミングでページ内の配置が縦(または横)にズレます。これはユーザに優しくない動きとなりますので、CLSのエラー(または警告)の対象となります。

本警告は、SEO 効果にも影響するため、可能な限り修正しておくことをおすすめします。


ページ(原因箇所)の確認方法


目視による確認


Google Search Console で CLS が警告されているページを表示し、自分で凝視して(笑)、画面上に見える範囲で、CLS(サイトがズレる、シフトする)が発生していないかどうかを確認します。 縦にガクっとシフト(位置ズレ)が発生するようであれば、どこの表示が原因で位置ズレが発生しているのかを確認します。


PageSpeed Insight による確認


ページのスピードを計測するサイト( PageSpeed Insights ) がありますので、こちらで確認します。



「レイアウトが大きく変わらないようにする ー 〇件の要素が見つかりました」にて表示される内容にて、具体的に CLS に影響している要素を確認することが可能です。


主な対策方法


明らかに移動する部分は修正する


目で見て実際に明らかに移動する部分は修正します。


  • Size(Height、Width)が指定されていないイメージは指定します
  • 縦幅が可変の広告は固定幅の広告に差し替えます
  • 差し替えられない広告はページ下部に移動します
  • 高さが可変で動きのあるオブジェクトやスクリプトは利用を止めます

可能な限り「高さ固定」に変更し、変更できないものは初期表示の画面外に配置を変えるか、いっそのこと削除します。


画像の Size(Height、Width) を指定する


Size(Height、Width)が指定されていないイメージは指定します。

ただし、通常記事に貼るイメージの場合、WordPress 5.7.2 以上のバージョンであれば Height と Width が自動で付与される ので特に何もする必要はありません。それ以外の特別な画像(ヘッダーエリアのテーマ独自の機能で貼り付けた画像など)で縦、横の指定が無いものは注意してください。


固定の高さ広告に変える


広告によっては高さが可変(画面サイズに合わせて画面やテキストの表示を調整する)広告があります。固定幅(高さ)にならない広告は固定幅(高さ)の広告に差し替えます。


修正を報告


ページを修正したら、Google Search Console から [修正を報告] します。修正を報告しても即日は反映されず、(エラー、警告が消えるまでに)数日~数か月かかることもあるので、気長に待ってください。


まとめ


Google Search Console の CLS エラーは、SEO効果に影響があるので、早めの対策が必要です。


  • 「CLS に関する問題: 0.1 超(パソコン)」(改善が必要)
  • 「CLS に関する問題: 0.25 超(パソコン)」(不良)

CSL はレイアウトシフト(ページ読み込み中に配置が移動する)現象のため、基本的には要素(表示)が固定高さとなるように改善します。



  • Size(Height、Width)が指定されていないイメージは指定します
  • 縦幅が可変の広告は固定幅の広告に差し替えます
  • 差し替えられない広告はページ下部に移動します
  • 高さが可変で動きのあるオブジェクトやスクリプトは利用を止めます


改善したら Google Search Console から [修正を報告] します。修正されたことの確認は、数日~数か月かかることがあるので、気長に待ちます!

気長に待ちすぎて、修正が確認され全ページが [良好] 表示になった時は、かなり喜んでしまいます(笑)




WordPress の情報、テクニック一覧はこちらをクリック!









Presented By Irojiro Haraguro .Com

ブログランキング・にほんブログ村へ