AMPとは？アドセンス広告の表示方法を徹底解説！トレンドブロガー必見！

AMPとは・・・？

AMP（Accelerated Mobile Pages）とは、Googleが推し進めてきたプロジェクトで、「モバイルページ高速化プロジェクト」とでも言うべきものです。

AMPを用いて表示したWEBサイトの画面は実にシンプルになっており、添付された画像なども軽量化されているようです。

論より証拠・・・ということで、ちょっと見比べてみましょう。

左側が通常の表示画面、右側がAMPによる表示画面です。

わかりづらいかも知れませんが、かなりシンプルに加工されていることは見て取れるかと思います。

このような処理を施して表示することで、とくにモバイルページの読み込み速度を上げて高速化しているわけです。

ちなみに、AMP対応済みのWEBページは、アドレス（URL）の末尾に「/amp/」と加えることで、PC画面上でも表示することができます。

既にTwitterやアメブロなど、様々なメディアがAMP対応を導入しています。

今現在、どの程度の影響があるのかは今のところ判然としませんが、今後のSEO的な観点からも無視できるものではありません。

これまでトップニュース等の一部分でしか利用されていなかったAMPですが、現在では通常のモバイル検索においても利用頻度が多くなりました。

アメリカから徐々にテスト導入が進められているとの話でしたが、日本のGoogle検索に波及するのも時間の問題でしょう。

事実、一般のブログにおいても対応を進めるサイトが増えつつあり、我々アドセンスブロガーにとっても無視できない状況です。

では、差し当たって、我々が運営するアドセンスブログがどのような状況に置かれるのか・・・？

「AMPを用いた画面表示では、現行のアドセンス広告が表示されない」

という重大な問題があるんです。

この現象への対応は急務とは言わないまでも、できる限り早めに施しておくに越したことはありません。

そこで今回は、WordPressを使ったブログについて、現時点（2016/11/25）で最良と思われる施策について解説します。

つまり、

・PCやモバイルでのこれまで通りの通常表示

・AMPを利用した場合の表示

の双方において、”可能な限り”問題なくアドセンス広告を表示させる方法をご紹介しようというわけです。

ご紹介する施策の概要

WordPressを利用したブログであれば、

プラグインを組み合わせることでAMPへの対応が可能です。

今回の施策で目指すアドセンス広告の表示パターンは、下記のような配置です。

つまり、今回ご紹介する対策方法は、好みに応じて2種類に大別されるとご理解ください。

１）記事中の広告を自動（ランダム）で表示させる場合

２）記事中の広告を手動（任意）で表示させる場合

それでは以下より、説明の流れに沿って、これら2種類の設定方法を解説していきます。

必要なプラグインをインストール＆有効化しよう♪

それでは、AMP表示に対応する施策に必要なプラグインを取得していきましょう。

WordPressのダッシュボード左のメニューより、［プラグイン］⇒［新規追加］と進みます。

画面右上の［プラグインの検索］欄にプラグイン名を入力して検索し、下記のそれぞれをインストール＆有効化していきます。

■「AMP」

まず、AMP表示を有効化するために、プラグイン「AMP」をインストールして有効化します。

有効化してしまえば、あとはとくに設定する等の必要はありません。

■「Quick Adsense」

続いて、アドセンス広告コードの設置のために利用するプラグイン「Quick Adsense」をインストールすて有効化します。

この設定方法については後述します。

■「AdSense Manager」＆「AddQuicktag」

次に、記事中のアドセンス広告を手動で任意の場所に表示したい場合には、「AdSense Manager」と「AddQuicktag」をインストールして有効化します。

この設定方法についても後述します。

AMP表示専用のアドセンス広告コードを準備しよう♪

AMP用のアドセンス広告コードを取得する

AMP表示用のアドセンスコードを新規で3つ（記事上、記事中、記事下）取得しておきましょう。

現行のアドセンスコードでも構わないのですが、後々、広告ごとの管理をする際などに区別しておく方が便利です。

広告タイプは、「300×250サイズのレクタングル」を推奨します。

これまでどおり、Googleアドセンスのアカウントにアクセスし、

［広告設定］⇒［新しい広告ユニット］

と進んで取得してください。

［名前］については、「AMP用記事上」「AMP用記事中」「AMP用記事下」のような感じでよろしいかと思います。

アドセンス広告コードをAMP専用コードに書き換える

先ほどの新規取得した３つのコードを、下記のAMP専用コードに書き換えます。

※Googleによって許可されたものなので、ご安心ください。

【書き換え用コード】

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

先ほどの新規取得済みのコードから、

「data-ad-client=”ca-pub-0000000000000000“」

「data-ad-slot=”1111111111“」

の2カ所をコピペすればOKです。

「0000000000000000」、「1111111111」の部分が、個人の識別用の数字になっていますので、これを移植したいわけです。

（例）

取得したアドセンス広告コード

書き換えたAMP用の広告コード

３つとも書き換え終わったら、普段使っているフリーエディターなどにメモしておきましょう。

AMPに対応したアドセンス広告コードの設置方法

それでは、いよいよアドセンス広告コードを設置していきます。

下記の手順に沿って、慎重に作業を進めてください。

「Quick Adsense」の設定方法

まずは、先ほどインストール＆有効化した「Quick Adsense」の設定方法について説明します。

WordPressのダッシュボード左メニューより、

［設定］⇒［Quick Adsense］

と進んで開いてください。

そして、まずは何も考えずに下図のように設定しましょう。

詳しい意味などは、設定の流れで説明していきます。

パターン１：記事中の広告を自動（ランダム）で表示させる場合

まずは、記事中の広告を含め、自動で表示させる場合の設定方法です。

「Quick Adsense」の設定画面を下へスクロールすると、下図のような入力欄があります。

先ほど設定した「Ads」項目に沿った入力欄になっているので、それぞれに対応したアドセンス広告コードを入力していきます。

入力欄ごとに見ていきましょう。

■Ads1（記事上MOREタグ用の通常（PC）用＆モバイル用広告）

⇒　right after the <!–more–> tag

ここには、通常表示用の記事上の広告コードを、下記のように入力します。

「スポンサーリンク」の部分を忘れずに！

※ レスポンシブ対応（携帯電話マークのある）広告コードを推奨します。

これにより、PCやモバイルの通常表示で、「MOREタグ」を設置した場所にアドセンス広告が表示されることになります。

■Ads2（記事中用の通常広告＆AMP広告）

⇒　to Middle of Post（記事中の広告をオートでランダム表示）

※ 「AdSense Manager」、「AddQuicktag」を利用していた方は、停止してください。

※ 記事中の広告を手動で任意の表示にする場合には、この設定は不要です。

ここには、通常表示用とAMP用の広告コードを、下記のように入力します。

［aside］アドバイス
リンク広告コードについてはなくてもOKですが、これもついでに取得して貼り付けておくと、微妙に収益が伸びると言われています。［/aside］

■Ads3（記事下用の通常広告＆AMP広告）

⇒　to End of Post

ここには、通常表示用とAMP用の広告コードを、下記のように入力します。

■Ads4（記事上用のAMP広告））

⇒　After Image［1］→ レ after Image’s outer <div> wp-caption if any. (New)

ここには、AMP用の広告コードを、下記のように入力します。

■キャプションを利用して画像下に出典元を記載する方法

WordPressに画像をアップする際、「キャプション」内に下記を入力します。

上記の「出典元URL」と、「出典元名称」を記入することで、画像下にリンク付きの出典元情報が表示できます。

「キャプション」とは、画像をアップロードする際や、［メディア］⇒［ライブラリ］から画像を選択することで表示される、下図のような入力欄にある項目のことです。

パターン２：記事中の広告を任意で入力したい場合

続いて、

「記事中の広告だけは常に自分の好きな場所に手動で設置したい！」

という方のための設定方法です。

まずは、最初にインストールしたプラグイン「AdSense Manager」、「AddQuicktag」を有効にします。

では、設定方法を解説していきます。

これを設定することで、記事中の広告を任意の場所に、ワンクリックで表示させることができるようになります。

WordPress管理画面のメニューから、

［投稿］⇒［Ad Units］

をクリックします。

下図のような画面になっていると思いますが、なっていなければ、［Add New Ad］をクリックすることで表示されるはずです。

枠内に、記事中の広告コードを次のように貼り付けます。

※ 枠内に複数の広告コードを縦に並べて入力できます。

［aside］アドバイス
リンク広告コードについてはなくてもOKですが、これもついでに取得して貼り付けておくと、微妙に収益が伸びると言われています。［/aside］

入力できたら、枠下の［Import］をクリックします。

すると下図のように、次の画面の右端に、入力された広告コードが反映されているはずです。

ちなみに、左上の「co-1」というのが、この広告コードの名前として記されています。

続いて、この画面の左下「Display Options」項目を、全部 「Yes」 に変更してください。

下図のようになればOKです。

実は、この画面は横長になっています。

画面を右にスクロールし、アドセンス広告に「スポンサーリンク」表示と、中央に表示させる設定をしていきます。

下図、「Wrap Html Code」の「<Before>:」、「</After>:」欄にそれぞれ次のように入力します。

●「<Before>:」部分

スポンサーリンク

●「</After>:」部分

画面左にスクロールして戻り、［Save changes］をクリックして完了です。

次に、WordPress管理画面のメニューから、［設定］⇒［AddQuickTag］をクリックしてください。

「Button Label」には「ad記事中」、
「ラベル名」には「adsense」、
「Start Tag(s)」には、

［ad#co-1］

とそれぞれ入力します。

右側のチェックボックスには、忘れずに”全部にチェックを入れる”ようにしてください。

左下の［変更を保存］をクリックして完了です。

WordPressダッシュボードのメニューから、

［投稿］⇒［新規追加］

と進んで、投稿画面を確認してみましょう。

上図のように［QuickTags］ボタンが表示されるようになったはずです。

クリックしてプルダウンメニューを表示させ、 「記事中」をクリックします。

これで上図のように、入力画面にアドセンス広告コード用のタグが入力されます。

［プレビュー］すると、アドセンス広告が表示されるはずです。

おしまいに

以上で、AMP対応のアドセンス広告表示の方法に関する解説はおしまいです。

これらは、あくまでも現時点で最良と思われる施策です。

ただ・・・

「single.php」等に直接アドセンス広告コードを貼り付けている方もいると思うのですが、その場合の検証ができておりません・・・。

おそらくは「Quick Adsense」を利用して、AMP用の広告コードを設置するだけで良いとは思うのですが、どのような不具合（「スポンサーリンク」の消え残りなど）が出るか判然としません。

また今後、さらに最適化された方法が出てくる可能性が大いにあります。

その際には、あらためてご紹介できればと考えます。

【追記・・・2016/11/28】

プラグインを利用したAMP表示対応として、現時点で最良と思われる設定についてご紹介しています。

よろしければ、下記をご覧くださいませ♪

UBL　Unchained Business Laboratory

AMP対応のアドセンス広告設置！2017年9月現在の最良の方法を解説！

https://watabonslab.com/best_of_amp_201709

 トレンドブログをAMP対応にする際の課題のひとつ、アドセンス広告の設置方法についての続報です。 これまでの方法でも対応できたものの、PC表示の際に「スポンサーリンク」の文字だけが消え残っていたりして不完全でした。 それが今回の方法で解消されましたので、取り急ぎご紹介しておこうと思います。  以前、下記の記事ににて、少々ややこしい設定方法をご紹介しました。  その際の表示には、かなり納得のできない部分がありつつも、ほかにアイデアが浮かばないので放置しておりました。 ...