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

 

トレンドブログをAMP対応にする際の課題のひとつ、アドセンス広告の設置方法についての続報です。

 

これまでの方法でも対応できたものの、PC表示の際に「スポンサーリンク」の文字だけが消え残っていたりして不完全でした。

 

それが今回の方法で解消されましたので、取り急ぎご紹介しておこうと思います。

 

 

以前、下記の記事ににて、少々ややこしい設定方法をご紹介しました。

 

 

その際の表示には、かなり納得のできない部分がありつつも、ほかにアイデアが浮かばないので放置しておりました。

 

ところが、今回新しいブログを立ち上げるにあたり、今一度検証してみたところ、意外にあっさりと問題が解決できたみたいなんです。

 

広告が表示されていないのに「スポンサーリンク」という文字列だけが消え残ることもありません。

 

 

今回の方法では、プラグイン「Quick Adsense」のリニューアル版「Quick Adsense Mobile」を利用して設置します。

 

このプラグイン1つで、PC表示もモバイル表示も、そしてAMP対応も解決してしまいます。

 

目指したのは、

「通常表示の場合と同じ位置にアドセンス広告を表示させること」

です。

 

Googleアドセンスのポリシーに反することなく、理想的な配置をAMP表示でも実現できるはずなので、参考にしてみてください。

 

スポンサーリンク

アドセンス広告コードの取得と加工

■レスポンシブのアドセンス広告コードを、記事上、記事中、記事下用として3つ取得します。

 

1つのコードを3箇所に配置してもかまいませんが、クリック率等のデータを取得する場合を想定して、それぞれ別々のコードを使うべきだと思います。

 

例えば、記事上用のコードだったら、下記のように「記事上レスポンシブ」のように名前を付けておくと区別しやすいですね。

 

<pre class=”lang:default decode:true “><script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– 記事上レスポンシブ –>
<ins class=”adsbygoogle”
style=”display:block”
data-ad-client=”ca-pub-0000000000000000″
data-ad-slot=”1111111111″
data-ad-format=”auto“></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></pre>

 

 

■それぞれ、「”auto”」の記載を「”rectangle”」に書き換えます。

 

<pre class=”lang:default decode:true “><script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– 記事上レスポンシブ –>
<ins class=”adsbygoogle”
style=”display:block”
data-ad-client=”ca-pub-0000000000000000″
data-ad-slot=”1111111111″
data-ad-format=”rectangle“></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></pre>

 

こうすることで、常に読者の目に止まりやすいレクタングルタイプの広告が表示されることになり、クリック率の向上にも期待できます。

 

 

■続いて、AMP用として使うアドセンス広告コードを取得して、AMP対応に変換します。

 

ここでは設置例だけを記載しておりますので、プラグインのインストールや設定方法AMP用コードへの変換方法については下記をご参照ください。

 

 

変換したコードは下記のようになります。

 

<pre class=”lang:default decode:true “><amp-ad width=”300″ height=”250″
type=”adsense”
data-ad-client=”ca-pub-0000000000000000″
data-ad-slot=”1111111111″>
</amp-ad></pre>

 

 

■次に、先ほどのレスポンシブコードと、このAMP用コードを組み合わせて、

 

<p style=”text-align: center;”>スポンサーリンク<br />

 

と、

 

</p><br />

 

で挟みます。

 

完成形は下記のようになります。

 

<p style=”text-align: center;”>スポンサーリンク<br />

<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– 記事上レスポンシブ –>
<ins class=”adsbygoogle”
style=”display:block”
data-ad-client=”ca-pub-0000000000000000″
data-ad-slot=”1111111111″
data-ad-format=”rectangle”></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 />

 

■これを、記事上用、記事中用、記事下用の3つ作り、メモ帳やフリーエディターにメモしておきましょう。

 

スポンサーリンク

「Quick Adsense Mobile」にセットする

■プラグイン「Quick Adsense Mobile」をインストール&有効化します。

 

■WordPress管理画面(ダッシュボード)のサイドメニューから、

[設定][Quick Adsense Mobile]

と進みます。

 

■表示画面で、デフォルトで入っているチェックを外しておきます。

 

 

「Quicktag :」項目の、

[ Show Quicktag Buttons on the HTML Edit Post SubPanel ]

にチェックを入れます。

 

 

「Adsense Codes」項目の「Ads on Post Body :」にある枠に、先ほど作成してメモしておいたアドセンス広告コードをコピペで設置します。

 

 

「Ads1 :」⇒ 記事上用

「Ads2 :」⇒ 記事中用

「Ads3 :」⇒ 記事下用

 

という感じです。

 

■設置が完了したら、画面左下の[変更を保存]をクリックして完了です。

 

スポンサーリンク

記事へのアドセンス広告コードの設置方法

WordPressの記事投稿用エディター画面で、「テキスト」モードにすると下図のようにクイックタグが表示されています。

 

 

これらをクリックすることで、記事本文中の任意の場所にアドセンス広告を表示させることができます。

 

 

以前の記事では、記事上のアドセンス広告は「moreタグ」を使うことで表示させるようにしていました。

しかし、今回のセッティングでは、「moreタグ」を使うとAMP表示ができないみたいなんです。

なので、従来「moreタグ」を使っていた部分には「Ads1」で広告を表示させます。

 

 

これで、PCやモバイルの通常表示にはレスポンシブのレクタングル広告が、AMP表示ではAMP用の広告が、それぞれ表示されるようになります。

 

以前のように「スポンサーリンク」という文字だけが消え残って表示されるようなこともないはずです。

 

また何か気づいたことがあったら追記していきますが、まずはお試しくださいませ♪

 

 

スポンサーリンク

コメントを残す

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

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