WordPressテーマSimplicityを利用してAMPに対応させてみた

現在利用しているWordPressテーマ「Simplicity2」のバージョン2.4.0がリリースされたのでアップデートしました。

しばらくアップデートをサボっているうちに、テーマそのものにAMPの機能が追加されたようです。プラグインを利用しなくても簡単にAMPに対応させることができるようになっています。

AMPについては「いろいろな制約がある」ということで食わず嫌いをしていました。しかし、よく調べてみるとAMPページでもGoogle AdSenseを利用することができ、Google Analyticsも問題なく使えるということだったので、これを機にこのブログもAMPに対応させることにしました。

AMPとは

Accelerated Mobile Pages は、読み込みを高速化しさらに快適なユーザー体験を追求するため、さまざまな技術的手法を活用してコンテンツをほぼ瞬時に読み込めるようにした HTML ページです。

Google ウェブマスター向け公式ブログ: AMP について #AMPlify キャンペーンスタート！

AMPはGoogleがモバイルウェブ高速化を目的として推進しているプロジェクト。AMP HTMLの仕様に合わせたページを作成することで、その表示が高速化されるというものです。具体的には、検索結果から一瞬でリンク先のコンテンツを表示させることができるようになります。

AMPページはGoogle等の検索エンジン側でキャッシュされ、検索結果表示にあわせてそのキャッシュされたデータが事前に読み込まれます。そして、リンクを押すとすでに読み込まれたデータが表示される仕組みになっています（わざわざ本来のページにアクセスしないので高速）。

Simplicity2のAMP機能

Simplicity2のAMP機能はバージョン2.3.1から追加されたようです。当初は不具合が生じていたようですが、今では安定して動くようになっています。

AMP機能を利用するためにはテーマカスタマイザーの「AMP（β機能）」の設定が必要です。とはいっても、「AMPの有効化」にチェックを入れるだけ。自動でAMPに必要なamphtmlやcanonicalの設定も行われます。

また、テーマカスタマイザーを利用してGoogle Analyticsの設定を行っていれば、Analyticsも自動でAMP対応となります。AdSenseについては、「広告300×250」ウィジェットを利用していれば、これも自動でAMP対応となります。「広告300×250」ウィジェットを利用していない場合には、AdSenseのAMP対応コードを入力すればOK。

その他外部サービスの埋め込みコンテンツにも自動で対応してくれるようです。バージョン2.4.0では以下のサービスに対応しています。

Twitter
Instagram
YouTube
Vine
Facebookの動画
TEDの動画
Googleマップ
Spotifyのプレイリスト

なお、AMPページを見るためには記事ページのURL末尾に「?amp=1」を追加します。

初期状態のAMPページはシンプルなデザインになっています。もしこれが気に入らないのであれば、amp.cssをテーマに追加することでAMPページのスタイルを変更することができます。

AMP設定が済んだら待つだけ

AMP設定が済んだらあとはGoogleのクローラーを待つだけ。ウェブマスターツールの「Accelerated Mobile Pages」の項目でAMPページのインデックス状況やエラーを確認することができます。

エラーが発生していると検索結果にAMPページとして表示されないので注意しましょう。ちなみに、以下のAMPバリデーターもエラーの確認には便利です。AMPページURLを入力するだけでチェックができます。
The AMP Validator