【WordPress】AMPページを作成する方法（【Plug-in】『AMP for WP– Accelerated Mobile Pages』の使い方ー初級編）

2017/08/28 2021/12/18

　「Google AdSene」から最適化の提案として、『Accelerated Mobile Pages（AMP）を取得しましょう』というものがやってきました。

メリットとしては
・モバイルトラフィックの増加
・ユーザーエンゲージメントの強化
・どの端末やプラットフォームでも安定的に処理が高速化
と記載されています。

※メールにも「増収につながる最適化案」とありました。（あくまでも【案】です。）

　そもそも、「Accelerated Mobile Pages（AMP）」とは、何もの？
　それを取得することで、なぜ増収に繋がるの？
ということは詳しく記載されていません。（AMPのリンクはありましたが、英語なのでにわかに理解不能）

　そこで、ネットを屈指して、「AMP」について、納得するまで調べることにしました。

Ⅰ．知識習得編

１．「Accelerated Mobile Pages（AMP）」とは

　１）ウィキペディアより要約

　・AMPとは、モバイルでのウェブサイト閲覧を高速化することを目的とするオープンソースプロジェクト。
　・AMPを使用したウェブページ（HTMLではなく「AMP HTML」で記述）を、高速で読み込み（「AMP JS」を利用）表示。

　２）AMPの構成要素

　・「AMP HTML」：高速表示のために、簡略化されたモバイル向けHTML
　・「AMP JS」：高速なレンダリングを行うためのAMP用のJSライブラリ（JavaScriptコード）
　・「Google AMP Cache」：AMP Projectが提供しているAMP HTML用のCDN（コンテンツデリバリーネットワーク）機能

　３）理解できたこと

　・ウェブサイトを「AMP HTML」に準拠したWebページ（「AMPページ」）にします。⇒GoogleがWebページをクロールしたときに「AMPページ」の有無を確認して、「AMPページ」であれば「Google AMP Cache」に登録（インデックス）します。（タイムラグあり）
⇒モバイルでの検索結果に、「AMP」とのいうラベルが付き、そのウェブサイトをモバイルで閲覧すると、高速に表示されます。
⇒よって、閲覧者はストレスや不快な思いをしなくて済むということのようです。
　・それによって、閲覧者も増え、それに伴いAdSenseの収入も増えるということらしいです。
　※AMPページがGoogle検索で優遇されるということは、いまのところないらしいです。

２．「WordPress」で、AMP対応のウェブサイトを作成する方法

　プラグインを利用することで、「AMP HTML」の知識がなくても、簡単にAMPページを作成することができます。
　必須のプラグインは、「AMP」で、あとは「AMP」を補完するプラグインとして「AMP for WP – Accelerated Mobile Pages」「Facebook Instant Articles & Google AMP Pages」「Glue for Yoast SEO & AMP」等があります。

　・「AMP」は、すべての投稿ページを一括して「AMP HTML」に変換します。ただし、「AdSense」や「Googleアナリスティック」等には対応していません。
　
　そこで、「AMP HTML」に変換したあとに、上記で紹介したプラグインを利用して、「AMP HTML」をカスタマイズします。
　

３．結論として

　・AMPに関する知識とWordPressでAMPページを作成する方法については、なんとなく理解できました。
　・現在のところAMPに対応するメリットはそれほど感じませんが、疑問点がいくつかあるので、当ブログで簡単にAMPぺージができてしまうのかも含めて確認したいと思います。
　・また、将来モバイルでの閲覧の主流がAMPページになりそうなときに備え準備しておくのもいいでしょう。
　
（疑問点）
・PCページとmobileページを兼用（レスポンシブ）しているので、AMPページを作成しても、それぞれうまく表示できるのか。
・AdSenseは、どうなるのか。（AMPページでは自在に配置できるのか？）　
・Amazonアソシエイトに対応しているか。
等

Ⅱ．AMPページ作成編（「AMP」＋「AMP for WP – Accelerated Mobile Pages」の場合）

　「AMP」を補完するプラグインとして、カスタマイズが豊富でサポートが行き届いている「AMP for WP – Accelerated Mobile Pages」（Ver.0.9.59)を選択しました。

１．ウェブサイトを「AMP HTML」に準拠したWebページに変換

　１）プラグイン「AMP」（Ver 0.5.1）のインストール＆有効化します。
　２）「パーマリンク設定」で、何もしないでただ「変更の保存」をクリックします。
　３）「AMP HTML」に準拠しているかWebページにアクセスして確認します。
　　・ブラウザで、『「URL」＋「/amp#development=1」』と入力。⇒AMPページが表示されます。※非公開でもチェック可能
　　
　　・キーボードから『Ctrl + Shift + I』と入力します。
　　・「Console」をクリック⇒『AMP validation successful.』と表示されればOKです。
　　

　※AMPページのバリデーションチェックはこちらからでもできます。
　『https://validator.ampproject.org』
①チェックするAMPページのURLを入力します。
②「VALIDATE」をクリックします。
③問題ないときは「PASS」と表示されます。
④エラーがあるときは「FAIL」と表示されて、エラー箇所を表示してくれます。

２．ロゴの設定

１）「AMP for WP – Accelerated Mobile Pages」をインストール＆有効化します。
２）ロゴの設定
　サイドバーメニューの「AMP」にフォーカスして、「Getting Started」をクリックします。
　　①「General」をクリックします。
　　②「Upload」をクリックして「メディアライブラリー」からロゴとなるイメージを選択します。（ない場合は適当に作ります。）
　　③に表示されます。
　
　　
　　最後に「Save Changes」をクリックして保存します。

※ロゴを設定しないで、３．１）を実行するとエラーになるので必須です。

３．「Google AMP Cache」に登録

１）AMPページとして有効かどうかの確認

　・①「https://search.google.com/test/amp」で、②『https://xxxxx/?amp=1』と入力して、③「テストを実行」をクリックします。※「公開」してからです。

　・「有効なAMPページです」と表示されればOKです。

　~~・④「GOOGLEに送信」をクリックして、「Google AMP Cache」に登録します。~~

　・AMPページが「Google AMP Cache」に登録されると、モバイルでのGoogle検索結果にAMPマークが付きます。

　※「Google AMP Cache」への登録（インデックス）は、Googleクローラーが自動で行ってくれますが、この場合、タイムラグが生じます。
※お急ぎの場合は、「Search Console」から「Fetch as Google」を使ってインデックス登録のリクエストを送信してください。（URLの末尾に「/amp」を追加）
　
【TIPS】投稿ページ（AMPページ）を更新した場合、「Google AMP Cache」に直ぐに認識させる方法
　「Google AMP Cache」のURLにアクセスします。
ブラウザで、「https://cdn.ampproject.org/c/s/」＋「（https://を除いた）URL」+「/amp」を入力します。
　（AMPページが表示されますが、これは更新前の内容になります。更新内容を確認したい場合は、少し間をおいてもう一度URLにアクセスします。）

　※「Google AMP Cache」の更新のプロセスについては、こちらに詳しく紹介されています。
　『https://www.suzukikenichi.com/blog/anatomy-of-amp-cache/』

４．「AMP」でのカスタマイズ

　サイドバーメニューの①「外観」にフォーカスして、②「AMP」をクリックするとAMPページのプレビューを見ることができます。

　ここで、③「AMP」をクリックするとAMPページのカスタマイズできます。
　現在は、デザインのみカスタマイズ可能で、④「デザイン」をクリックすると、各要素の表示有無と順番の設定と背景色等の設定ができます。
　設定が終了したら⑤「保存して公開」をクリックします。
　

※各要素の表示有無と順番の設定は、プレビューに即反映されますが、背景色等の変更は、一旦保存しないとプレビューで確認できません。

５．「AMP for WP – Accelerated Mobile Pages」でのカスタマイズ

　初級編として、最低限のカスタマイズに絞りました。「AMP for WP – Accelerated Mobile Pages」では、様々なカスタマイズが可能ですが、それらについては、次回紹介したいと思います。

１）「AdSense」の設定

　AMPページ用の「広告ユニット」を予め作成しておきます。

　気になる「AdSense」ですが、6か所の決まった場所に配置することができます。
　　・AD#1：Below the Header（ヘッダーの下）
　　・AD#2：Below the Footer（フッターの下）
　　・AD#3：Above the Post Content（本文の上）
　　・AD#4：Below the Post Content（本文の下）
　　・AD#5：Below The Title（タイトルの下）
　　・AD#6：Above the Related Posts (関連記事の上）
　
　実際の設定の仕方は
　　①サイドバーメニューの「AMP」にフォーカスして、②「Getting Started」をクリックします。
　　
　　③「Advertisement」をクリックします。
　　④「AdSense」を配置したい場所の「AD#n」を「ON」にします。
　　⑤「AD Size」を選択します。
　　⑥「Data AD Client」を入力します。※「コードを取得」するとわかります。
　　⑦「Data AD Slot」を入力します。※「コードを取得」するとわかります。
　　
　最後に「Save Changes」をクリックして保存します。

２）「Google Analytics ID」の設定
　
　AMPページ用に「トラッキング ID」を予め取得しておきます。
　①「Getting Started」で「Analytics」をクリックします。
　②「Analytics Type」で「Goole Analytics」を選択します。
　③「Goole Analytics」に、AMPページ用の「トラッキング ID」を入力します。
　
　最後に「Save Changes」をクリックして保存します。

Ⅲ．疑問点に対する自答

１．PCページとmobileページを兼用（レスポンシブ）しているので、AMPページを作成しても、それぞれうまく表示できるのか。

・PCページとmobileページおよびAMPページは、それぞれ別々にあるので、AMPページを止めてもmobileページに戻れます。（AMPページを作成してもmobileページが消えることはありません。）　

※「AMP for WP – Accelerated Mobile Pages」を使えば、記事ごとにAMPページで表示するかの選択ができるようです。（こちらを参照してください。

２．AdSenseは、どうなるのか。（AMPページでは自在に配置できるのか？）　

・AdSense広告は、配置可能です。
・「ページ単位の広告」は、対象外です。※AMPページ用にベータ版の機能があるようです。

※「AMP for WP – Accelerated Mobile Pages」を使えば、AdSenseをどこにでも配置可能のようです。（こちらを参照してください。）

【自動広告】（2018/8/18追記）
2018/2月より、AMPページに自動的にテキスト広告とディスプレイ広告が表示できるようになりました。
①スクリプトを「Settings」⇒「Advance Settings」の『Enter HTML in Head』に貼り付けます。
②広告コードを「Settings」⇒「Advance Settings」の『Enter HTML in Footer』に貼り付けます。

３．Amazonアソシエイトに対応しているか。

　~~「Amazonアソシエイト」は公式には対応していないようです。~~
※試してはいませんが、できないこともないようです。『https://nelog.jp/amazon-associate-link-to-amp』

　※追記（2018/8/19）
公式プラグイン「Amazon Associates Link Builder」を活用することでも可能です。

※他のアフィリエイトについては、個別に検索してみてください。
　こちらが参考になります。『https://syncer.jp/Web/AMP/Component/amp-ad/』

-wordpress
-Adsense, Amazonアソシエイト, AMP, AMP for WP, Google AMP Cache, Google Analytics, wordpress, プラグイン