ある日、サーチコンソールに不良URLとして赤く表示され、何だこれ!と焦った私
サーチコンソールの「ウェブに関する主な指標」として、CLS・累積レイアウト変更という項目があります。
この項目に問題があると、2021年以降の検索ランキングに関係してくるそうです。
この記事は、有料テーマDiverを使用する私が実際にこの問題を解決した時の備忘録も兼ねた記事です。
ウェブに関する主な指標とは
以下の3つがウェブに関する主な指標です。
CLS | ページを読み込んでいるときにレイアウトが動いた量 |
FID | ボタンのタップやクリックなどを行った時、どのくらいで反応したかの時間 |
LCP | 重要なコンテンツが表示されるまでの時間を測るもので、読み込みが開始されてから2.5秒以内に表示されることを推奨 |
それぞれ数値で今のサイト状況を教えてくれます。
良好 | 改善が必要 | 低速 | |
---|---|---|---|
CLS | 0.1 未満 | 0.25 以下 | 0.25 を超える |
FID | 100 ミリ秒未満 | 300 ミリ秒以下 | 300 ミリ秒を超える |
LCP | 2.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;
}
}
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;
}
}
私は、これで解決できました。
同じようなことで悩んでいる方は参考にしてみて下さい。