GoogleアドセンスのAMP対応!初心者でも簡単!
今日はとってもおめで鯛日。
そう、何を隠そう僕の誕生日だ!
30代後半組への仲間入りを果たした!
本日6月21日で無事に35歳を迎えることができ、素敵な一年にしようと思う。
そんな意気込みを胸に誓い、さだまさしの「とこしへ」を聞きながら記事を書いている。
誕生日には似つかわしくないとってもセンチメンタルな曲。
こんな日もある。
さて、今日はワードプレスAMP対応の最終編!
GoogleアドセンスのAMP対応をご紹介。
アドセンスもAMP用にタグを変える必要がある!
ワードプレスをプラグインでAMP対応化し、
関連記事:ワードプレスにAMPを導入する手順とメリット&デメリット
GoogleアナリティクスもAMP対応が完了した。
最後はみんなが一番気になるアドセンス。
初心者でもコピペで一発の簡単作業なので心配無用。
では、実際の作業に行ってみよう!
まずはアドセンス用の母体コード
アナリティクスの時もそうだったように、アドセンスもAMP用のタグが存在する。
まずはAMP用のスクリプトをheadタグの中に下記を挿入。
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
前回の記事で紹介したアナリティクスのスクリプトを入れる作業と一緒。
念のためにおさらいとしてもう一度。
プラグインAMPの編集をクリック。
amp/templates/single.php
上記をクリックし編集画面を開く。
赤枠で囲んである部分にコピペしよう!
AMP FOR WP – Accelerated Mobile Page併用の場合
元からタグが挿入されているので何もしなくてオッケー!
これが完了すれば、次は実際の広告コード。
これは広告を出したい部分に挿入するので、各々バラバラだと思う。
ちなみに、記事の本文部分しかAMPには反映されないので、広告コードをはAMPプラグインのファイルに直接貼る必要がある。
オリジナルページの記事下や記事本文のコードは反映されない。
関連記事:ワードプレス記事中にアドセンスなどの広告挿入で収益アップ!もちろんコピペでOK
次は広告コードの対応!
これがAMP用のアドセンスコード。
<amp-ad layout="responsive" width=300 height=250 type="adsense" data-ad-client="ca-pub-000000000000" data-ad-slot="000000000"> </amp-ad>
これはレスポンシブ用のコードなんだけど、
Googleもこれを推奨しているので、スマホならレスポンシブがいいだろう。
上記のコードの、
data-ad-client="ca-pub-000000000000" data-ad-slot="000000000"
この部分。
これを自分の通常アドセンスコードから抜粋して置き換えるだけ。
以上でコードの設置は完了!
通常用のコードはレスポンシブのコードを適用しよう!
どうしても300×250がいいって人は、
<amp-ad width="300" height="250" type="adsense" data-ad-client="ca-pub-000000000000" data-ad-slot="000000000"> </amp-ad>
こちらのコードを利用すれば大丈夫。
要領はレスポンシブと一緒。
以上で完了!
広告コードはAMP用に新しく作成しよう!
効果測定ができないからね。
AMP FOR WP – Accelerated Mobile Page併用の場合
管理画面から簡単にコード挿入が可能。
左メニューのAdvertisementをクリックして、
data-ad-client="ca-pub-000000000000" data-ad-slot="000000000"
自分のコードを2つ入れるだけ。
表示場所は6個から選べるのでお好みで。
アドセンス利用者にオススメのAMP対応
前回、前々回の記事でAMP対応化の記事を書いているが、使用するプラグインの組み合わせなどパターンはいっぱいある。
AMPプラグインのみでもAMP化は可能だが、プラグインファイルに直接コードやスクリプトを書き込むなどの手間がある。
オススメはここでも紹介している、
AMP FOR WP – Accelerated Mobile Pageプラグイン
上記との組み合わせ。
もしくは、
Facebook Instant Articles & Google AMP Pages by PageFrog
このプラグインとの組み合わせ。
とりあえず名前長いよね。
後者のプラグインは既に解説している方がいたので割愛する。
コチラからどうぞ。
まとめ
三回にわたってご紹介したワードプレスのAMP対応。
少しはお役に立てただろうか!?
まだまだ導入している個人ブログなどは少ないので、早いうちから導入して差をつけるのもあり!
早くから導入することで色んなテストもできるし、カスタマイズもできる。
AMPがメジャーになる頃には貴方のサイトは完全体になっているはず!?
Googleが推奨しているものはとりあえず試しておいて損はない!
早速実施してみよう!
躓いたらいつでもご連絡を!