ワードプレスのAMP化プラグイン｜AMP for WPの設定を解説

AMPとは？

まずAMPって何？

AMP(Accelerated Mobile Pages)

GoogleとTwitterで共同開発されている、モバイル端末でウェブページを高速表示するためのプロジェクト、またはそのためのフレームワーク(AMP HTML)のことです。

AMPってどんな技術？

AMPの仕組みを簡単に説明すると、AMPページがGoogleのクローラーに発見されれば、一旦そのデータを専用のサーバーに保存します。

関連性の高いキーワードで誰かが検索した時、そのAMPページはGoogleによって保存されたサーバーから配信され、検索結果に採用される仕組みです。

余分な通信や、PHPやJavaScriptなどのプログラムによる計算処理が一様にカット(または遅延読み込み)されているため、このサーバーはモバイル向けに非常に高速に表示することが可能になっています。

AMP導入のメリット・デメリット

AMPはモバイル向けに最適化されたWebページを配信する技術ですが、いくつかのメリットかある一方で、もちろん明確なデメリットも存在ます。

AMP導入のメリット

その①：何といっても高速化

Webページの読み込みが早いこと自体には、メリットはあってもデメリットは存在しません。

こちらの記事でも高速化によるメリットと表示速度による、ユーザー体験の変化をデータに基づいてを紹介していますので、是非目を通してみてください。

その②：検索順位が上昇するかも？

GoogleはAMP化すること自体を検索順位の決定には採用していない(現状)と明言しています。

「じゃ関係ないんじゃん？」と思われるかもしれませんが、同時にGoogleは「サイトの表示速度は検索結果に影響を及ぼす」ことを明言しています。

つまり「SEO上プラスはあっても、マイナスはない」と思ってください。

その③：運が良ければいきなりトップ表示？Google砲！

巷で「Google砲」と騒がれている現象があります。

検索トップ表示の事ではないのですが、Googleアプリのオススメ記事[アプリのトップ]に上がることで、爆発的な流入が起きることを指しています。

また、特定のキーワード検索時に一ページ目に表示されるトップニュースという枠があります。

あくまでウワサ程度ですが、AMPを優先しやすい仕様になっているとかいないとか。

その④：コンバージョン率のアップ

その①で紹介した部分の高速化によるユーザー体験の向上の延長線上にはコンバージョン率のアップがあります。

上の図はモバイルのページの読み込みが一秒遅くなるごとのユーザーの行動の変化率を表します。

「一番左めっちゃ上がってんじゃん」と思うかもしれませんが、これは直帰率です。つまり踏んだり蹴ったりです。

逆接的に言えば、1秒早くするだけで、これらの上昇が見込めるワケですから、AMP導入には十二分にコンバージョンへの影響が考えられますね。

AMP導入のデメリット

その①：そもそもAMP化しなくてはいけない

AMP化はHTML5によるマークアップ、CSSによる装飾、JavaScpritによる動的なWebページの変化を大きく制限することにより実現されます。

つまり、特定の形式に則った記述が必須であり、AMP専用のページを用意する必要があります。

いわゆるレスポンシブデザインとはまた別次元の話ですね。

個別対応の必要がある以上、明らかに運用の手間が増えますので、このことは最大のデメリットと言えると思います。

その②：対応していない広告がある

サイトを運営していて、広告でのマネタイズを図っている方も多くいらしゃると思いますが、広告がAMP対応していないというパターンがあります。

AMP完全対応しているASPの方が少ないかもしれませんが、このことは大きなデメリットと言えます。

ちなみにアドセンスはバッチリ対応しています。AMP自体がGoogleのプロジェクトなので当たり前ですね。

その③：Webアプリケーション系のサイトには向かない

例えば、●●メーカー、とか、△△ツール、みたいなWeb上で動くアプリケーションがサイト自体のメインコンテンツの場合、そもそもプログラム自体が制限されますので、全くAMPに向きません。

加えて言うと、CSSによる複雑な動きや美しいデザインがウリのサイトも同様に、CSS自体が大きく制限されますので、完全にサイトのアイデンティティを失い、AMPには向きません。

AMP導入に向いてるサイト、向いていないサイト

メリットとデメリットの項で説明しましたが、「Webアプリ」や「デザイン命」みたいなサイトはそもそもAMPを導入できません。

同様に、何かしら間違いが起きた時に大きくユーザー体験をそこなう「ショッピングサイト」なんかも現状では、AMPに踏み切れていないと言えます。

最もAMPに向いているタイプのサイトはズバリ、

「ブログ」です。

ワードプレスのブログこそAMPを導入すべき！

ブログはWebサイトの中でもAMPに最適なコンテンツの一つです。

ブログの多くの部分はテキストコンテンツで、文字としての情報を求めて訪れるユーザーが大半だからです。

しかもワードプレスであれば、専用のプラグインを使うことで簡単にAMP化を図ることができます。

ワードプレスのAMP化プラグイン[AMP for WP]

ソースコードを大きく改変する必要があるAMP化プラグインはバグも多く上手くAMP化できないなんてことも日常茶飯事です。

当サイトでもいくつかAMP化プラグインを試してみましたが、試した中でも[AMP for WP]が良かったので紹介させていただきます。

[AMP for WP]インストール

プラグインの検索から[AMP for WP]と入力すれば出てきます。

似たような名前のプラグインだらけなので、以下の画像で判断していただければと思います。赤いカミナリマークが特徴なので割と目立ちます。

今すぐインストール→有効化でOK

[AMP for WP]の設定

[AMP for WP]をインストールしたら必ず行うべき設定を紹介します。

※環境はWordPress:5.1.1/AMP for WP:0.9.97.49

無事にインストール出来ていれば左側のメニューに「AMP」の表示が出現すると思います。

[AMP for WP] 必須設定 – Settings –

[AMP for WP] – General –

[General]タブから「AMP化したいページ」を選択します

• Post
• HomePage

を選んでおけばホームと投稿がAMP化されます。この二つはチェック必須だと思いますが、他のページもAPM化したいのであれば適宜選択します。

[AMP for WP] – アナリティクス –

なんでここだけ「カタカナ」なんでしょうね(笑)気になって仕方ないです。

Googleアナリティクスを使っている方であれば、上記のように、トラッキングIDを入力すればOK。

トラッキングIDはアナリティクス→プロパティ→トラッキング情報→トラッキングIDから確認できます。

UA-xxxxxxxxx-x

こんな感じのコードです。

[AMP for WP] – SEO –

SEO設定関連のプラグインを使っている方は[SEO]タブより互換の設定ができますので、”All in One SEO Pack”なんか入れている人も多いと思いますので、忘れずに。

[AMP for WP] 必須設定 – Design –

デザインタブでは、AMPページの見た目を詳細に設定できます。

大体はそのままの設定でも問題ないのですが、一か所僕が使っているテーマではデザインが崩れている箇所があったので、対応しておいた方がいいと思い設定を紹介します。(もしかしたら元のテーマによるのかもしれません)

[AMP for WP] – Header –

デザインが崩れていたのはメニューの中に置ける検索窓です。

そもそもメニューに置かなくても、ヘッダー内に検索窓ありますので、デザイン崩れてるし不要と判断して、OFFにしています。

これで必須と思われる[AMP for WP]側の設定はこれにて完了です。

[AMP for WP]のメニューが表示されない問題

AMP導入しようとしてるけど、テーマとの相性もあるのかメニューが上手く表示されずにドツボなう

— かつを (@katsuwo315) April 25, 2019

どう見てもメニューの設定はこれ以上いじるところがなかったので中々ハマりました。

メニューをセットするには、どうやらワードプレス側の設定でいじらなければいけなかったようです。デザインのヘッダー設定のところに書いておいてほしいですね（怒）

たまたま気づいてなかったら一生そのままでした。

きちんとAMP化出来ているか確認する

以上で、全ての必須設定は完了していますので、きっちりAMP化出来たかの確認をしていきます。

[AMP for WP]で作成されたAMPページのURLは

[元のページURL + /amp/]

となります。例えばこのサイトのトップページのAMPページは、

https://lets-hack.tech/amp/

となります。

AMPテストツール

GoogleのAMPテストページに移動。

検査したいURLを入力します。

ちなみに通常のURLを入力してもAMPページが存在していれば自動検出して、そのままテストすることができます。

この表示が出れば成功です！一旦、作業お疲れ様でした！

AMPページでアドセンスを表示する

ここからは必要に応じてやっておきたい設定を解説します。

ブロガーがアドセンスをやっていないということも中々考えにくいので、ある意味必須設定かもしれませんが・・・。

アドセンスのAMP自動広告を使う

この方法が一番楽で、確実。挿入し忘れもありません。

アドセンスの管理画面より、自動広告→URLグループの編集or新しいURLグループ→AMP自動広告タブ

上記のような画面になりますので、トグルをONにして、手順②・手順③の項目より取得できる二つのコードを以下にそれぞれ貼り付け。

貼り付け箇所は”Advanced Setting”の中にあるEnter HTML in Head とBody それぞれに貼り付けるだけ。

後は設定を保存するとAMP専用の自動広告が配信されます。

場所を指定してアドセンスを挿入する

定型のポジションが6つ用意されていて、その中から任意の位置にアドセンスを挿入することもできます。

各項目入力してください。”Data AD Slot”は広告ユニットの欄に表示されるID列の数字です。

広告ユニットがレスポンシブサイズの場合は一番下にあるトグルをオンにします。

挿入位置は以下の通り。

• AD#1・・・ヘッダーの下
• AD#2・・・フッターの下
• AD#3・・・投稿の本文の上
• AD#4・・・投稿の本文の下
• AD#5・・・タイトルの下
• AD#6・・・関連記事の上

まとめ

以上でAMP for WPの導入は完了です。

メリットデメリット併せ持ったAMPですが、状況を確認しながら適宜運用していきたいですね。

今、気になっていることとしては、AMPページのトップに通常ページへのリンクを作れないかなと考えています。

はやり通常ページの方がCSSでしっかり調整されている分、デザインは綺麗ですからね。

また追加の修正などあれば、随時更新していきます。