AdSense広告がスマホではみ出る/ページの横幅を超える/縦長の広告が出てしまう問題を解消する方法

当サイトでは、Google AdSenseのディスプレイ広告を導入している。

広告の設置は、基本的にAdSense管理画面上で発行するコードをサイトへそのまま貼り付ければ良い。

しかしながら、広告サイズを「レスポンシブ」にした場合に、スマホ用ページで広告が正しく表示されない現象が発生した。

• ページの横幅を超えてしまう
• 広告の画像が途切れる
• 意図せず縦長の広告が出る

広告コードのパラメータを一部変更するだけで解消できたので、修正箇所を記しておく。

検証環境:
WordPress 6.5.5
AFFINGER6 ver.20240625

data-ad-formatをrectangleに変更する

広告コードのうち、insタグのdata-ad-format属性の値をrectangleに変更する。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxx"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxx"
     data-ad-slot="nnnnnnnnnn"
     data-ad-format="rectangle" <!-- ここを変える -->
     data-full-width-responsive="false"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

デフォルトでは、autoになっており、AdSenseサーバー側で収益性の高いタイプの広告が自動選択されるようになる。

意図しないサイズの広告が出たり、レイアウトが崩れたりする問題は、レクタングル(長方形)タイプに固定することで解消されるわけだ。

▼きちんと表示されるようになった

ちなみに、data-full-width-responsiveをtrueに変更すると、全幅に拡大された広告を表示できる。

参考:How to use responsive ad tag parameters - Google AdSense Help