GoogleアドセンスのAMP対応方法。AMPでアドセンスが表示されないを解決

投稿日：2018年3月19日

先日の記事でそれなりにSEOで上位表示が叶ったという話をしましたが。あービックリした。スマホの検索結果はAMP設定でAMPが優先表示になるんですね。正直、以前までは選ぶ感じだったと思ったんですが...今更ながら「AMP表示でGoogleアドセンスが全く表示されない」ということに気が付きました(笑)というわけで、AMPでもアドセンスを表示する方法を書いておきます。

1 AMPページにユーザーが来ているかを確認
2 アドセンス広告をAMPページに設置してみよう
- 2.1 AMPソースのhead内にタグを設置します。
- 2.2 body内のアドセンスを張りたい箇所に広告タグを設置します。
  - 2.2.1 画面の全幅設定のレスポンシブバナーのアドセンスフォーマット
  - 2.2.2 画面の幅指定のレスポンシブバナーのアドセンスフォーマット
3 AMPページをプラグインで構築している場合のアドセンス
- 3.1 ワードプレスサイトをAMP対応するプラグイン
- 3.2 「AMP for WordPress」でのアドセンスの入れ方
4 GoogleアドセンスのAMP対応方法のまとめ

AMPページにユーザーが来ているかを確認

まず、自分のサイトやブログのAMPページにユーザーのアクセスがあるかどうか？を確認しましょう。正直、テンプレートやアナリティクスの張り方で見え方が変わってくる可能性があります。なぜなら僕はAMPに対して何も設定はしてなかったからです。

当ブログは「AFFINGER（アフィンガー）」のテンプレートなので、管理画面からAMP対応をチェックするとそれだけでAMP対応になっていたんですよね。仕組みはわかっていません(笑)ちなみに、digipressというテンプレートの新しいものはAMP対応になっています。当ブログと同じ状況ですが、広告コードだけはAMP用でないと表示はされません。

AMPとは簡単に言えばJavaScriptを読み込まず、静的な画像やテキストしか表示させない仕組みだそうです。細かいことはどうでもいいんですが(笑)とりあえず記事中に利用している「アドセンスの記事内広告」は一切表示されませんので、AMPでのアクセスが多いのかどうかは必ず確認してください。

ひぽぽたますの場合、「アームコイン」というちょっと怪しいICO案件のキーワードで上位です。このページのIDは/245/ですが、ここのアクセス解析を見てみると･･･

分かりますか？（※クリックすると拡大できます。）ちなみに直近3日間のデータです。通常ページよりAMPページの方がアクセスが倍ですｗｗｗAMP対応だけして、広告のAMP対応を怠った結果･･･綺麗に文章だけ書かれたテキストページのみユーザーに提供しているわけです。アドセンスの自動広告なんてもはや何も差し込まれません。つらいですよね？このままでは単なる情報提供の素晴らしいブログになってしまいます。いや、それでいいんですが(笑)ってので、AMPページにアドセンス広告を張る方法をご紹介します。

アドセンス広告をAMPページに設置してみよう

Googleヘルプから概要はでてますので、簡略的にご紹介します。

AMPソースのhead内にタグを設置します。

ここで1個間違えないようにして下さい。どこのどんなテンプレートを利用してても共通ですが、AMPのソースの<head></head>内です。全体ソースの<head></head>内に記載しても意味はありません。僕はここで永遠とループしました。AMPのソースを見つけたら下記のタグを<head></head>内に設置します。

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

body内のアドセンスを張りたい箇所に広告タグを設置します。

こちらもお間違えないように。記事中にアドセンスタグ設置しても意味はありません！！！アドセンスの設置はAMPソース内の<body></body>内に設置します。ワードプレス利用者が多い中、恐らく間違える方多発と思います。記事内広告と同様にウィジェット内や記事中に入れ込んでもAMP側には反映されませんのでお気を付けください。

Googleアドセンスにログインし、AMP用にレスポンシブ広告ユニットのコードを取得します。コードを取得したら下記2つのIDをメモ帳か何かに保存しましょう。コード自体は使いません。IDだけ必要です。

サイト運営者ID（data-ad-client）⇒ ca-pub-1234567891234567
広告ユニットID（data-ad-slot）⇒ 1234567890

上記で取得したIDをAMP用のアドセンスフォーマットに記載します。下記のID部分だけコピペでOKだと思います。

画面の全幅設定のレスポンシブバナーのアドセンスフォーマット

<amp-ad layout="fixed-height" height=100 type="adsense" data-ad-client="ca-pub-1234567891234567" data-ad-slot="1234567890"> </amp-ad>
スマホの幅前面にでるフォーマットです。

画面の幅指定のレスポンシブバナーのアドセンスフォーマット

<amp-ad layout="responsive" width=300 height=250 type="adsense" data-ad-client="ca-pub-1234567891234567" data-ad-slot="1234567890"> </amp-ad>
一般的なレスポンシブバナーのサイズです。

あまりサイズの変更はしない方がよさそうです(笑)Googleさんが提供してくれているフォーマットを改変する必要性はないと思います。

AMPページをプラグインで構築している場合のアドセンス

ワードプレスでサイトを運用している場合、ひぽぽたますはテンプレートにてAMP対応をしていますが、AMP対応されていないテンプレートの場合、プラグインを利用します。

ワードプレスサイトをAMP対応するプラグイン

色々なAMP対応プラグインがありますが、1番シンプルで使いやすいのが「AMP for WordPress」だと思います。特に何も設定せず有効化するだけで各ページの/amp/が作成されます。自分はできるだけプラグインは入れたくないので、AMP対応のプラグインはこれだけです。

「AMP for WordPress」でのアドセンスの入れ方

前述のように記事内にAMPタグを埋め込んでも意味がないので、AMPページのソースを変更します。「AMP for WordPress」はワードプレス管理画面の「プラグイン⇒プラグイン編集⇒AMP」にて対応可能です。

上記ファイルに「アドセンス広告をAMPページに設置してみよう」の内容でタグを埋め込みます。基本的なソースが分かっていればPHPわからずとも挿入することができるハズです。

GoogleアドセンスのAMP対応方法のまとめ

上述した形で、アドセンスをAMP表示になった場合でも、表示することができるようになりました。ひぽぽたますのAMPページアクセスユーザーにもアドセンスが表示される為、広告収入が多少は見込めるかと。テンプレートを利用しない場合は、AMP対応はプラグインにて行います。こちらは現在、プラグイン編集からソースを変更しながらAMPのアドセンス対応をしています。そのやり方も後日書こうと思います。
※当ページはコピーが可能な設定になっています。