下記の記事で、AMP対応のアドセンス広告設置方法について、最新の情報をお伝えしています。
併せてご確認くださいませ♪
今回ご紹介する施策について、ブログのテーマ（テンプレート）の構成要素によって、Googleより「AMPページのエラーを修正してください」という依頼が届くケースが多々見受けられます。
様々な原因があるようで、僕も現在のところ検証中です。
そのため、この施策については、あくまでもアドセンス広告を表示させる方法の1つとして参考にしていただければ幸いです。
Googleが推進しているモバイルページ高速化へ向けたプロジェクト、それがAMP（Accelerated Mobile Pages）と呼ばれる表示方法です。
WordPressで運営するWEBサイトなら、プラグイン「AMP」をインストール＆有効化することで対応できます。
そして、表示されたコンテンツのURL末尾に「/amp/」と追記することで、PC画面上にも表示することが可能です。
しかし、AMP表示すると、貼付されているはずのアドセンス広告が表示されないという問題が発生します。
この問題について、2016年11月28日現在で最良と思われる対策方法についてご紹介しようと思います。
アドセンス広告の設置については、「single.php」に直接埋め込んでいる人と、プラグインを利用して貼付する人がいると思います。
今回は、後者のケースについて解説しています。
※ 僕自身がプラグインを利用しているため、「single.php」に埋め込んでいる場合の検証ができておりません。
AMP表示対応の概要
ご紹介するAMP対策には、下記３つのプラグインを使い分けることになります。
・Quick Adsense
・Adsense Manager
・AddQuicktag
それぞれの用途は下記のとおりです。
■Quick Adsenseを利用して、
・通常表示用（MOREタグに反映）の記事上、
・AMP表示用の記事上（1枚目の画像下）
を設置
■Adsense Manager＆AddQuicktagを利用して、
・通常表示用およびAMP表示用の記事中、
・通常表示用およびAMP表示用の記事下
を設置
ただし、この設置方法には、下記のような問題点があります。
・通常表示（PC、モバイル共通）の際の記事中に、AMP用の「スポンサーリンク」という文字列が表示されてしまう。
・AMP表示の際の記事中に、通常表示用の「スポンサーリンク」という文字列が表示されてしまう。
もっとも、プラグインをどのような組み合わせで使い分けても似たような問題が発生します。
その中でも、今回の設定方法が比較的好ましいと考えます。
また、この設定方法のメリット、デメリットは次のようなものです。
【デメリット】
記事中および記事下の広告は、記事ごとに手動で入力しなければならない。
※ WordPressエディター（投稿画面）から、Ad Unitコードをクリックするだけで任意の場所に設置できるが、入れ忘れの可能性があるので要注意！
【メリット】
AMP表示用の記事上広告は1枚目の画像の下に表示されるわけだが、記事中広告をQuick Adsenseで自動設定していると、広告が隣接して表示される場合がある。
その点、Adsense Manager＆AddQuicktagを利用すれば、記事中の広告位置を任意で決められるため、AMP表示の際に、記事上広告と隣接することを回避できる。
※ スマホ表示の場合、画面上に2つ以上のアドセンス広告が表示される状態は好ましくないとされている。1スクロールにつき1つの広告表示が原則。
以上については、僕のようにこれまでもAdsense Manager＆AddQuicktagを利用してアドセンス広告を表示させていた人にとっては、大きな問題はないと考えます。
プラグインの使い分けと広告コードの設置例
それでは以下、アドセンスコード設置の詳細についてご紹介します。
ここでは設置例だけを記載しておりますので、プラグインのインストールや設定方法、AMP用コードへの変換方法については下記をご参照ください。
Quick Adsenseへの広告設置
記事上（MOREタグに反映）／通常表示（PC、モバイル共通）用
⇒ Ads1 right after the＜!–more–＞ tagの欄に適用
<p style="text-align:center;">スポンサーリンク<br>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 記事上レクタングル -->
<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>
</p><br>
記事上（1枚目の画像下）／AMP表示用
⇒ Ads4 after Image’s outer ＜div＞wp-caption if any. (New)の欄に適用
<p style="text-align:center;">スポンサーリンク<br> <amp-ad width="300" height="250" type="adsense" data-ad-client="ca-pub-0000000000000000" data-ad-slot="1111111111"> </amp-ad> </p><br>
【例】Adsense Manager＆AddQuicktag（AdUnits）への広告設置
「co-1」の設定
（スペース）
記事中 リンク用 （※ 添付すると微妙に増収するとされるが、なくてもOK）
（スペース）
記事中 AMP表示用
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 記事中レクタングル -->
<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>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- AMP用記事中（リンク） -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-0000000000000000"
data-ad-slot="1111111111"
data-ad-format="link"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<amp-ad width="300" height="250"
type="adsense"
data-ad-client="ca-pub-0000000000000000"
data-ad-slot="1111111111">
</amp-ad>
</p><br>
「co-2」の設定
（スペース）
記事下 AMP表示用
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 記事下レクタングル -->
<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-ad width="300" height="250"
type="adsense"
data-ad-client="ca-pub-0000000000000000"
data-ad-slot="1111111111">
</amp-ad>
以上です。
それぞれ、このように設置すれば現時点での最良な対応になるかと思われます。
「問題点」については、現在のところ解決方法がないため少々気持ちが悪いのですが、これらに代わるより良い対応策が見つかった際には、あらためてご紹介していきます。
コメントを残す