NISA SCHOOL

独学で資産形成を目指すブログ

SEO対策で重要!サーチコンソール「CLSに関する問題」の原因と対処法

f:id:nisaschool:20200613153149j:plain

こんにちは。Googleサーチコンソールをよく使っているなら、拡張「ウェブに関する主な指標」が追加されたことに気が付いたでしょう。

2020年5月28日、ウェブマスターセントラルブログ「 Official Google Webmaster Central Blog: Evaluating page experience for a better web 」で、より良いユーザー体験のため、コアウェブバイタルという指標を使って、サイトが評価されることが明らかとなりました。

簡単に言えば、記事の品質だけでなく、ユーザーの使いやすさも検索順位の評価の一部になるということです。

ユーザーの使いやすさの例として、読込スピード、応答性、視覚的安定性があります。

下記は、私のブログの「ウェブに関する主な指標」のモバイルデータです。[2020.6.12時点]

f:id:nisaschool:20200613160501j:plain

日々変動している部分はありますが、173ページが良好、153ページが不良又は改善が必要で推移しています。

詳細を見てみると、不良ステータスは「CLSに関する問題:0.25超」、改善が必要ステータスは「CLSに関する問題:0.1超」と「LCPの問題:2.5秒超」です。

f:id:nisaschool:20200613160533j:plain

率直に、「改善しないとヤバいな…」という思いです。

「これが正解」と十分な対処法が開示されていません。CLSに関する問題の解決のため、私の考える原因と対処法をまとめています。

同じように悩んでいる方の参考になれば、幸いです。

 

 

更新履歴

  • 「CLSに関する問題の対処法」のブログデザインを再修正し、修正した結果を記載。[2020.6.22追記]

 

CLSとは?

コアウェブバイタルには、LCP、FID、CLSという3つの指標があります。

LCPは、Largest Contentful Paintの略で、最も大きなコンテンツが表示されるまでの時間が計測されます。

FIDは、First Input Delayの略で、ユーザーが最初に操作(クリックや入力等)したときの応答時間が計測されます。

CLSは、Cumulative Layout Shiftの略で、視覚的安定性が数値化されます。

それぞれ、数値が小さいほど良く、GOOD(良好)、NEED IMPROVEMENT(改善が必要)、POOR(不良)の3段階で評価されます。

f:id:nisaschool:20200613162221j:plain

LCPとFIDは何となく理解できるのではないでしょうか。

「CLSって具体的にどういうこと?」と思いませんか。私はそう思いました。

 Googleが提供しているWebサイト分析ツールweb.dev「 Cumulative Layout Shift (CLS) 」で解説されています。

例えば、次のようなことが挙げられています。

  • 注文申込ボタンとキャンセルボタンが並んでいて、キャンセルボタンを押したッ瞬間に、レイアウトがずれて注文申込された
  • 記事本文を読もうとしたら、レイアウトがずれて、出現した広告を誤クリックした

簡単に言えば、CLSは予期しないレイアウトのずれを数値化したものです。 ユーザーにとって、誤クリックは不利益を生みますし、予期しない広告の出現やレイアウト変更は困惑しますよね。

そのため、視覚的安定性はより良いユーザー体験は重要であると判断されているようです。

 

CLSに関する問題の原因

サーチコンソールでは、「CLSに問題があるよ」とは教えてくれます。しかし、具体的に「ここをこういう風に変えてね」とは教えてくれません。

あなた自身がその原因を推定し、それに対して対処法を見つけていく必要があります。

サーチコンソールでは、詳細な情報が得られないため、「 PageSpeed Insights 」を利用して、個々のページの原因を探っていきましょう。

また、自分のページを開いて、レイアウトのずれや、困惑する箇所がないかも確認しましょう。

 

私のブログだと、次の2つが原因であると考えられました。

  • 記事タイトル下の広告
  • ヘッダー部の3つの要素

記事のタイトル下に設置している広告が、記事本文より遅れて出現するため、レイアウトのずれが生じていました。

f:id:nisaschool:20200613171020j:plain

また、ブログのヘッダー部には、「ヘッダー画像」、「カテゴリー一覧」、「おすすめ記事スライダー(5記事)」がありました。

全体として、段階的に表示されるため、その度にずれが生じているのが良くない原因と推定しました。

f:id:nisaschool:20200613171243j:plain

 

Page Speed Insightsのラボデータの部分で、どのようにレイアウトが出現するのか(赤枠部分)、細かく確認できます。

カテゴリー一覧の部分が最初に読み込まれているのが分かるかと思います。

f:id:nisaschool:20200613172041j:plain

 

CLSに関する問題の対処法

2020.6.17に、先述した原因に対して、次の対処法を実施しました。

  • 記事タイトル下の広告を削除(図①)
  • ヘッダー画像を削除(図②)
  • カテゴリー一覧を、トグルメニューに変更(図③)
  • おすすめ記事スライダーを削除(図④)

f:id:nisaschool:20200622214644j:plain

だいぶレイアウトをシンプルにしました。

記事タイトル下の広告は、おそらく一番の原因なので削除しました。スマートフォンだと、記事上広告はクリックされづらいので問題ないでしょう。

使用していたヘッダー画像は、ややサイズが大きかったです。CLSだけでなく、LCPの原因でもあると推定していたので、思い切って削除しました。

カテゴリー一覧は、各名称を表示させるタイプだと、ずれが生じるのでトグルメニュー(開閉タイプ)に変更しました。

おすすめ記事スライダーは、残したかったというのが本音ですが、SEO対策を優先し削除しました。

サーチコンソールで検証依頼中でしたが、6.21に検証が完了しました。ひとまず、すべて「良好」になりました。

f:id:nisaschool:20200622214741j:plain

 

まとめ

CLSに関する問題についての原因と対処法の一例を紹介しました。

今後、SEO対策では、記事品質だけでなく、ユーザー体験も重要になってきます。ユーザー体験の指標として、コアウェブバイタル(LCP、FID、CLS)が導入され、一つの評価基準になります。

ぜひ、コアウェブバイタルに注目して、一歩進んだSEO対策をとって他社に差をつけていきましょう。