WordPressでamp対応させたはいいものの、PC側で広告が表示されなくなった！？
という方のために、amp対応したページとPCサイトページ両方の記事上と記事下にアドセンス広告を表示させる方法を、HTML知識がほとんどない、僕なりの方法をご紹介したいと思います。
[su_note note_color="#0d79f5" text_color="#ffffff"]サイトをamp対応させるとアドセンス広告が表示されない？[/su_note]
Googleも推奨していることもあり、僕もDTM関連のサイトをamp対応させることに。
アドセンスコードの貼り付けについては、HTML知識のない僕はプラグインのQuick Adsenseを使っています。
amp対応させた場合、通常の広告コードのままでは広告は表示されません。
広告コードもamp対応させる必要があるのです。
僕が下手に説明するよりも、AdSenseヘルプの、AdSense 向け AMP 対応広告コード作成ガイドが参考になると思います。
https://support.google.com/adsense/answer/7183212?hl=ja
[su_note note_color="#0d79f5" text_color="#ffffff"]amp対応させるとアドセンス収益が落ちる？[/su_note]
2週間ほど様子見ると、なんとアドセンス収益が急降下！？
原因は程なく分かりました。
よくよく確認すると、広告が表示されているのはモバイルページだけで、PCサイトでは広告が表示されていなかったのです。
amp自体がモバイル向けだから当然なんですけど。
DTM関連のサイトは、ちょっとした調べもの、またニュースサイトや雑記ブログに比べて、PCからのアクセスが多いんだと思います。
実際アナリティクスで見ても、モバイルとPCからのアクセスが半々くらいなんです。
一方、僕の他ジャンルのブログなどは、ほとんどモバイルからのアクセスです。
つまり、せっかくのPCからのアクセスに、広告を表示させていなかったから収益も半分ほど落ちた、というわけです。
[su_note note_color="#0d79f5" text_color="#ffffff"]サイトをamp対応させる[/su_note]
まずは、サイトをamp対応させる方法から書きたいと思います。
知ってるよ、という人は飛ばして結構です。
プラグインの”AMP”をインストールする
プラグインの”AMP”をインストールして、有効化します。
↓
有効化したら、「設定→パーマリンク設定→変更を保存」と順にクリックします。
何も変更はしませんが、単純にクリックしていくだけです。
理由はわかりませんが、そうしないとamp対応が完了しないとどっかのサイトに書いてありました。
↓
これで、サイトのamp対応が完了しました。
確認するには、サイトをモバイルで開いて、URLの最後に、/amp/をつけて更新するだけです。
表示がシンプルになっているはずです。
[caption id="attachment_346" align="alignnone" width="300"]
左が通常表示、右がamp表示[/caption]
[su_note note_color="#0d79f5" text_color="#ffffff"]ampページにもGoogleアナリティクスを追加する[/su_note]
amp対応が完了したら、Googleアナリティクスも追加しておきましょう。
そのままだと、ampページを解析してくれないそうです。
僕の場合、”Facebook Instant Articles & Google AMP Pages by PageFrog”というプラグインで対応させました。
このプラグイン名で検索するといろんな人が設定方法を解説しています。
僕が下手に解説するより、自身がわかりやすいと思うサイトを参考にして見てください。
ちなみに、このプラグインで、アドセンス広告を”記事下のみ”amp対応させることができますが、僕はアナリティクス対応だけに利用しています。
[su_note note_color="#0d79f5" text_color="#ffffff"]プラグイン、Quick AdsenseとWp-Insertで広告コード貼り付ける[/su_note]
サイトを無事にamp対応させたら、アドセンス広告を貼り付けます。
Quick AdsenseもWp-Insertも、アドセンス広告を簡単に貼り付けることができるプラグインです。
もしかしてあなたも使ってる？
そうなんです。
Quick Adsenseにamp化させたコード、Wp-Insertに通常のコードを貼り付けるだけなんです。
それぞれに2つずつ、広告コードを貼り付けるわけです。
ちなみに、アドセンスは一つのページに3つまでしか広告を表示させることができません。
ただこの場合だと、PCページとampページは別物と認識されるみたいで、それぞれにちゃんと表示されます。
[su_note note_color="#0d79f5" text_color="#ffffff"]Quick Adsenseにamp化させたコードを貼り付ける[/su_note]
僕はQuick Adsenseにamp化させたコードを貼り付けていますが、別に逆でも構いません。
Wp-Insertにampコードを貼ったなら、Quick Adsenseに通常の広告コードを貼ればいいだけです。
広告の位置を決める
広告位置について、Googleは記事本文中に置くことを”低品質”のサイトだとしています。
Googleさんに従って、僕の場合は記事上と記事下に置くようにしています。
広告コードを貼り付ける
使っている方ならお分かりだと思いますが、シンプルに貼るだけですね。
広告の位置を決める項目で使用するコードを指定したり、ランダムにしたりすることができます。
[su_note note_color="#0d79f5" text_color="#ffffff"]Wp-Insertに通常の広告コードを貼り付ける[/su_note]
Quick Adsenseにamp化させたコードを張ったなら、Wp-Insertには通常の広告コードを貼り付けます。
つまりPCページで表示させるための広告です。
Quick Adsenseに貼り付けたampコードはPCページでは表示されないからですね。
Quick Adsenseと同じように、記事上と記事下に貼り付けます。
↓
①貼り付けたら、②赤色を緑色にして、③updateします。
[su_note note_color="#0d79f5" text_color="#ffffff"]広告表示を確認してみる[/su_note]
広告の設置が完了したら、PCでの表示、モバイルでのamp非対応の表示、amp対応表示を、それぞれ確認して見ます。
PCでの表示
モバイルamp非対応の表示
モバイルamp対応の表示
基本的に、広告のタイプはレスポンシブにしています。
ampでは記事上の広告は、長方形になるみたいですね。
[su_note note_color="#0d79f5" text_color="#ffffff"]まとめ[/su_note]
アドセンス広告をPCページとampページの両方に表示させる方法をまとめる以下の通りです。
・プラグイン、”AMP”をインストールして有効化する
・パーマリンク設定で変更を保存する
・Quick Adsenseにamp化させたコードを貼り付ける
・Wp-Insertには通常の広告コードを貼り付ける
やってみれば以外と簡単にできると思います。
ampはGoogleも推奨していますので、まだの方は是非お試しください。