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

Akira

福岡在住の Web デザイナー。Web サイト制作に役立つ情報を紹介しています。AMP が大好き。

FacebookTwitter で記事の更新をお知らせしています。

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

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

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

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

この media 属性を Google Adsense に指定する方法をご紹介します。

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

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

スマホでもタブレットでも 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 属性を使ったアドセンス広告を 1 年以上 AMP ページに設置しています。その間に AdSense から警告は来ていませんし、広告配信が停止されることもありませんでした。現在も media 属性を使っています。

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

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

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

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

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

特に修正したい 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 ページが表示されます。

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

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

送信に失敗しました

ボットと判定された可能性があります。

大変お手数をおかけしますが、以下の内容をご確認の上、再度のコメントの送信をお願い申し上げます。