【Google Search Console 】「CLSに関する問題:0.25超(パソコン)」の解決方法

ある日、サーチコンソールに不良URLとして赤く表示され、何だこれ!と焦った私

サーチコンソールの「ウェブに関する主な指標」として、CLS・累積レイアウト変更という項目があります。

この項目に問題があると、2021年以降の検索ランキングに関係してくるそうです。

この記事は、有料テーマDiverを使用する私が実際にこの問題を解決した時の備忘録も兼ねた記事です。

ウェブに関する主な指標とは

以下の3つがウェブに関する主な指標です。

CLSページを読み込んでいるときにレイアウトが動いた量
FIDボタンのタップやクリックなどを行った時、どのくらいで反応したかの時間
LCP重要なコンテンツが表示されるまでの時間を測るもので、読み込みが開始されてから2.5秒以内に表示されることを推奨

 

それぞれ数値で今のサイト状況を教えてくれます。

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

 

今回の問題は、上記3つの指標のうち、「CLS 」に関する問題です。

0.25超との事でしたので、低速を指摘されています。

「CLS に関する問題: 0.25 超(パソコン)」とは

ここで言う今回のCLSの問題とは、ページ読み込み時のページレイアウトの移動量を言います。

この記事をご覧の皆様もページ内で操作をしようとしている時に、画像が突然出てきてレイアウトが動き、どこ見てるか一瞬、わからなくなったり迷ったりした経験はありませんか?

つまり、サーチコンソールは、この最初に見ていたレイアウトからのガタつき度合いについて指摘しています。

ちなみに良いCLSスコアは0.1未満であるとされています。

「CLS に関する問題: 0.25 超(パソコン)」の解決方法

結論から言うと、私の場合、アイキャッチの「width」と「height」の数値が指定されていないことから生じた問題でした。

そのため、追加CSSに以下のコードを追加し、アイキャッチの縦と横のサイズを指定しました。

/*CLSに関する問題:(パソコン)対策*/.single_thumbnail img{
max-width:1200px;
height:630px;
vertical-align: middle;
object-fit: contain;
font-family: 'object-fit:contain;';
}/*CLSに関する問題:(スマホ)対策*/
@media screen and (max-width:599px){
.single_thumbnail img{
max-width:450px;
height:253px;
}
}

私は、これで解決できました。

同じようなことで悩んでいる方は参考にしてみて下さい。

おすすめの記事