過去問だけで公務員試験は受かる?

「CLS に関する問題: 0.25 超(パソコン) 」がやっと解決したので解説してみる!【SEO】

ごり丸
ごり丸

サーチコンソールで「CLS に関する問題」のエラーが出る。
なんで?


CLS に関する問題: 0.1 超(モバイル)」「CLS に関する問題: 0.25 超(パソコン)

↑みたいに、サーチコンソールで不良の URL として赤く表示されると焦りますよね。
私も正直焦りました笑

今回はこのCLS(Cumulative Layout Shift)累積レイアウト変更のエラーについて、解消できたので解説します。

ごり子
ごり子

結論から言うと、画像サイズ(widthとheight)を指定するだけだったよ。

✓CLS(Cumulative Layout Shift)?累積レイアウト変更?とはなにか

✓エラーが出る原因

✓解消方法

スポンサーリンク

CLS(Cumulative Layout Shift)・累積レイアウト変更とは?

Googleが新しく導入した指標

ウェブページUXの重要指標として「コアウェブバイタル」が導入されました。
その中で特に重要視されるのが「LCP」「FID」「CLS」3つの指標です。


ウェブにおけるユーザー体験の向上を目的したもので、今後のSEOにもかなり影響があるようです。



そういうわけで、今回問題を起こしたCLS:Cumulative Layout Shiftは結構重大な問題なのです。
累積レイアウト変更ともいいます。
https://web.dev/vitals/

 良好改善が必要低速
LPC2.5秒未満4秒以下4秒を超える
FID100ミリ秒未満300ミリ秒以下300ミリ秒を超える
CLS0.1未満0.25以下0.25を超える

Cumulative Layout Shiftとは?

ユーザーが意図せぬレイアウトのずれがどれぐらい発生したかを表します。


これはいわゆる誤クリックを誘うズレのこといっています。
リンクをクリックしようとしたら突然現れた広告をクリックしてしまった。
そんな経験ありませんか?

画像が突然現れて、本文が下にいってしまった。
よくありますよね。


こういったズレを表す指標が「CLS」なわけです。

エラーの原因:私の場合

アイキャッチと広告が原因だった

アイキャッチとサイドバー広告にサイズ指定がされてなかったことが原因でした。


とりあえずアイキャッチ画像は、heightだけ指定がなかったので、適当にテーマエディターで追加。

.eye-catch img{

    height:360px;

}

@media screen and (max-width: 768px) {
     .eye-catch img{
	    height:auto;
}
}

スマホだと比率がおかしくなるので、こっちはautoにしておきました。


単純な変更ですが、これで劇的に改善しました笑


サイドバートップの広告はやめました。
あってなくてもそんなに変わらない気がしたので、いったん停止に。

どうやってエラーを見つける?

CLSはズレを表す指標です。

PageSpeed Insightsを使えば、ページがどう表示されるのか、その過程をスクショで見れるかと思います。
それでわかります。

明らかにずれが生じている個所があるはずです。
そこがエラーの原因です。

Web Vitalsを活用する!

クローム利用者なら、Web Vitalsという拡張機能を使うと捗ります。


いつでも3つの重要指標の値が確認できるなる拡張機能です。
便利です。
https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma

終わりに

2021年以降に検索ランキングに関係してくるため、そろそろ準備がいりますね。
少しでも検索結果がよくなるよう頑張りましょう!

SEO
スポンサーリンク
Study Gorilla

コメント