WordPressで作ったAMP対応ページにGoogle AdSenseを設置するには？

WordPressで構築したAMP対応ページについて、今回はGoogle AdSenseを設置する方法をお伝えします。
今回のエントリも、「プラグインを使って簡単に」というのがテーマです。
早速、見てまいりましょう。

本題に入る前に、最近のAMP対応ページに関するトピックスをピックアップしておきます。
まだまだ未対応でも大丈夫だろう、とお考えの方も、考えが変わるかも知れませんよ？

Google Japan Blog

モバイルウェブを速く、快適に − AMP プロジェクト 1 周年
今月でプロジェクト発足から1年たち、Googleのモバイル検索の結果ページですべてのAMP対応ページに、「AMP」ラベルが表示されます。
記事によれば、検索結果からAMP対応ページの読み込み時間は平均1秒以下、通信データもAMP非対応ページに比べ1/10程度に軽減されているのだとか。
読み込みの速さ+通信量の節約がされているのはユーザーにとってうれしい限りですが、ワシントン・ポストでは88%のコンテンツロード時間の改善と23%の再訪ユーザー数増加があったという事例もあり、サイト運営側にも良い影響が期待できます。

海外SEO情報ブログ

Google、AMPカルーセルでのレシピリッチカードを提供開始
レシピサイトのコンテンツについてもリッチカードをカルーセル化するそうです。
今のところはアメリカだけとのことですが、いずれ日本でも実装されるのは間違いないでしょう。
個人的にはキッチンでレシピを確認するケースって本当に多く、レスポンスが高速化されるのは本当にありがたい。早く日本でも導入されて欲しいものです。

Googleタグマネージャが⚡AMPに対応
AMP対応ページに大量のタグを設置することもそうそう無いとは思いますが、Google Tag Managerで管理できるのはページ数が多いコンテンツサイトではありがたいことです。
通常のページのタグ管理をGoogle Tag Managerで行っている担当者にとっても、一元管理できるのでメリットは大きいですね。

着実にAMP対応ページ、対応コンテンツは広がりを見せています。
当ブログでは下記のエントリでAMP対応ページ導入についての解説をしてきましたが、あらためて読み返していただくと全然導入は難しくない、ということがお分かりいただけると思います。

AMP(Accelerated Mobile Pages)HTML 導入前に確認しておくこと
AMP(Accelerated Mobile Pages)HTMLの書き方、実際に書いてみた
WordPressサイトもプラグインで簡単AMP化！
サイトのAMP対応状況を確認しよう。Google「AMPテスト」ツール
AMP用ページをGoogle Analyticsで計測するには？

※Google AdSenseのアカウントをお持ちでない方は取得しておく必要があります。

Google AdSenseでAMP対応ページ用の広告ユニットを作成しておきます。
今回は300×250のレクタングル、名前はズバリ「AMP対応」としました。

以前ご紹介したプラグイン、「Facebook Instant Articles & Google AMP Pages by PageFrog」を使用します。今回のエントリは今まで使用したプラグインだけで完結するようになっています。
Adsメニューで設定画面に遷移し、Google AdSenseアカウントとAMP（WordPressプラグイン）を紐付けます。

プラグインのリクエストを許可。

Google AdSenseのアカウント一覧が表示されます。ここでは1アカウントのみ表示されています。
緑のボタンをクリックし広告ユニット選択画面に遷移します。

Google AdSense内に作成されている広告ユニット一覧が表示されています。
先ほど作成した「AMP対応」も確認できます。

プラグインの管理画面で指定した広告ユニット詳細について確認します。
広告を表示するためのチェックを入れれば設定が完了です。

設置確認のためにGoogle ChromeのデベロッパーツールでAMP対応ページを表示させてみました。
300✕250のレクタングル広告が記事下に設置され、AMP対応を表す⚡アイコンも変わらず確認できています。

ちなみに今回はGoogle AdSenseの設置もGoogle公式のプラグインで済ませています。
WordPressは下手に手打ちでカスタムするより、便利なプラグインを試してその分工数を減らしたほうが良いと考えているからです。
特にブログを書いている人にとっては、コンテンツページの改修に四苦八苦するよりも1記事でも多く書く時間に使ったほうが建設的ですよね。
そして書いた記事は…AMP対応ページでサクサク読んでもらう、というのが美しいのではないでしょうか。
当ブログでも何度かに分けてAMPプロジェクトについて解説してきましたが、環境が整ってきた今が導入のチャンスです。
ぜひ一連のエントリを参考に、AMP対応にチャレンジしてみてください。