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

Wordpress

≪≪この記事をすべて読むには約 4 分かかります≫≫

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

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

AMP化するAutomatticのプラグイン

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

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

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

AMP for WP – Accelerated Mobile Pages
AMP for WP is the most recommended AMP plugin by the community. Automatically add Accelerated Mobile Pages (Google AMP Project) functionality on your …

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

Ad Inserter

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

Ad InserterでWordpressにアドセンス広告を貼る
少し前まで、このサイトに載せてあった広告はSimple Ads Managerというプラグインで動作していました。 動作自体は問題ないものの、プラグインの更新が止まって久しかったので、良い機会なので新しいプラグインに変更しました。条件は、...

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

[[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ページにも通常と同じコードが挿入されます。スクリプトを使用していない広告コードを自動挿入する意味がわかりませんので、他に自動で入れたい広告以外のコードを使いたい時用でしょうか。

コメント

  1. ジャック より:

    わかりやすい記事をありがとうございます!

    アドセンスではこのHTMLを追加すれば良いということですが、midi8 ではどのようなHTMLを追加すれば良いのでしょうか?

    ご返信頂けるととても助かります。よろしくお願いいたします!

タイトルとURLをコピーしました