![[アクセスアップ対策]WordpressをAMP化しAdSenseも連携する。](https://quadkinghd.com/wp-content/uploads/2021/08/eye-catching-アクセスアップ対策WordpressをAMP化しAdSenseも連携する。.png)
WordPressをAMP化し、AdSenseと連携する。
このブログはWordpressで作っており、AMP対応とAdSense対応しています。
AMPとは、「Accelerated Mobile Pages」のことで、Googleが進めてきたモバイルページを高速化しようというプロジェクトのことです。
WordPressのAMP対応の有無は検索順位に影響ないと言われていますが、モバイル対応の有無は検索順位に影響すると言われています。
AMPは、モバイルフレンドリーアップデートにより、モバイルに最適化されているサイトが検索結果において優位に評価されるようになりました。
AMP対応していなくても順位は落ちないが、モバイル化は必須であり、モバイル最適化がされていないと順位が落ちてしまう危険性があります。
モバイル検索のアクセス、コンバージョン、検索順位を向上させたいのならば、ページの読み込み速度はとても大きな要因です。
なぜなら、表示速度が遅いことは致命的だからです。もしあなたのページが表示に3秒以上かかるならば、40％の人がサイトから去ってしまいます。
そこで今回は、モバイルページを高速表示させるAMPをWordPressで実装する方法を解説する。プラグインを使用して、簡単、スピーディーに導入しましょう。
WordPressをAMP化するとどうなるの？
WordPressをAMP化すると、一体どのような変化があるのでしょうか？
なぜWordpressをAMP化しなければならないのでしょうか？
当方が、色々と調べた結果、１番のメリットは、スマホユーザに対して、
アクセスが速くなり表示されないイライラがなくなることで、
ユーザの満足度が上がると言うことだと思います。
では、なぜ速くなるのか？ここが重要です。
通常のWordpressは、皆さんもやったことがあれば理解してもらえると思うのですが、
テンプレートで用意されていた外観の中から好きなデザインを選び、
色々な便利な機能をプラグインとして追加することができる様になっています。
便利である分、色々な機能が実装されています。
その中で一番速度を落としているのが、javascriptと呼ばれるプログラムです。
AMPは基本的に、表示速度を上げるために、無駄な処理や時間がかかる処理を
極力無くす事により、表示速度を上げられると言う事になります。
そのため、カッコいいWordpressのホームページやブログを作るために、
javascriptを多用している場合、AMP化すると基本的にそれらが動かず、
シンプルな画面が表示される事になります。
この点が、AMP化をするかどうかを判断する一つのポイントではないかと思います。
AMPを採用する時にはまる２つのポイント
AMPを採用した時にハマるポイントは大きく２つあると考えています。
WordPressを成長させようと考えた時、SEO対策の中でAMP化は必須と謳われています。
しかしながら、AMP化するときに思うようにならならず諦めている（元に戻す）という
状態のブログを沢山見かけました。
皆さんもAMP化をするとハマるポイントだと思いますので、ぜひこのサイトを見てあらかじめはまらないようにしていただければと思います。
ハマるポイント１：AMPのページにGoogle Adsenseが表示されなくなる。
WordPressの対応について、プラグインでAMP化する事になります。
何も知らず、簡単だからといって適用してみると、Google Adsenseが動かない状況になります。
ブログで、収入源となっているAdsenseが動かないとなると、基本的にブロガーとすると致命傷です。
表示されないのでやめた！となります。
ハマるポイント２：AMPのURLと通常のURLの関係がわからなくなり手が負えなくなる。
AMPのプラグインを導入する際、AMP化の方法が大きく３つあります。
１：標準
２：トランジショナル
３：リーダー
URLについて混乱する原因は、AMP用のURLと、通常のURLが２つできることです。
標準を選ぶと、AMP用のURLは元のURLと同じになり、全てのページがAMP対応になります。
基本的にスマホ用のページを作っている場合は、標準を選ぶと良いでしょう。
ややこしくなるのが、トランジショナルを選んだときになります。
トランジショナルを選んだ時、同じページでも2つのURLで片方はうまく表示されるが、もう一つのURLの方がうまく表示されない。
直し方がかわからず、元に戻すと言う事になります。
なお、AMP用のURLについては、色々な種類の形になります。
この以下３つのURLができるということは理解できるのですが、
SEOとして、なるべく元のURLとAMPを同じ作りにしたいと言うときに、修正方法がわからず、
お手上げ状態として元に戻す事になります。
なお、この設定をミスる(基本的にミスっているともった方が良いです。)と、
検索やGoogle サーチコンソール、アナリティクス、アドセンスなどで期待値とは違う結果になり、
最終的に元の方が良い結果になると言うことで諦めてしまうと言う事になります。
1: https://URL/?AMP=1/
2: https://URL/AMP/
3: https://URL/?AMP/
WordPressサイトにプラグインでAMPを実装する方法
さて、ここまで見ていただいたと言うことは、AMPのメリットを得たい。
でも、ハマるポイントもなんとか解決したいという方であると思います。
得られる効果は大きいはずですので、ここに載せている方法を見てもらい、
参考にしていただければと思います。
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 バージョンの２つの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 プラグインで選択したテンプレート モードに応じて、広告コードを挿入する方法が変わります。
コーディングに慣れていない場合は、広告プラグインまたはテーマを使用して広告コードを挿入することをおすすめします。
ここを何度も読んでください。
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を選ぶと２つのURLについて、Linkを貼らないといけません。
ここをクリアして、是非とも、AMPの効果を得てください。
ちなみに、上記のように、１つのURLだけではダメですよ。
全部のURLに対して、Linkを入れないといけないです！！
さあ、これができるか最後の方法はシークレットにしておこうと思います。
