フリーランスWEB屋の備忘録

【WordPressでAMP対応】モバイルページを高速化するAMPの設定方法

モバイル端末でのページ表示を高速化するための「Accelerated Mobile Pages」(AMP)というGoogleが推奨しているプロジェクトですが、みなさんご存知でしょうか?すでに対応しているよという方もいる方思いますが、今回、私自身が初めてWordPressのプラグインでAMP対応をしてみたので、まだAMP対応していない方の参考までにまとめさせていただきます。

Accelerated Mobile Pages(AMP)とは?

AMPはアンプと呼ぶみたいです。

英語が苦手な私には「Accelerated Mobile Pages」と言われても、頭の中に「?」がたくさん浮かんでしまいましたが、「Accelerated」とは「加速される」という意味らしく、AMPとは、モバイルページを高速化する目的で開発されたプロジェクトです。

Googleはもちろん、Twitter、WordPress、メディアサイトなどが参加しているようです。

AMPではAMP HTMLというフレームワークが公開されており、このAMP HTMLの仕様にそってページを作ればモバイルページが高速化されるという仕組みです。

こちらからAMPのデモを確認できます。
実際にアクセスしてAMP対応サイトの早さを実感してみてください。

AMPが検索順位に影響する?!

AMPに対応したページは今後、検索順位が上昇する可能性があるそうです。
2015年12月9日に米サンフランシスコで開かれた記者会見でGoogleがこのようにコメントしたと、Search Engine Landが伝えています

AMPページが検索結果に表示される時には「Fast」のように、表示スピードが速いことを示すラベルが付きそうです。

AMPのデモを実感された方はもうお分かりと思いますが、実際、AMPはかなり速いです。
読み込み時間ゼロで瞬時にコンテンツが表示されます。

WordPressプラグインでAMP対応

WordPressもAMPプロジェクトに参加しているので、AMP対応のためのプラグインが公開されています。

プラグイン > 新規追加 > 「AMP」検索 > 今すぐインストール
でインストールをしたあとに、プラグインを有効化します。

有効化した後で「設定」 > 「パーマリンク設定」に移動し、「設定を変更」をクリックするだけで導入は終わりです。AMP対応したページは、URLの末尾に「/amp」と入れてあげれば確認できます。

ちなみに、このページをAMP対応したページはこんな感じになりました。

見た目は、無駄がなくとてもシンプルな感じでした。

表示もとても速くなっていますが、広告なども削除されているので、アフィリエイターさんや、ブロガーさんにとっては広告表示がなくなってしまうので、どちらをとるか検討する必要があるかと思います。

Googleの導入ガイド日本語版(PDF)

Accelerated Mobile Pages プロジェクトについて — 導入ガイド日本語版を本日公開しました

Googleが導入ガイドを日本語で公開しています。PDF形式にまとめられていて、AMPがどのようなものか、実際に導入しているサイト例や、どのような対応をする必要があるのか、などが記載されています。

AMPページのGoogle検索ガイドライン

AMP ページの Google 検索ガイドライン(SearchConsoleヘルプ)

SearchConsoleヘルプに公開されている、最適化ガイドです。こちらもざっくり説明されている感じです。詳細な説明については記事からのリンク先が英語になっていることが多いので、英語が苦手な方はGoogle翻訳などを使いながら頑張ってください・・・。