CLS に関する問題: 0.1 超（モバイル）の修正方法

2022/03/15 update

CLS に関する問題: 0.25 超（パソコン）
CLS に関する問題: 0.25 超（モバイル）
CLS に関する問題: 0.1 超（パソコン）
CLS に関する問題: 0.1 超（モバイル）

Google Search Consoleの「ウェブに関する主な指標」の以上の項目で「不良」または「改善が必要」と表示されている場合の修正方法です。

効果が高かった順に修正方法を紹介します。
1.Google AdSense の高さを設定
2.cssの削除、タグの削除
3.tableの幅を固定

1.Google AdSense の高さを設定

CLSの一番の原因は Google AdSense の広告でした。ホームページが表示されて一瞬遅れて広告が表示されます。広告の分だけ表示が下にズレます。これがCLSです。リンクをクリックしようと思ったら広告が表示されて広告をクリックしてしまうようなサイトではないことを証明する基準です。

自分の画像であれば幅と高さは分かりますが、現在の Google AdSense の広告はスマホの場合でも画面の横幅いっぱいに表示されるように自動で幅と高さが決まります。

（モバイル）と（パソコン）がありますが、（モバイル）を直せば（パソコン）も直ります。（モバイル）はスマホ画面に初めに表示される画面だけが問題です。スクロールした後の画面はどうでもいいです。このサイトは記事のタイトルの下に記事内広告、記事下に記事内広告、サイドバーにディスプレイ広告2つを表示していました。

スマホ画面に初めに表示されるのはタイトルの下の記事内広告だけなので、それを直せば合格できました。Google AdSense を<div></div>で囲み、cssでdivの高さを設定します。

css

#ad-1{
height: 100px;
width: 100%;
}

html

<div id='ad-1'>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234" crossorigin="anonymous"></script>
<ins class="adsbygoogle"
    style="display:block;"
    data-ad-client="ca-pub-1234"
    data-ad-slot="5678"
    data-ad-format="horizontal"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

記事内広告は幅を基準に高さは自動で設定されます。高さを設定しても無視されます。高さを指定すると広告が途中で切れるか文章と重なります。これは Google AdSense の規約違反です。

（モバイル）の場合は300x250ぐらいの長方形が表示されることが多いですが、画面の幅によって拡大されたりするので、幅を基準に自動で決まる記事内広告の高さは正確に分かりません。

ディスプレイ広告は高さを設定できます。ディスプレイ広告を作成し、記事内広告と入れ替えます。さらに data-ad-format="auto"> を data-ad-format="horizontal"> に変えて横長の広告だけが表示されるようにします。height:100px; に設定しておけば、初めに100px分の空白が確保されます。

height:100px; に設定した場合に表示される広告は（モバイル）は高さ100px（パソコン）は90pxぐらいです。高さ90pxの広告が表示された場合は Google AdSense によって自動的にdivが高さ90pxに変更されます。表示はズレますが、10px程度なのでCLSは0.1以下になり合格します。

2.cssの削除、タグの削除

このサイトのトップページの記事ごとの部分はこういうソースになっていました。cssでまとめてタグの後に続く文字を設定をしていました。

css

.list-item-date:after{
   content:" - ";
}
time.updated-date:after{
   content:"up";
}
.list-item-category:before{
   content:"[";
}
.list-item-category:after{
   content:"]";
}

html

これを全て削除して、直接htmlに書きます。<div></div><span></span><p></p>なども削除できるところは削除します。
html

<time><data:post.lastUpdatedISO8601/></time>up -
[<data:label.name/>]

これでCLSが無くなります。cssで文字の幅が変わるような設定をすると、CLSと判定されるようです。

3.tableの幅を固定

tableはtableの内容が全て表示されてから、表の中の項目の幅が決まります。なので、表示されてから表示が完了するまでの間に大きく幅が変更されます。
tableをdivに変更して、divをtableのように並べると早くなると言われてますが、CLSはほぼ変わりませんでした。

代わりに table-layout: fixed; という表の幅を均等にするcssを設定すると、CLSが改善されました。divをtableのように使用する場合も同じ効果がありました。幅をそれぞれ変更する場合もまず table-layout: fixed; を設定してからtdの幅を変更するとCLSが改善されました。 table-layout: fixed; を設定しないと table-layout: auto; を設定したことになり、それがCLSに悪影響を与えているようです。

・tableの場合

table{
table-layout: fixed;
}

・divの場合

div{
display: table;
table-layout: fixed;
}

この記事のタイトルとURLをコピーする seo

seo