カテゴリー
ホームページ製作

amp-adの広告が横にはみ出す

サイトにAMP用、amp-adのadsense広告を入れると、レスポンシブサイトなのに、水平(横)スクロールが出て、右横にはみ出してレイアウトが崩れてました。

水平スクロールが出て、右にはみ出してしまう

adsense広告は下記。

<amp-ad width="100vw" height="320"
     type="adsense"
     data-ad-client="ca-pub-1234567891234567"
     data-ad-slot="1234567890"
     data-auto-format="rspv"
     data-full-width="">
  <div overflow=""></div>
</amp-ad>

原因は、adsense広告の下記のコードが問題でした。

data-auto-format="rspv"
data-full-width=""

このコードを入れると、親要素のカラム、padding、marginを無視するので、レスポンシブサイトなのに、横にはみ出します。

【参考サイト】
https://1-notes.com/ad-adsense-code/

なので、コードを少し変更しました。

<amp-ad
    media="(max-width: 767px)"
    layout="fixed-height"
    height="200"
    type="adsense"
    data-ad-client="ca-pub-1234567891234567"
    data-ad-slot="1234567890">
</amp-ad>

<amp-ad
    media="(min-width: 768px)"
    layout="fixed-height"
    height="90"
    type="adsense"
    data-ad-client="ca-pub-1234567891234567"
    data-ad-slot="1234567890">
</amp-ad>

【参考サイト】
https://firstlayout.net/optimize-google-adsense-in-amp/

アドセンスによるサイトのデザインの崩れがなくなってよかったです。

コメントを残す

メールアドレスが公開されることはありません。