まだ間に合う！Wordpressサイトを"サクッ"とAMP(Accelerated Mobile Pages）対応させるためにやったことまとめ

Googleが昨年「２月に対応します」とアナウンスし、大きな話題となっているAMP。その具体的な開始日が2016年2月24日であることが判明しました。もうすぐです！
＜参考：Official Launch Date for Google AMP Confirmed | Digital – AdAge＞
※詳細な時刻までは不明ですが、Google本社があるカリフォルニア州で24日0:00にスタートすると仮定すると、24日水曜の17時までには対応したいとところでしょうか。

WordPressならプラグインを使うことでサクッと対応できるので、やっておきましょう。

AMP(Accelerated Mobile Pages）とは？
- AMPを知るためにチェックしておきたいページ
WordPressで”サクッ”とAMPに対応する方法

今日の人気記事
- - 最後にデバッグを

AMP(Accelerated Mobile Pages）とは？

AMP(Accelerated Mobile Pages）はGoogleが進めている「モバイルでのウェブページ表示を高速化するためのプロジェクト」です。
AMP HTMLと呼ばれる独自仕様に従ってページを作成することでGoogleのモバイル検索画面から“爆速”でページを表示させることができます。
サイトの高速化はGoogle検索のランキング要因の一つとされていますが、将来的にはAMP対応そのものがランキング要因になる可能性も示唆されています。

＜参考：Googleは2016年2月にAMPを検索で公開、ランキング要因になる可能性を示唆 | 海外SEO情報ブログ＞

ニュースサイトでなければそこまで大きなインパクトはないかもしれませんし、個人ブログであっても大きな恩恵を受けるかもしれない。
まだまだAMP対応の効果はほぼ未知数ですが、ウェブ業界の2016年の大きなトピックスの一つだと思います。

AMPを知るためにチェックしておきたいページ

・AMP公式サイト：Accelerated Mobile Pages Project
・Googleの公式アナウンス：Official Google Blog: Introducing the Accelerated Mobile Pages Project, for a faster, open mobile web
・GitHubのAMPレポジトリ：AMP Project · GitHub
　※サンプルのソースコードや、ドキュメントが公開されています。

WordPressで”サクッ”とAMPに対応する方法

当サイト「ultimate-ez.com」はガシガシPV稼いで行こうぜ！って感じのサイトでもないので、今回はAMPは見合わせています。
代わりに、僕が趣味で運用しているApple Watchのサイト「Apple Watch Journal」に適用させてみました。
一応ニュースサイト的な側面もあるので、恩恵を受けれるんじゃないかということで。。

適用したページはこちら

→http://applewatchjournal.net/news/2227/amp/

非常にシンプルなページとして表示されるのを確認できると思います。
というのもAMPでは表示速度の低下を招くjavascriptや一部のCSSが使用できない（CSSの総容量50KBまでという制限もあります）ため、シンプルでプレーンはHTMLになります。
まずは突貫でAMPに対応させましたが、しばらく運用してみて効果が高そうなら、制限の中でCSSを駆使して、デザイン的に差別化を図っていくのも検討したいところです。

それでは、早速”サクッ”とAMP対応していきましょう。

まずはプラグイン「AMP」をインストール

さすがwordpressという感じで「AMP」というそのままズバリなプラグインが用意されています。
現在の最新バージョンは0.3。
２週間ごとくらいのペースでバージョンアップは進んでいますがまだまだベータ版。ご利用は自己責任でお願いいたします。

プラグインの「新規追加」画面から、「AMP」を検索。
「今すぐインストール」をクリックしてプラグインを有効化したら、AMP対応完了です！

通常のURL末尾に/amp/、または?amp=1を付けることでAMPページを表示させることができます。

まずはデザインをお好みに変更！

HTMLを編集したい場合はamp/templates/single.phpを、CSSを編集したい場合はamp/templates/style.phpという感じで、編集していきましょう。

本来ならプラグインのファイルを直接上書き編集するのは良い作法ではないんですが、0.2→0.3でファイルの内容も結構変わっていたので、当面はバージョンアップの度に結局手直しが必要っぽい。。。
ということでwordpressのダッシュボードから直接ガシガシ編集しています。

サイドバーの「プラグイン」から「プラグインの編集」を選択。
編集するプラグインで「APM」を選択し、編集画面で直接修正しています。

最低限、ヘッダーのナビゲーションバーの色やサイトアイコンは変更しておいた方が良いでしょう。
また、日本語だとタイトルのフォントサイズがでかすぎるので、この辺りも調整しておいた方が良さそうです。
あと、デフォルトで読み込んでいるGoogle Fontsのウェブフォントがあるんですが、個人的により好みなフォント「Raleway」に変更しました。
※フォントはamp/templates/single.phpのヘッダー部分で以下のように読み込みます。

AMPは基本的にWebフォント禁止なんですが、Google Fontsをで読み込むのは許可されています。まあ、Google同士なんでいけるんでしょう。

Google Analyticsを埋め込む

AMPはjavascriptが禁止なので通常の方法でGoogle Analyticsを仕込むことができません。
ただ、AMPにはサイト分析用のタグがあり、Google Analiticsも無事にamp-analyticsに対応しています。

＜参考：Announcing GA Support for Accelerated Mobile Pages (AMP) Analytics – Analytics Blog＞

まず、<head>の中、かつ「AMP JS library」の読み込みより前にamp-analytics-0.1.jsを読み込みます。
プラグインAMPを使っている場合、AMP JS libraryはtemplates/single.php内ので読み込まれるので、その前に以下の１行を追加します。

こんな感じ↓

続いて<body>内にに以下のコードを追加。

UA-XXXXXXXX-Xは自分のGoogleアナリティクスのプロパティIDです。
IDは通常ページのものと同じでも構いませんが、AMP計測のために別のプロパティを新たに作成することが推奨されているようです。
この辺りは実際に表示が始まってみないと、本当に分けた方がいいのか統合して良いのかなんとも言えません。
とりあえずは推奨されるがままに別プロパティーを作成して設定しておきましょう。

Google Adsenseを表示させる

続いては広告！せっかく上位表示されて検索流入が増えても広告がないと儲からないよ！ということで、広告は入れましょう。
こちらもという専用のタグがあり、Adsenseも対応しています。
アドセンス以外を使っている場合は各Adネットワークでamp-ad対応しているか確認する必要があります。
表示させたい箇所に以下のコードを入れ込みます。追加位置は記事下です。

スポンサードリンク

data-ad-client、data-ad-slotはどちらも通常通り発行したadsenseのコードの中に記載されているので、それをコピペしてください。
広告も収益効率など通常ページと分けて見たいと思うので、新しい広告を発行した方が良いかと思います。

回遊のための記事を表示させよう！

AMPのページは非常にシンプルなページで検索結果からサクッと見れるのはいいんですが、ユーザー的には「検索機能の一部」としてみてしまう可能性もあり、サイト内を回遊せずに直帰してしまう可能性が高そうです。
そこで少しでも離脱を抑えるためにサイト内回遊を促すための記事を表示させる方法も考えておきましょう。
見せる記事としては「関連記事」「人気記事」などがありますが、今回は人気記事を表示させることにしました。
試験的にAMPを導入するサイト”Apple Watch Journal”では、そもそもApple Watch関連の記事しか書いてないので基本的に全ての記事が関連記事であり、通常ページのユーザー傾向的にも”人気記事”のクリック率が高いので、人気記事を掲載することにしました。
どちらが良いかはサイトによって違うと思いますし、あんまりクリックされなければ修正すればよいだけなので、とりあえず「人気記事」でやっちゃいましょう。

人気記事の表示は「WordPress Popular Posts」というプラグインを使います。
人気のプラグインなので使っている人も多いと思いますが、人気記事ウィジェットとして使う以外にも、wpp_get_mostpopularというテンプレートタグを使うことで任意の場所に人気記事を表示させることができます。

今回は「デイリーランキング10記事」を表示させるために、templates/single.phpに以下の記述を追加しました。掲載位置は広告の下としました。

今日の人気記事
   'daily',
 'limit' => 10,
 'post_type' => 'post',
 'title_length' => '80',
 'stats_comments' => '0',
 'post_html' => '{text_title} ({views}views)',
); ?>

ランキングの各アイテムのHTML構造は、パラメータpost_htmlに記述します。
本来リンク付きのタイトルは{title} というタグで表示できるんですが、{title}のリンクには自動的にtarget="_self"が付与され、AMPで非対応のコードとしてエラーになってしまいます。
そのため、{url}と{text_title}を使ってaタグを構成しています。

なおリンクさせるURLは各ページのAMPページとしています。
これもまた通常ページにリンクするのとAMPページにリンクするのはどちらが良いか悩んでいるポイントです。
同じような思想で設計されているSmartNewsのSmartモード表示だと関連記事は通常ページにリンクさせていますが、ユーザー的には高速な方が嬉しいはずですし…。
とりあえず今回はユーザーフレンドリー重視ということでAMPページにリンクしてみました。
aタグのhref="{url}/amp/"のところです。

最後にデバッグを

とりあえず最低限ページが完成したので、最後にデバッグを。
このデバッグ方法がまたかっちょいいんですが、AMPページのURL末尾に「#development=1」を付けると、ブラウザの検証ツール（開発者ツール）のコンソールにエラーが表示されます。
問題がない場合は「AMP validation successful」と表示されます。

なおこのデバッグ機能はChromeとFirefoxのみ対応していて、Safariでは動きません。。。
エラーはもちろん英語なので、問題があった場合は、GitHubのドキュメントを見ながら対応してみてください。

また、Search Consle（旧ウェブマスターツール）もAMPに対応しています。

「検索での見え方」＞「Accelerated Mobile Pages」で、AMPページのインデックスやエラーを表示してくれます。
Search Consoleはデータが反映されるのに2日くらいかかるのですぐにデータを見ることはできませんが、定期的にチェックしておきましょう。
※AMPはGoogleが注力しているためか、AMP関連のエラーが増えたタイミングでメールでも告知してくれました。