WordPressサイトもプラグインで簡単AMP化！

今回はWordPressで構築されたサイトをプラグインを使ってAMP対応する方法についてご説明します。
WordPressはサイト制作にあまり詳しくないユーザーでも非常に使いやすい反面、深く仕組みをがわからないためどのように対策して良いのかわからない、という方もいらっしゃるかと思われます。

WordPressには以前よりいくつかのプラグインが公開されていますが、今回紹介するプラグインはそれほど難易度が高いものではありませんので導入可能な環境の方は一度試してみてはいかがでしょうか？

AMPとはAccelerated Mobile Pagesの略で、モバイル端末でのWebサイト表示の高速化を目指して主にニュース記事、ブログ記事を取り扱うページに対しGoogle、Twitterなどが推し進めているプロジェクトです。
通信速度が遅い環境でもWebコンテンツをストレスなく閲覧できるよう、ページの容量を大幅に軽減してモバイルへ配信するのがAMPの仕組みになります。

WordPressを制作しているAutomattic社が公開しているプラグインで、信頼性が高いのが
AMP — WordPress Plugins
です。
他にもプラグインは存在していますが、これは「公式版」とも言える存在で、面倒な設定は一切必要なくただ有効化するだけで完了するのでおすすめです。

まず、WordPressの管理画面でAMP — WordPress Pluginsをインストールします。
プラグインを有効化し、

「設定」→「パーマリンク設定」→「変更を保存」することでパーマリンク構造を更新しておきます。

設定は以上で完了です。

左側のタブから、「外観」を選択すると「AMP」というメニューが追加されています。

こちらを選択することで、AMP化されたページのプレビューを確認する事ができます。

また、左側にはDesign（ヘッダーの文字色、ヘッダーの背景色とリンク、色調）をカスタマイズできるツールがあるので、必要に応じて変更が可能です。

カスタムが終われば、実際にAMPページにアクセスしてみましょう。
今までのURLがそのままAMP化されるわけではなく、あらたに生成されたURLからアクセスできます。

・通常のURLの終わりに /amp/ を付ける
・通常のURLの終わりに ?amp=1 を付ける ※先に「?」パラメータが付いてるときは2回使えないので「&」amp=1 になります。
たとえば、https://www.example.com/blog/というURLのページを確認する場合には、

https://www.example.com/blog/amp/
https://www.example.com/blog/?amp=1

という風に追記してAMPバージョンのページへアクセスします。

プラグインを導入したページにアクセスし、末尾に「&amp=1」を追記します。

Google Chromeならデベロッパーツールを表示させます。（ページ上で右クリック→検証→Console）

通常のページで表示されている場合は、PC用ページが表示されていますが、

左から2番めのモバイル画面のエミュレターに切り替えるとWordPressの設定画面でのプレビューと同じページになっているはずです。

ここで赤字のエラーが表示される場合には、AMPページとしてGoogleに認識されません。
正しくAMP化している場合は、下の画像のような稲妻のアイコンが表示されます。

以上で完了です。
あっという間にAMP化が完了しました。
Google検索結果でブログの各ページがカルーセル化しているかどうか、（上位表示されるサイトであれば）確認できるはずです。

注意点としては、このままだとAMPページのGoogle Analyticsでの計測ができない状態になっています。
この問題はFacebook Instant Articles & Google AMP Pages by PageFrogというプラグインを追加することで解消できます。
こちらはAMP — WordPress Pluginsを機能拡張し、Google AnalyticsやGoogle AdSense、ロゴやスタイルの設定が可能になるプラグインです。
こちらもあらためてご紹介したいと思います。