AMP でのアドセンス広告のサイズを画面幅に応じて変更する方法

AMP での広告の問題点

多くのサイトが、AMP に対応しています。そして、多くのサイトが、AMP ページに Google Adsense を設置されています。

しかし、あらゆるデバイスに最適化したレスポンシブ対応の広告は、あまり見かけません。

AMP 特有の media 属性を使えば、画面幅に合わせた広告サイズを指定できます。この media 属性を Google Adsense に指定する方法をご紹介します。

一般的に、AMP ページに Google Adsense を設置するには、下記の広告コードを使います。公式の AMP 対応のディスプレイ広告ユニットを作成する の説明のとおりに、Google 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>

この広告のサイズは、幅は画面幅いっぱいの可変、高さは幅に合わせた可変です。スマホに最適なサイズです。

しかし、タブレットや PC には合っていません。広告のサイズがあまりにも大きくなり、広告が表示されない恐れすらあります。

また、下記のように幅も高さも固定にすると、スマホでの広告収入が最大化されないかもしれません（ Google Adsense 管理画面で、「ディスプレイ広告」の「広告サイズ」を「固定」にしたコードです）。

<amp-ad
  layout="fixed"
  width="300"
  height="250"
  type="adsense"
  data-ad-client="ca-pub-1234567891234567"
  data-ad-slot="1234567890"></amp-ad>

「記事内広告」がスマホで画面幅いっぱいに表示されるのは、縦表示のモバイル端末では全幅サイズが効果的であるためです。

Google が行ったテストの結果、縦表示のモバイル端末では、全幅サイズの記事内広告が効果的であることがわかっています。

参考：記事内広告の全幅レイアウト - AdSense ヘルプ

スマホでもタブレットでも PC でも、広告サイズを最適化したいところ。そこで出番となるのが、AMP 特有の media 属性です。

media 属性の使い方

AMP 特有の media 属性は、要素に下記のように追加し使います。

media="(max-width: 480px)"

(max-width: 480px) が指定された要素は、画面幅 480px 以下の場合にのみサイトに表示されます。CSS のメディアクエリと同じです。

この media 属性を使い、広告コードを下記のように修正します。

<amp-ad
  media="(max-width: 480px)"
  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>

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

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

3 つの広告コードを書いています。ただし、サイトに表示されるのは、このうち 1 つのみです。

画面幅 480px 以下では、幅は画面幅いっぱいの可変・高さは幅に合わせた可変の広告が表示されます。

画面幅 481px ~ 840px では、幅は可変・高さは 200px の固定で広告が表示されます。

画面幅 841px 以上では、幅は可変・高さは 90px の固定で広告が表示されます。

あらゆるデバイスに最適なサイズで、広告を表示できます。media 属性のブレイクポイント（480px や 841px など）や layout 属性、width 属性、height 属性の値などは、サイトに合わせて変更可能です。

コードの修正は許可されているか？

広告コードに media 属性を追加する修正は、AdSense ヘルプで許可されています。

ヘルプの AMP 対応のディスプレイ広告ユニットを作成するには、このように書かれています。

amp-ad コンポーネントについて詳しくは、https://www.ampproject.org/docs/reference/components/amp-ad をご覧ください。

リンク先は、AMP で広告を表示するために使う amp-ad コンポーネントの公式ドキュメントページです。そして、このドキュメントには、このような記述があります。

This element includes common attributes extended to AMP components.

翻訳すると「<amp-ad> タグには、AMP コンポーネントの共通属性が含まれる（使用できる）」と書かれています。

この共通属性の 1 つが、media 属性です。つまり、amp-ad コンポーネントを使うアドセンス広告にも media 属性を使用できるということ。

当サイトでは、media 属性を使ったアドセンス広告を 2 年以上 AMP ページに設置していました。その間に AdSense から警告は来ませんでした。また、広告の配信が停止されることもありませんでした。

ディスプレイ広告のサイズ制限

ディスプレイ広告のコードを書く際は、height 属性と width 属性の指定に気をつけます。

ディスプレイ広告のサイズに関し、Google は最大ピクセル数と最小ピクセル数に制限を設けています。

• 450 ピクセルを超えてよいのは高さか幅のどちらか一方のみ
• 最小幅は 120 ピクセル
• 最小高さは 50 ピクセル
• 高さと幅のどちらも 1,200 ピクセルまで

参考：固定サイズのディスプレイ広告ユニットのガイドライン - AdSense ヘルプ

制限が守られていない場合は、ディスプレイ広告はページに表示されません。特に、高さも幅も固定する layout="fixed" の指定時に注意が必要です。

特に修正したい 2 つの広告

可能な限り、AMP に設置しているすべての広告に media 属性を使いたいところです。ただ、すべてのコードの修正が難しい場合は、2 つの広告の修正を優先されるといいかもしれません。