iscle [イズクル] - あなたの生活に役立つネタを!

AMP用ページにGoogleアドセンスを問題なく設置する方法

竹中文人
執筆者:
[最終更新日]2016/11/17
[カテゴリ]アドセンス

AMP アドセンス広告

モバイル向けGoogleの検索結果にAMPが表示されるようになりましたが、AMP用ページは限られたタグやコードしか使用できないという制限があります。アクセス解析のGoogleアナリティクスを使用する場合も、通常のトラッキングコードを入れるのではダメで修正が必要でした。

またAMP用ページには広告を設置することが可能ですが、Javascriptを使用することができないAMPではGoogleアドセンスの広告コードをそのまま挿入することができません。ただしアドセンスを含めて現時点で下記の広告がAMPに対応しています。

  • A9
  • Adform
  • AdReactor
  • AdSense
  • AdTech
  • Dot and Media
  • Doubleclick
  • Flite
  • plista
  • Smart AdServer
  • Yieldmo
  • Revcontent

アドセンスの設置方法

ここではアドセンス広告をAMP用ページにも表示する方法をご紹介致します。なお、AMP用に広告コードを修正する必要がありますが、ポリシー違反にはならないことを確認しております(2016/3/8 確認)。

AMPでは広告を設置する場合 <amp-ad> のタグを使用します。アドセンス広告の場合は下記のような広告コードになります。

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

広告コードを作成する

まずはAMP用ページに掲載する広告をアドセンスで作成してください。作成方法は通常と変わりません。広告サイズは 300 x 250 の「レクタングル」にしてみます。
amp-ads-02

広告を作成してコードを取得してください。必要なのは下記の部分です。

data-ad-client="ca-pub-000000000000"
data-ad-slot="000000000"

取得したら先ほどの <amp-ad> のタグのコードの部分を、取得したコードと差し替えてください。これをAMP用ページの広告を表示させたい場所(記事下がお勧め)へ設置すればOKです!

もし WordPress を使用されている場合は、プラグインによって簡単にアドセンスの広告コードもアナリティクスのコードも設置することが可能です。下記ページでプラグインの使い方についてご紹介しておりますので、ぜひご覧ください。