WordPress

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

広告:ページ内にてアフィリエイト広告を利用しています。

CLS に関する問題の具体的な対策

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

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

ポイント

本記事では、

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

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

「アフィリエイトスクールのススメ」はこちら

PR

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 ) がありますので、こちらで確認します。

PageSpeed Insights

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

主な対策方法

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

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

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

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

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

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

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

■ 固定の高さ広告に変える

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

■ 修正を報告

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

WordPress もっと!お役立ちテクニック

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

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

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

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

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

ポイント

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

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

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

40代・50代「会社員におすすめ」の在宅でできる副業5選(初心者でもできる)

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

続きを見る

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

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

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

続きを見る

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

地方で快適に暮らす!地方がチャンスのおすすめ副業を紹介!在宅でパソコンがあれば「できる」副業

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

続きを見る

おすすめ始め方
アフィリエイトスクール
ノートパソコン
もっと WordPress のノウハウを知りたいときは

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

クリックアイコン

WordPress のおすすめテーマ

あなたのブログを強力にアピールし、読者を惹きつける、

魅力的なウェブサイトを手軽に作りたいですか?

そんな方に オススメのテーマが「AFFINGER」 です。

「AFFINGER」テーマを使えば、SEOに強く、集客力がアップし、

上級者でも満足できる、魅力的なウェブサイトが作れます。

ブログアフィリエイトを本気で戦うなら、「AFFINGER」の威力を体感してください。

\ WordPress のおすすめテーマ「アフィンガー」を詳しく見る /

AFFINGER の紹介(メリット・デメリットを紹介)

PR
―― 今日のおみくじ ――

第 8 番

大吉


今日のメッセージ

末広がりの大儲け!思い立ったら即行動!
ブログの始め方
レンタルサーバー
WordPress
AFFINGER

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

Presented By Boon Boon Blog .Com

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記