Googleから提案される最適化案とかをそのまま採用していたらCLSのスコアが悪化していました。
いろいろ試行錯誤してたら手動+自動でアドセンスを設置する形に落ち着き、実際に改善できました。
なので今回はこの設定方法を紹介します。
6月下旬からCLSが悪化
6月下旬辺りから半分以上のURLが「改善が必要」になっていました。
正直原因の詳細は分かっていません。
いじったとすればアドセンスの最適化案とかなので、おそらくアドセンスの自動広告が悪さしていたんだと思います。
改善する前は全て自動広告オン、最適化もオンだったのでアドセンスに絞って対策しました。
CLSとは？
CLS（Cumulative Layout Shift）は、サイト表示中にレイアウトがどれくらいずれるかを示す指標です。
記事をクリックしようとした瞬間に別の要素が表示されてレイアウトがズレてしまい、記事ではない場所をクリックしてしまうみたいなことあると思います。
あれが良くないってことで、CLSはCore Web Vitalsというユーザー体験（UX）を評価するための重要な指標の1つになっています。
なのでこのスコアが悪化すると、検索順位の低下、読者離脱などの可能性があります。
CLSの原因は？
これは画像とか動画とか広告とか、それらの読み込み順とかいろいろです。
例えばCSSで特定の要素にheightを指定しているとします。
でもCSSを遅延読込させるとその領域に後からheightが反映されるのでレイアウトがズレるみたいなことが起きます。
ただ最近は無料のテーマでもこういったところが考えて作られていますし、自分で何かいじったりしなければ基本的に問題ないと思われます。
面倒なのがアドセンスの自動広告です。
自動広告にも種類があり、特にページ内広告やアンカー広告はCLSを悪化させる原因としてよく挙げられます。
正直Core Web Vitalsもアドセンスも同じGoogleが出してるものなんだからCLSに影響のない形で自動広告配信してくれやと思うのですが、なかなかそうもいかないみたいです。
自動広告でCLSが悪化した場合は自分で改善する必要があります。
CLSを改善する方法
アンカー広告を下部にする
少し前はこれの設定が結構面倒だったのですが、今はアドセンスの管理画面で簡単に設定できます。
アドセンスにログインして広告ページに移動します。
管理しているドメインの編集ページに移動します。
右側のオーバーレイ フォーマットをクリック。
詳細設定をクリックして、アンカー広告を下部のみにします。
設定したら一番したのサイトに適用をクリックします。
下部にする理由としては、上部だとページを押し下げてズレが発生する可能性があるためです。
下部もテーマによってはボタンがあったりするのでユーザビリティは下がっる可能性があるのですが、CLS改善したい場合は下部固定が推奨されています。
ページ内フォーマットは全てオフにする
編集画面に戻り、今度はページ内フォーマットを全部オフにします。
一番したのサイトに適用をクリックします。
これらはページ内のどこに表示するかアドセンス側が決めるのでどうやってもCLSが悪化してしまう可能性があります。
なのでちょっと面倒ですが、これらの広告は手動で配置します。
私が愛用しているcocoonだと1つのコードで複数配置もできるのでおすすめです。
自動最適化をオフにする
ここは良く分かってないのですが、chatgptいわく「Googleが適切と判断した場所に広告を自動で挿入するもの」みたいです。
上記の自動広告と何が違うのかよく分かりませんが、後から広告が挿入されるのでCLS悪化の可能性があると言われました。
なのでこちらもオフ推奨です。
手動で広告を配置する
もしユニットを既に作っている方はその広告を使用してください。
作ってない方は広告ページに戻り、広告ユニットごとをクリックしてディスプレイ広告を選択します。
タイプは一般的にディスプレイ広告がよく使われます。
関連広告付近にMultiplex使っている方もいるので、使用したい広告は分けて使うのもありです。
後述しますが、広告に合わせてそれぞれcssを設定する必要があります。
ディスプレイ広告を選んだらユニット名をつけて、サイズはレスポンシブのまま作成をクリックします。
cssで制御するのでここはレスポンシブにしていますが、固定でサイズを指定してしまうのもありです。
ただ指定するとそのサイズの広告しか表示できないので注意してください。
作成すると既存の広告ユニットに追加されるので、右側からコードを取得してください。
これを自身のサイトの表示したい場所に設置します。
cocoonだとWPのダッシュボード→cocoon設定→広告→アドセンス設定でコードを挿入して表示位置も指定できます。
他のテーマで似たような機能があればそれを使用してください。
なければウィジェットを追加して表示したい位置に挿入するのが一般的です。
もしMultiplexなど別タイプの広告を設置する場合は、自分でクラスを指定してその中に広告コードを入れてください。
<div class="ad_multiplex">
<!--ここに広告コード-->
</div>こうすることでcssを分けて指定できます。
こっちだけ指定すれば問題ないと思いますが、もしディスプレイ広告との干渉を完全に防ぎたい場合はディスプレイ広告にもクラスをつけてください。
<div class="ad_display">
<!--ここに広告コード-->
</div>CSSでheightを指定する
レスポンシブにした場合は、予め広告が表示される領域をcssで確保する必要があります。
じゃないとズレてしまうからです。
コード見ると分かりますが、アドセンスの広告にはadsbygoogleというクラスがついています。
実際に広告が表示される部分にはad-areaというクラスがついています。
なのでそれぞれに対して以下のようにcssを指定します。
.ad-area .adsbygoogle {
min-height: 280px;
}
#クラスを指定した場合
.ad_display {
min-height: 280px;
}もしスマホで高さを別々にしたい場合は以下のようにしてください。
.ad-area .adsbygoogle {
min-height: 280px;
}
@media screen and (min-width: 768px) {
.ad-area .adsbygoogle {
min-height: 100px;
}
#クラスを指定した場合
.ad_display {
min-height: 280px;
}
@media screen and (min-width: 768px) {
.ad_display {
min-height: 100px;
}min-heightにすることで小さい広告は小さいまま、大きいものは高さ280pxまでを確保しています。
大体スクエアは高さ280pxなので280が無難かと思います。
個人的にはmobileも280pxであまり問題ない気がします。
MultiplexはPCだと500pxになっていました。
なのでad_multiplexとクラスを付けた場合は以下のようにします。
.ad_multiplex {
min-height: 500px;
}mobileだと縦長の800pxになることがあります。
ただ以下のように広告が1つだけしか表示されないみたいなこともあります。
これで800確保すると無駄なスペースになってしまう可能性があるので、実際に設置して数日後にちゃんと表示されるか確認した方がいいかもしれません。
もしちゃんと表示できていればスクエアと同じように分けてcssを指定します。
.ad_multiplex {
min-height: 500px;
}
@media screen and (min-width: 768px) {
.ad_multiplex {
min-height: 800px;
}cssはダッシュボード→外観→カスタマイズ→追加cssに挿入できます。
もしかしたらテーマによって違うかもしれません。
これで一通り設定は終わりです。
CLSの結果は？
ちょうど記事書いてる2025年7月26日に無事全てのURLが良好となりました。
てか改善できたので記事にしました。
100%とは言い切れませんがこれで改善できたのでページ内広告とアンカー上部の自動広告が悪さしていたと判断して良い気もします。
もしアドセンスの広告によってCLSが悪化しているという方は参考にしてみてください。
以上アドセンスを手動+自動にしてCLSを改善する方法をご紹介しました。
