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

 

こちらでご紹介する方法は2016年11月当時の古い情報ですので、参考程度にお読みいただければ幸いです。

具体的に申し上げますと、想定していたプラグイン
「Quick AdSense」と「AdSense Manager」
が利用できなくなったためです。

代替えとして「Quick AdSense」の後継プラグイン「WP QUADS」について調べましたが、無料版では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への対応が可能です。

 

AMPエラーのメッセージ
今回ご紹介する施策について、ブログのテーマ(テンプレート)の構成要素によって、Googleより「AMPページのエラーを修正してください」という依頼が届くケースが多々見受けられます。
様々な原因があるようで、僕も現在のところ検証中です。
そのため、この施策については、あくまでもアドセンス広告を表示させる方法の1つとして参考にしていただければ幸いです。

 

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

 

【通常表示(PC&モバイル共通)】

記事上(MOREタグ利用)、記事中、記事下(共有タグや関連記事の上)

■記事上のアドセンス広告は、WordPressのエディターで「MOREタグ」を入力した場所に表示されます。

■記事中のアドセンス広告は、表示方法を好みに応じて次の2パターンから選択していただきます。

1)プラグイン「Quick Adsense」を利用して、自動でランダム表示させる

2)プラグイン「AdSense Manager」&「AddQuicktag」を利用して、任意の場所に手動でタグ入力して表示させる

■記事下のアドセンス広告は、「Quick Adsense」を利用して自動表示させます。

 

【AMP表示】

記事上(画像の下)、記事中、記事下

■記事上のアドセンス広告は、「Quick Adsense」を利用して、記事内の最初の画像の下に表示されます。

※ 「Quick Adsense」には「MOREタグ」に表示させる機能もありますが、AMP用広告コードは認識されず表示されないため、このような表示方法になります。

※ プラグイン「Master Post Advert」を利用しても、AMP用広告コードは認識されず表示できませんでした。

■記事中のアドセンス広告は、通常表示と同様、表示方法を好みに応じて次の2パターンから選択していただきます。

1)プラグイン「Quick Adsense」を利用して、自動でランダム表示させる

2)プラグイン「AdSense Manager」&「AddQuicktag」を利用して、任意の場所に手動でタグ入力して表示させる

■記事下のアドセンス広告は、「Quick Adsense」を利用して自動表示させます。

 

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

1)記事中の広告を自動(ランダム)で表示させる場合

2)記事中の広告を手動(任意)で表示させる場合

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

 

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

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

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

 

 

プラグイン検索画面

 

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

 

■「AMP」

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

 

amp2

 

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

 

■「Quick Adsense」

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

 

Quick Adsenseプラグイン

 

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

 

■「AdSense Manager」&「AddQuicktag」

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

 

adsensemanager1
adquicktag1

 

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

 

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

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

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

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

 

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

adtipeimage

 

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

[広告設定]⇒[新しい広告ユニット]

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

 

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

 

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

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

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

 

【書き換え用コード】

 

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

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

「data-ad-slot=”1111111111“」

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

 

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

 

(例)

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

<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– AMP用記事上 –>
<ins class=”adsbygoogle”
style=”display:inline-block;width:300px;height:250px”
data-ad-client=”ca-pub-0000000000000000
data-ad-slot=”1111111111“></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

 

↓ ↓ ↓ ↓ ↓ ↓

 

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

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

 

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

ついでのポイント
現在使用している通常表示用の広告コードも、フリーエディター等にメモしておきましょう。
後ほどの設置作業の際に便利です。

 

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

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

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

 

「Quick Adsense」の設定方法

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

 

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

[設定]⇒[Quick Adsense]

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

 

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

 

quickadsense4

 

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

 

パターン1:記事中の広告を自動(ランダム)で表示させる場合

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

ただし・・・
通常(PC)表示用の記事上広告(MOREタグ)だけは、Wordpressのエディターで手動によって設置することになります。
【問題点】
すでにAdSense ManagerとAddQuicktagを利用しており、そこからこの設定に移行した場合、記事本文中に残されたAddQuicktag([ ad#co-1 ]など)が表示されてしまうので、気になる場合は一つ一つ削除しなければなりません。

 

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

 

quickadsense5

 

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

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

 

■Ads1(記事上MOREタグ用の通常(PC)用&モバイル用広告)

⇒ right after the <!–more–> tag

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

 

<p style=”text-align:center;”>スポンサーリンク<br>
通常のレスポンシブ対応広告コード(記事上用)
</p><br>

 

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

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

 

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

理由
なぜかMOREタグ用にはAMP用広告が認識されず表示されないため、ここには通常(PC)用レスポンシブ対応の広告コードだけを入力します。
アドバイス
プラグイン「Master Post Advert」の利用よりも、「Quick Adsense」の方が不具合(非表示になる等)が少ないと言われているので、切り替えることをおススメします。

 

■Ads2(記事中用の通常広告&AMP広告)

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

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

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

 

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

 

<p style=”text-align:center;”>スポンサーリンク<br>
通常の広告コード(記事中用)
(スペース)
リンク広告コード(なくても良いが、あると微妙に収益がUPする)
(スペース)
AMP用の広告コード(記事中用)
</p><br>

 

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

 

■Ads3(記事下用の通常広告&AMP広告)

⇒ to End of Post

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

 

<p style=”text-align:center;”>スポンサーリンク<br>
通常の広告コード(記事下用)
(スペース)
AMP用の広告コード(記事下用)
</p><br>

 

■Ads4(記事上用のAMP広告))

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

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

 

<p style=”text-align:center;”>スポンサーリンク<br>
AMP用の広告コード
</p><br>

 

確認
「to Beginning of Post」欄への入力でもテストしましたが、AMP用広告は認識されず表示されませんでした。
解説
「after Image’s outer <div> wp-caption if any. (New)」手前のチェック欄で、画像のキャプションの外に広告を掲載するかどうかを指定します。
キャプション内に広告が表示されるのは好ましいとは思えないので、チェックを入れて有効化することを推奨します。
【問題点】
1枚目の画像の下に広告が表示される設定になっており、画像と出典元表記の間に広告が表示されるという現象が起こる場合があります。
これは、画像の下に通常の入力方法で出典元等を記載したためです。
下記のように、メディアライブラリのキャプションを利用すれば、この問題は解決できるのでご確認ください。

 

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

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

 

<div align=”center”><span style=”font-size: 10pt;”>出典:<a href=”出典元URL” target=”_blank” rel=”nofollow”>出典元名称</a></span></div>

 

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

 

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

 

captionimage1

 

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

続いて、

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

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

 

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

 

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

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

ただし・・・
ワンクリックとは言え、あくまでも手動なので、入力し忘れないように気を付けなくてはなりません・・・!

 

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

[投稿]⇒[Ad Units]

をクリックします。

 

wordpress36

 

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

 

wordpress37

 

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

 

adsensemanager2_2
通常の広告コード(記事中用)
(スペース)
リンク広告コード(なくても良いが、あると微妙に収益がUPする)
(スペース)
AMP用の広告コード(記事中用)

 

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

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

 

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

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

 

wordpress38_3

 

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

 

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

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

 

wordpress39

 

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

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

 

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

 

●「<Before>:」部分

スポンサーリンク

 

●「</After>:」部分

 

 

wordpress40

 

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

 

wordpress41

 

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

 

wordpress43

 

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

 

とそれぞれ入力します。

 

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

 

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

 

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

[投稿]⇒[新規追加]

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

 

wordpress47

 

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

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

 

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

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

 

おしまいに

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

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

 

ただ・・・

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

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

 

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

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

 

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

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

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

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は読めませんのでブロック対象となります。ご注意ください。