AMP のアドセンス広告を最適化!画面幅に合わせてサイズを変更

AMPのmedia属性を使い画面幅に最適なサイズのGoogle AdSenseにする方法

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を「見やすさ」と「使いやすさ」にこだわり紹介しています。

多くのサイトが、 AMP に対応しています。

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

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

AMP 特有の media 属性を使えば、画面幅に合わせて広告サイズを変更できます。

広告を最適化するために、広告コードに media 属性を使われてはいかがでしょうか。

AMP での広告の問題点

AMP にアドセンス広告を設置するには、一般的に下記の広告コードを使います。 Adsense ヘルプの「 AMP 対応広告ユニットの作成方法」で紹介されているコードです。

<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 には合っていません。広告が表示されない恐れすらあります。

また、下記のように幅も高さも固定にすると、スマホでの広告収入が最大化されないかもしれません。

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

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

スマホでもタブレットでも PC でも、広告サイズを最適化したいところ。

そこで出番となるのが、 AMP 特有の media 属性です。

AMP の 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 属性、 widthheight の値などは、サイトに合わせて変更可能です。

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

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

ヘルプの「 AMP 対応広告ユニットの作成方法」には、このように書かれています。

さらに高度な機能では、他の AMP 要素と同じように、AMP 広告の要素のスタイルを設定できます。詳しくは、レイアウトを管理するさまざまな方法をご確認ください。

リンク先は、 AMP 公式サイトの「レイアウトとメディアクエリ」。このページでは、 AMP で使用できる layout 属性のほかに、 media 属性も解説されています。

つまり、 AMP に設置する広告コードにも、 media 属性を使用できるということ。

当サイトでは、 media 属性を使った広告を、半年間 AMP に設置していました。その間に AdSense から警告は来ていませんし、広告配信が停止されることもありませんでした。現在も media 属性を使っています。

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

AMP に設置しているすべての広告に、 media 属性を使いたいところです。ただ、すべてのコードの修正が難しい場合には、以下の 3 つの広告だけでも修正されてはいかがでしょうか。

記事内に設置している広告

モバイル端末で効果的な広告を設置する「記事内ネイティブ広告」と同じく、AMP でもスマホ向けには画面幅いっぱいに表示したいものです。

ただ、タブレット以上の画面幅には、全幅サイズは適していない可能性があります。

media 属性を使い、画面幅に合わせて広告を切り分けるといいかもしれません。

関連コンテンツユニット

多くのサイトが、 AMP でも関連コンテンツユニットを設置されています。気になるのが、高さを 1000px 以上の固定にされているサイトが多いこと。

スマホでは適した高さですが、タブレット以上の画面幅には適していません。 PC で見た時に、 20 ~ 30 以上もの関連記事があるサイトをよく見かけます。

media 属性を使えば、あらゆるデバイスに適した高さの関連コンテンツユニットを設置できます。

リンクユニット

AMP にリンクユニットを設置されているサイトもあります。

ただ、タブレットや PC で見た時に、リンク数が 10 以上になっているケースが見受けられます。

media 属性を使いながら広告の高さを修正することで、任意のリンク数を表示できます。

当サイトでは下記のコードを使って、スマホでは 4 行 1 列、タブレット以上では 2 行 2 列の 4 つのリンク数にしています。

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

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

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

AMP は、スマホ専用の仕組みではありません。

AMP ページしかない AMP 公式サイトは、 PC での検索結果にも AMP ページが表示されます。

また、誰がどのような環境でサイトを閲覧するかは分かりません。

スマホだけではなくすべてのデバイスに向けて、アドセンス広告のサイズを最適化するのが理想的です。