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

Google Search Console から「CLS に関する問題: 0.1 超（パソコン）」「CLS に関する問題: 0.25 超（パソコン）」のエラー（警告）を受け取る場合があります。

誤報の場合もありますが、実際に警告を受けている以上、確認し、直せる点は修正することが望まれます。

ポイント

本記事では、

確認の方法と修正のポイントを解説します。

早速修正して、よりよりブログにしていきましょう。

＼ココナラ成功パターンを詳しく見たい方はこちらをクリックしてください／

1 Google Search Console （エラーの表示と原因確認方法）
2 主な対策方法
3 まとめ：「CLS に関する問題: 0.1 超（パソコン）」修正方法

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 から「修正を報告」します。修正を報告しても即日は反映されず、（エラー、警告が消えるまでに）数日～数か月かかることもあるので、気長に待ってください。

WordPress のお役立ちテクニックはこちら

まとめ：「CLS に関する問題: 0.1 超（パソコン）」修正方法

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

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

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

ポイント

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

改善したら Google Search Console から「修正を報告」します。修正されたことの確認は、数日～数か月かかることがあるので、気長に待ちます！気長に待ちすぎて、修正が確認され全ページが「良好」表示になった時は、かなり喜んでしまいます！

40代・50代「会社員におすすめ」の在宅でできる副業５選

: 40代・50代「会社員におすすめ」の在宅でできる副業５選（初心者でもできる）

４０代、５０代だからこそ気が付く、不安に思う将来設計、しかし今から大きなチャレンジは難しい。投資もリスクが多い。いまこそやってみたいのが「副業」です。本記事では４０代、５０代におすすめの副業５選を紹介します。

続きを見る

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選

: 20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選（初心者でもできる）

２０代、３０代の主婦にとって、これからの人生設計、お金の心配は少なからずありますね。２０代、３０代の主婦が不安に思うお金の問題を少しでも解決するべく、初期投資が無い（または少ない）主婦におすすめの副業ができれば安心ですね。記事では、２０代、３０代専業主婦におすすめの副業３選を紹介します。

続きを見る

地方がチャンスのおすすめ副業を紹介！

: 【2024年チャンス】地方でノマドで働ける。おすすめ在宅副業を紹介！快適な移住先も紹介します

都会は住みにくい！地方の方が自然もあり、ちょうど規模の街で素敵に暮らすのは人生設計として最高ですね。しかし地方は本業の給料が低いのがネック、そこで是非お勧めしたいのがインターネットでできる副業です。本記事では、地方で快適に暮らす！おすすめ副業を紹介します。ゆるーくまったり人生過ごしたいですね。

続きを見る