amp対応したページとPCサイトページ両方の記事上と記事下にアドセンス広告を表示させる方法

パソコンとモバイルフォンとタブレット

WordPressでamp対応させたはいいものの、PC側で広告が表示されなくなった!?
という方のために、amp対応したページとPCサイトページ両方の記事上と記事下にアドセンス広告を表示させる方法を、HTML知識がほとんどない、僕なりの方法をご紹介したいと思います。

 

 

サイトをAMP応させるとアドセンス広告が表示されない?

Googleも推奨していることもあり、僕もDTM関連のサイトをamp対応させることに。
アドセンスコードの貼り付けについては、HTML知識のない僕はプラグインのQuick Adsenseを使っています。

 

 

amp対応させた場合、通常の広告コードのままでは広告は表示されません。
広告コードもamp対応させる必要があるのです。
僕が下手に説明するよりも、AdSenseヘルプの、AdSense 向け AMP 対応広告コード作成ガイドが参考になると思います。

https://support.google.com/adsense/answer/7183212?hl=ja

 

 

 

amp化するとアドセンス収益が落ちる?

2週間ほど様子見ると、なんとアドセンス収益が急降下!?
原因は程なく分かりました。
よくよく確認すると、広告が表示されているのはモバイルページだけで、PCサイトでは広告が表示されていなかったのです。
amp自体がモバイル向けだから当然なんですけど。

 

 

 

DTM関連のサイトは、ちょっとした調べもの、またニュースサイトや雑記ブログに比べて、PCからのアクセスが多いんだと思います。
実際アナリティクスで見ても、モバイルとPCからのアクセスが半々くらいなんです。
一方、僕の他ジャンルのブログなどは、ほとんどモバイルからのアクセスです。
つまり、せっかくのPCからのアクセスに、広告を表示させていなかったから収益も半分ほど落ちた、というわけです。

 

 

サイトをAMP対応させる

まずは、サイトをamp対応させる方法から書きたいと思います。
知ってるよ、という人は飛ばして結構です。

 

プラグインの”AMP”をインストールする

プラグインの”AMP”をインストールして、有効化します。

ampをインストールする

ampを有効化する

 

有効化したら、「設定→パーマリンク設定→変更を保存」と順にクリックします。
何も変更はしませんが、単純にクリックしていくだけです。
理由はわかりませんが、そうしないとamp対応が完了しないとどっかのサイトに書いてありました。

パーマリンク設定

パーマリンク設定の変更を保存

 

これで、サイトのamp対応が完了しました。
確認するには、サイトをモバイルで開いて、URLの最後に、/amp/をつけて更新するだけです。
表示がシンプルになっているはずです。

 

 

amp対応とampなしの比較

左が通常表示、右がamp表示

 

 

ampページにもGoogleアナリティクスを追加する

 

amp対応が完了したら、Googleアナリティクスも追加しておきましょう。
そのままだと、ampページを解析してくれないそうです。
僕の場合、Facebook Instant Articles & Google AMP Pages by PageFrog”というプラグインで対応させました。

 

 

 

このプラグイン名で検索するといろんな人が設定方法を解説しています。
僕が下手に解説するより、自身がわかりやすいと思うサイトを参考にして見てください。
ちなみに、このプラグインで、アドセンス広告を”記事下のみ”amp対応させることができますが、僕はアナリティクス対応だけに利用しています。

 

 

プラグイン、Quick AdsenseとWp-Insertで広告コード貼り付ける

サイトを無事にamp対応させたら、アドセンス広告を貼り付けます。
Quick AdsenseもWp-Insertも、アドセンス広告を簡単に貼り付けることができるプラグインです。
もしかしてあなたも使ってる?

 

 

そうなんです。
Quick Adsenseにamp化させたコード、Wp-Insertに通常のコードを貼り付けるだけなんです。
それぞれに2つずつ、広告コードを貼り付けるわけです。
ちなみに、アドセンスは一つのページに3つまでしか広告を表示させることができません。
ただこの場合だと、PCページとampページは別物と認識されるみたいで、それぞれにちゃんと表示されます。

 

 

Quick Adsenseにamp化させたコードを貼り付ける

僕はQuick Adsenseにamp化させたコードを貼り付けていますが、別に逆でも構いません。
Wp-Insertにampコードを貼ったなら、Quick Adsenseに通常の広告コードを貼ればいいだけです。

広告の位置を決める

広告位置について、Googleは記事本文中に置くことを”低品質”のサイトだとしています。
Googleさんに従って、僕の場合は記事上と記事下に置くようにしています。

 

Quick Adsenseで広告の位置を決める

 

広告コードを貼り付ける

使っている方ならお分かりだと思いますが、シンプルに貼るだけですね。
広告の位置を決める項目で使用するコードを指定したり、ランダムにしたりすることができます。

 

広告コードを貼り付ける

 

 

Wp-Insertに通常の広告コードを貼り付ける

 

Quick Adsenseにamp化させたコードを張ったなら、Wp-Insertには通常の広告コードを貼り付けます。
つまりPCページで表示させるための広告です。
Quick Adsenseに貼り付けたampコードはPCページでは表示されないからですね。

 

Quick Adsenseと同じように、記事上と記事下に貼り付けます。

Wp-Insertでコードを貼り付ける

①貼り付けたら、②赤色を緑色にして、③updateします。

Wp-Insertにコード貼り付ける

 

 

 

広告表示を確認してみる

 

広告の設置が完了したら、PCでの表示、モバイルでのamp非対応の表示、amp対応表示を、それぞれ確認して見ます。

 

PCでの表示

PCでの広告表示

 

 

モバイルAMP非対応の表示

 

モバイルamp非対応

 

 

モバイルamp対応の表示

amp対応の広告

 

基本的に、広告のタイプはレスポンシブにしています。
ampでは記事上の広告は、長方形になるみたいですね。
*確認したら、記事上はレスポンシブになっていませんでした ;^^ 今は変更済みです…

まとめ

アドセンス広告をPCページとampページの両方に表示させる方法をまとめる以下の通りです。

 

・プラグイン、”AMP”をインストールして有効化する

・パーマリンク設定で変更を保存する

・Quick Adsenseにamp化させたコードを貼り付ける

・Wp-Insertには通常の広告コードを貼り付ける

 

やってみれば以外と簡単にできると思います。
ampはGoogleも推奨していますので、まだの方は是非お試しください。

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

管理人Nabeoさん

熊本出身の東京在住。

住む場所を選ばないキャッシュフロー構築のために奮闘中!

最近、仮想通貨の研究を始めました。
随時、更新していきますので、参考にしていただければ幸いです。

日本で一番簡単にビットコインが買える取引所 coincheck bitcoin

bitFlyer ビットコインを始めるなら安心・安全な取引所で

follow us in feedly

ページ上部へ戻る