FirstLayout

media属性を使いAMPページでGoogle AdSenseの広告サイズを画面幅に応じて変更する方法

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" の指定時に注意が必要です。

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

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

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

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

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

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

関連コンテンツユニット

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

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

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

リンクユニット

リンクユニットは、2021 年 3 月 10 日以降は作成できなくなりました。

参考 リンクユニットが提供終了となります

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>
メニュー 閉じる 検索 記事を読む Facebook Twitter はてなブックマーク Pocket LINE ダウンロード 全ての記事 Web制作 便利ツール