WordPressをあっという間にAMP(Accelerated Mobile Pages)対応にするプラグイン【AMP】

去年の発表よりにわかに注目を集めているのが、「AMP」プロジェクトです。しばらく様子を見ていましたが、WordPressの場合プラグインで簡単に対応できるという事で、このサイトにも導入してみました。

AMP(Accelerated Mobile Pages)とは何か?

まずAMPは何かというと、アクセラレイティッド・モバイル・ページの略で、AMP独自の仕様に従って作られたページを用意すると、検索結果の上位に表示され、非常に高速に記事が表示されるという仕組みです。

実際に見てみるのが早いと思うので、スマホのブラウザか、PCの場合ユーザーエージェントをモバイルに変更したブラウザで下記URLを見ると感じが掴めると思います。
http://g.co/ampdemo

177_01

こちらは実際にAMPdemoサイトで『ニュース』というキーワードで検索した結果です。AMPと表示されているのが分かります。

AMPについてもっと詳しく知りたい方は下記ページなどを見るとより詳細に解説されています。

そのほか、Googleが公式で仕様書や導入ガイドを用意しているので、こちらにも目を通しておくとより理解が深まると思います。

面倒なAMP対応はプラグインで解決

AMP対応ページは確かに爆速と呼べるほどサクサク表示がされるので有益なのは理解できますが、実際にAMP対応のページを自分で用意するのは結構面倒です。

そこでAMP対応を簡略化するために、WordPressの場合はプラグインをインストールして対応するのがオススメです。

177_02

WordPress.comを運営するAutomattic社が提供しているので、まさに公式プラグインと言えます。リリース当初は構造化データにエラーがあるなど不具合も見られましたが、2016年3月9日時点では0.3.2までバージョンが進んでおり不具合は解消されています。

導入は簡単でWordPress管理画面から「プラグイン」>「新規追加」で「AMP」と検索すれば見つかりますので、そこからインストールし有効化するだけで完了します。

177_03

AMPプラグインをインストールして有効化しただけですが、Google Search Consoleでも正常にインデックスされ始めているのが確認できます。

Lazyloadした画像が表示されない事態に

導入自体は非常に簡単にできたAMP対応ですが、AMP対応ページで画像が表示されていないことに気づきました。

通常のスマートフォンページ

177_04

AMP対応のページ

177_05

なぜかと調べていたのですが、このサイトで画像を遅延表示させるLazy Load Plugin for jQueryを使っている事が原因だと分かりました。AMP対応ページではJavascriptが使えないため、遅延表示させるスクリプトが動作せず、置換前の透明ダミー画像が表示されるという事態に。

本文は読めるとはいえ、画像がないと意味が通じない部分もあるので、Lazyloadのやり方を考えなおさなければいけません。。
ページの表示速度を向上させる目的で入れたLazyloadが仇になるとは、なんとも言えない矛盾を感じますね。。

AMP対応する意味はあるのか?

Googleが猛プッシュするAMPですが、なんとなく対応はしてみたものの現状はまだそこまでメリットがあるとは感じられないのが正直な感想です。実際に自分でスマートフォンを使って検索してもまだAMP対応ページを見たことはありません。

とはいえ、今後はGoogle検索結果のランキング要因にもなる可能性があるとの事なので、引き続き注視していく必要はありそうです。

2016.07.06追記
プラグインでは無いAMPページ用HTMLの書き方を調べました。