Googleの推奨方法でwordpressをAMP化をしてみましょう
Googleを調べた結果、2種類のプラグインを使って、AMP化したブログにAdsenseが導入できる方法を推奨していることがわかりました。
AMPのサイトで、Google Adsenseの自動広告が表示させられるようにしましょう。
AMP 自動広告のパフォーマンスのトラッキング
AMP 自動広告のパフォーマンスを計測するには、[レポート] ページのコンテンツ プラットフォーム レポートを確認します。
ここまでが、Google AdSenseのホームページに書いてある情報です。
おすすめのプラグインは以下になっているので、どちらかお好みを使ってください。
広告コードの挿入方法 | Standard | Transitional | Reader |
---|---|---|---|
Advanced Ads プラグイン
(自動広告と広告ユニットの両方に対応) |
|||
Ad Inserter プラグイン
(自動広告と広告ユニットの両方に対応) |
※当方はこのプラグインを使いませんでした。
後述の方法で対応しました
最後の砦、AMPのペアモードURL構造を制覇する
以下の設定をしたら、あと少しです。AdSenseの広告が表示されたのではないでしょうか?
https://support.google.com/adsense/answer/9011462?hl=ja
当方もここまで進みました。
でもまだ足りないんです。このリンクに書いている、以下の情報を見てください。
このLinkタグを使って、全ページをリンクさせられたら、AMPのメリットを全て享受できるようになります。
ご利用の前に
ペアとなるページが検出されるように、Link タグを使って非 AMP コンテンツと AMP コンテンツをリンクします。
たとえば、example.com というサイトを運営しており、各ページの AMP バージョンを example.com/amp/ でホストしている場合、AMP と非 AMP の各ページのセクションに タグを追加して、ペアとなるコンテンツを示すようにします。
非 AMP ページ example.com/news の場合:
<link rel=”amphtml” href=”http://example.com/amp/news”>
AMP ページ example.com/amp/news の場合:
<link rel=”canonical” href=”http://example.com/news”>
上記のように、Transitionalを選ぶと2つのURLについて、Linkを貼らないといけません。
ここをクリアして、是非とも、AMPの効果を得てください。
ちなみに、上記のように、1つのURLだけではダメですよ。
全部のURLに対して、Linkを入れないといけないです!!
さあ、これができるか最後の方法はシークレットにしておこうと思います。
https://support.google.com/adsense/answer/9579782?hl=ja&ref_topic=28893
AMPのプラグインをインストールし有効化する。
さて、WordpressをAMP化していきましょう。
ここからが実践編です。5分でWordPressサイトをAMP化することができます。の
ステップは、次のようになっています。
1.AMPプラグインをインストール・有効化する。
2.AMP化したページの表示を確認する。
「AMP」のプラグインを使用します。
3.ナビゲータを使った設定をして完了です。
【AMP設定の方法】
AMP バージョンのサイトを作成するには、AMP for WordPress プラグインをご使用になることをおすすめします。AMP for WordPress は、Google が携わったオープンソースのプラグインです。
この様に、複数ある中で、Googleが関わったものをなるべく利用しましょう。
プラグインをインストールして有効にしたら、テンプレート モードを選択します。
プラグイン名
https://ja.wordpress.org/plugins/amp/
たったこれだけです。
AMPについて詳しく知りたい方は、以下の動画を見てください。
詳しく教えてくれます。でも英語です。
WordPress サイトの AMP の専用ページを作成する
さて、ここまで進んできたと言うことは、無事にWordpressにAMPを入れられて、
案外簡単じゃんと思ったのではないでしょうか?そうです。WordpressをAMP化するなんて、
超簡単です。
でも、前述した通り、ここからがハマるポイントになります。
詳しく記載しますので、ついてきてください。
まず、AMPサイトにするときに何を選びましたか?
ここが、AMP化の分かれ道です。
正解はありませんので、あなたのWordpressの特徴を見て判断してください。
参考ですが、このページは、Transitionalを選んでいます。
理由は、スマホはAMPで見せてアクセスを稼ぎたいけど、
PC版は普通のプラグインをいっぱい使いたい。
両方AdSenseが表示できるので、いいとこ取りしたいという思惑です。
さて、皆さんはどれを選びましたか?
Standard: サイトの AMP バージョンを 1 つ使用する場合に選択します。スマホ専用のWordpressの場合おすすめ。
Transitional: サイトの AMP バージョンと非 AMP バージョンの両方を使用する場合に選択します。
Reader: WordPress のテーマが AMP と互換性がない場合に選択します。
WordPress のテーマが AMP と互換性がある場合は、どのモードでも選択できます。
おすすめとして推奨されているのは、最初に AMP をテストする場合は、Transitional を選択してください。
テスト後に AMP for WordPress プラグインの設定に移動して、Transitional から Standard にいつでも切り替えられます。
と言うことで、まずは、Transitionalを選んでいくのが正解です!
WordPressのページのAMP化が思った通りになっているか確認する。
さて、ここまできたら、すでにWordpressのAMP化は成功している状況です。
見栄えは思ったものになっていますか?
Transitionalを選んだ方は、AMP バージョンと非 AMP バージョンの2つのURLで同じページができているはずです。
通常、これで対応できたと思って、グーグルアナリティクスを見て、
サイト訪問者が爆増することを期待します。でもダメなんです。まだ設定が足りていないんです。
非 AMP バージョン(今までのサイト)はうまく表示されるが、
AMP バージョンの方でGoogle AdSenseが表示されていないのではないでしょうか?
そう!非AMPバージョンで、広告が表示されていても、AMPバージョンでは表示されないんです。
なぜなら、AdSenseの広告については、AMP専用のコードを書かないといけないからなんです。
じゃあ、どうやってAMP バージョンと非 AMP バージョンのURLが分かれているのに、
ソースコードを切り分けるんだとなるんです。
当方も以前この対応が分からず、結局AMP化を一度諦めました。
では、どのようにAdSenseを入れれば良いのでしょうか?
答えは次の章に記載してあります。
AMP ページに広告コードを挿入する
ここに書く内容はとても重要!!です。
まずはこのお話を聞いてください。
この設定をしていないと、まずAMPのサイトに広告が表示されません。
いかがでしたでしょうか?この方法をしていると、AMPのサイトにもGoogle AdSenseの設定が反映されます。
AMP 自動広告を設定する
AdSense アカウントにログインします。
[広告] 次に [サマリー] をクリックします。
[AMP サイトをお持ちですか?] をクリックします。
[AMP サイト用 AdSense コードを取得する] ページで、[AMP サイトにディスプレイ広告を自動的に表示] をオンにします。
amp-auto-ads スクリプトをコピーして、ページのタグの間に貼り付けます。
このスクリプトによって、必要な amp-auto-ads ライブラリが読み込まれます。詳しくは、amp-auto-ads コンポーネントについての記事をご覧ください。
AMP 自動広告コードをコピーして、広告を表示するページの開始タグの直後に貼り付けます。
[完了] をクリックします。ページに広告が表示されるまで 1 時間ほどかかる場合があります。
[広告] ページに「AMP はオンです」というメッセージが表示されます。
以下から設定を行う。
https://support.google.com/adsense/answer/9011462?hl=ja
AMPサイトに広告が出ない!!という人はここでハマっている可能性が高いです。
AMP サイトを作成すると、AMP ページに広告を表示できます。
AMP for WordPress プラグインで選択したテンプレート モードに応じて、広告コードを挿入する方法が変わります。
コーディングに慣れていない場合は、広告プラグインまたはテーマを使用して広告コードを挿入することをおすすめします。
ここを何度も読んでください。
コメント