AMP化してアドセンスをAd Inserterで表示させる

当サイトtek2tech.comをGoogleのAMP(Accelerated Mobile Pages)に対応させました。AMPは2015年末に出てきたモバイル端末用のウェブサイト高速化方法で、Googleがページをキャッシュしておいてくれるという優れもので、元々表示が遅いページでも非常に高速な表示になります。

アドセンス広告などへの対応が不安だったのと忙しかったので導入が遅くなりましたが、プラグインを使ってAMP対応しアドセンスも載せることができました。

AMP化するAutomatticのプラグイン

AMP化をしてくれるプラグインは、Wordpress全体に大きく関わっているAutomatticが出しているその名も「AMP」です。

これだけで検索で引っかかる、個別ページをAMP化してくれますが、トップページは通常ページのままですしON/OFF以外に設定がないので他のプラグインと組み合わせて使います。

今回私が使っているのは、これまたそのままの名前の「Accelerated Mobile Pages」です。

https://wordpress.org/plugins/accelerated-mobile-pages/

AMPページにソーシャルシェアボタンを付けられますし、本当はAd Inserterなしでもアドセンス広告を載せられる高機能なプラグインです。後で気づきました。

Ad Inserter

AMPページだけに広告を載せられる機能が付いているので選んだ広告挿入プラグインです。設定画面は少し武骨ですが、簡単に使えます。

Ad InserterでWordPressにアドセンス広告を貼る

歯車のマーク()からヘッダーの設定に入り、ヘッダー部にアドセンスを有効にするスクリプトを配置します。

[ADINSERTER AMP]
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

ここで[ADINSERTER AMP]を記載すると、それ以降がAMPページに使用されるコードになります。設定を分けてもいいのに、と最初は思いましたが、スクリプト以外のコードを共通化できますし、設定が一か所にまとまっているのでわかりやすいかもしれません。

配置する広告コードのページでは、Miscタブの下のほうにある、AMP Pagesのチェックは触りません。ここをチェックすると、[ADINSERTER AMP]は使われずに(?)AMPページにも通常と同じコードが挿入されます。スクリプトを使用していない広告コードを自動挿入する意味がわかりませんので、他に自動で入れたい広告以外のコードを使いたい時用でしょうか。