こんにちは。 はてなブックマークアプリがAMP(Accelerated Mobile Pages 以下AMP)対応しましたね。
話題のAMPですが、そんなに爆速になるのであれば、やっておかなくてはと焦ってきました。
はてなブログはそのうち公式で対応しそうな気がするので（あくまで予測ですが） WordPressのサイトをAMP対応してみます。
AMPって何？
AMPはモバイル環境でのウェブサイト表示を高速化するプロジェクトでGoogleが発足しました。
AMP のテクノロジーを利用しているウェブページは、従来に比べ平均 4 倍の速度で表示され、データ量も約 1/10 に抑えられるため、ほとんどのページが瞬時に表示されます。
引用：Google Japan Blog: モバイルウェブをもっと速く
これまでのモバイル向けのウェブページに加えて、AMP HTML に準拠したウェブページを公開すると、Google のクローラーが AMP ページをキャッシュします。キャッシュされたコンテンツが検索クエリに関連が深いと判断された場合、検索結果にはキャッシュされたページの URL がリンクされます。検索結果に表示されたキャッシュ済みの AMP ページにユーザーがアクセスする場合には、キャッシュ済みのためコンテンツの取得までの時間が短く、また広告やアナリティクスといったタグは遅延読込されるため、記事の表示が瞬時に行われます。
引用：Google Developers Japan: Google モバイル検索が Accelerated Mobile Pages に対応しました
つまり専用のページ（AMPのHTML)を用意しておけば、クローラーがAMPページをキャッシュして、検索クエリと関連度が高ければAMPページへのリンクが生成されるようです。
どれぐらい速いのか？
以下のリンクからAMP体験ができるのでモバイル端末でアクセスしてみてください。
対応ページは「AMP」と書いているのでわかると思いますが、ほんとに速い！
現在は大手ニュースサイトなどが中心で、一般サイトのAMPリンクはまだ見当たりませんでした。
AMPは検索順位に影響する？
現状はランキング要因にはならないようです。ただ表示するスピードが速いのは検索ユーザーにとってはメリットがあるのでそのうちランキング要因の１つになることはあるかも・・？。
どうすれば対応できる？
AMPに対応するには既存のページにAMP準拠のタグの記述とAMPページを用意する必要があります。
細かい内容になるので、詳しくはここでは書きません。以下のページが詳しいのでのぞいてみてください。
Google ウェブマスター向け公式ブログ: Accelerated Mobile Pages プロジェクトについて -- 導入ガイド日本語版を本日公開しました
What Is AMP?
WordPressで対応してみる
せっかくWordpressなのでプラグインで実装してみます。
実装環境
- WordPress 4.4.2
- プラグイン WP Multibyte patch、Wordpressインポートツール
- テーマ Affinger3
インストール直後なのでプラグインはほぼ入ってないです。
プラグインの新規追加から、Accelerated Mobele Pageをインストールしていきます。
なんということでしょう。これで終わりです（笑）
この時点ではこの後に苦労するとは思ってもいませんでした・・・。
正しくインストールされているか確認する方法
まず、URLに?ampを追加すると、AMPページが生成されます。
http://example.com/の場合は、http://example.com/?ampです。
なお、既にパラメータが付与されている場合は&で確認できます。（※http://example.com/p=123&）
次にURLに#development=1を付与してブラウザのデベロッパーツール（Google Chrome、Firefox）でエラーが無いか確認します。
Windows（F12 か Ctrl + Shift + i)
Mac（Cmd＋Opt＋i）
問題なく設定されていればAMP validation successful.と表示されます。
致命的なエラーではないのですが、何やら警告が出てしまいました。
http://example.com/2016/03/31/hello-world/?amp:12:4 The tag 'head > style : boilerplate - old variant' is deprecated - use 'head > style : boilerplate' instead. (see https://www.ampproject.org/docs/reference/spec.html#required-markup)
"http://example.com/2016/03/31/hello-world/?amp:12:46 The tag 'noscript > style : boilerplate - old variant' is deprecated - use 'noscript > style : boilerplate' instead. (see https://www.ampproject.org/docs/reference/spec.html#required-markup)"
NS_ERROR_UNEXPECTED:
該当箇所を修正していきます。
/wp-content/plugins/accelerated-mobile-pages/themes/default/function.php
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
↓
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
amp-boilerplateの記述が変わったらしいのですが、プラグイン側でまだ対応されていないようでした。
参考記事：AMPの対応方法まとめ (作成途中)
次に構造化チェックツールでチェックしてみましたが特にエラーは出ていませんでした。
しかし次にGoogle Chromeで確認したところ・・・
validator.js:384 AMP validation had errors:nB.error @ validator.js:384(anonymous function) @ validator.js:434f.ga @ validator.js:363PA @ validator.js:367KA @ validator.js:367DA.Pb @ validator.js:367AA @ validator.js:360
validator.js:384 http://example.com/2016/03/31/hello-world/?amp:327:4 The attribute 'rel' in tag 'link rel=' is set to the invalid value 'stylesheet'.nB.error @ validator.js:384(anonymous function) @ validator.js:434f.ga @ validator.js:363PA @ validator.js:367KA @ validator.js:367DA.Pb @ validator.js:367AA @ validator.js:360
validator.js:384 http://example.com/2016/03/31/hello-world/?amp:328:0 The attribute 'rel' in tag 'link rel=' is set to the invalid value 'stylesheet'.nB.error @ validator.js:384(anonymous function) @ validator.js:434f.ga @ validator.js:363PA @ validator.js:367KA @ validator.js:367DA.Pb @ validator.js:367AA @ validator.js:360
validator.js:384 http://example.com/2016/03/31/hello-world/?amp:329:0 The attribute 'rel' in tag 'link rel=' is set to the invalid value 'stylesheet'.nB.error @ validator.js:384(anonymous function) @ validator.js:434f.ga @ validator.js:363PA @ validator.js:367KA @ validator.js:367DA.Pb @ validator.js:367AA @ validator.js:360
validator.js:384 http://example.com/2016/03/31/hello-world/?amp:330:0 The tag 'script' is disallowed except in specific forms.nB.error @ validator.js:384(anonymous function) @ validator.js:434f.ga @ validator.js:363PA @ validator.js:367KA @ validator.js:367DA.Pb @ validator.js:367AA @ validator.js:360
validator.js:384 http://example.com/2016/03/31/hello-world/?amp:331:1 The tag 'script' is disallowed except in specific forms.nB.error @ validator.js:384(anonymous function) @ validator.js:434f.ga @ validator.js:363PA @ validator.js:367KA @ validator.js:367DA.Pb @ validator.js:367AA @ validator.js:360
validator.js:384 http://example.com/2016/03/31/hello-world/?amp:364:105 The tag 'form' is disallowed.nB.error @ validator.js:384(anonymous function) @ validator.js:434f.ga @ validator.js:363PA @ validator.js:367KA @ validator.js:367DA.Pb @ validator.js:367AA @ validator.js:360
validator.js:384 http://example.com/2016/03/31/hello-world/?amp:364:182 The tag 'input' is disallowed.nB.error @ validator.js:384(anonymous function) @ validator.js:434f.ga @ validator.js:363PA @ validator.js:367KA @ validator.js:367DA.Pb @ validator.js:367AA @ validator.js:360
validator.js:384 http://example.com/2016/03/31/hello-world/?amp:364:281 The tag 'label' is disallowed.nB.error @ validator.js:384(anonymous function) @ validator.js:434f.ga @ validator.js:363PA @ validator.js:367KA @ validator.js:367DA.Pb @ validator.js:367AA @ validator.js:360
validator.js:384 http://example.com/2016/03/31/hello-world/?amp:364:347 The tag 'input' is disallowed.nB.error @ validator.js:384(anonymous function) @ validator.js:434f.ga @ validator.js:363PA @ validator.js:367KA @ validator.js:367DA.Pb @ validator.js:367AA @ validator.js:360
validator.js:384 http://example.com/2016/03/31/hello-world/?amp:365:180 Invalid URL protocol 'http:' for attribute 'src' in tag 'img'. (see https://www.ampproject.org/docs/reference/amp-img.html)nB.error @ validator.js:384(anonymous function) @ validator.js:434f.ga @ validator.js:363PA @ validator.js:367KA @ validator.js:367DA.Pb @ validator.js:367AA @ validator.js:360
validator.js:384 http://example.com/2016/03/31/hello-world/?amp:365:180 The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? (see https://www.ampproject.org/docs/reference/amp-img.html)nB.error @ validator.js:384(anonymous function) @ validator.js:434f.ga @ validator.js:363PA @ validator.js:367KA @ validator.js:367DA.Pb @ validator.js:367AA @ validator.js:360
validator.js:384 http://example.com/2016/03/31/hello-world/?amp:366:123 Invalid URL protocol 'http:' for attribute 'src' in tag 'img'. (see https://www.ampproject.org/docs/reference/amp-img.html)nB.error @ validator.js:384(anonymous function) @ validator.js:434f.ga @ validator.js:363PA @ validator.js:367KA @ validator.js:367DA.Pb @ validator.js:367AA @ validator.js:360
validator.js:384 http://example.com/2016/03/31/hello-world/?amp:366:123 The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? (see https://www.ampproject.org/docs/reference/amp-img.html)
めちゃくちゃエラー出てます・・・。
これはちょっと時間がかかりそうなので続きは今度追記します・・。
追記（4/5 23:13)
The attribute 'rel' in tag 'link rel=' is set to the invalid value 'stylesheet'
このエラー箇所が、WordPress 3.8から挿入されるようになったOpen sansフォント読み込み部分でエラーになっているので無効にします。
テーマのfunctions.phpに以下のコードを追記
if (!function_exists('remove_wp_open_sans')) :
function remove_wp_open_sans() {
wp_deregister_style( 'open-sans' );
wp_register_style( 'open-sans', false );
}
add_action( 'wp_enqueue_scripts', 'remove_wp_open_sans');
// Uncomment below to remove from admin
// add_action('admin_enqueue_scripts', 'remove_wp_open_sans');
endif;
無事エラーが出なくなりました。あとはSearch Consoleに登録してクローラーが来るのを待てばいいだけなんですが、このサイトがまだ完成してないのでそれは追々。
最後に
爆速なのはよくわかったのですが、ルールが厳格な為エラーが凄いことになります。
現状、プラグインを使わず設定するのが早道そうですねー。。
まだまだ難易度が高そうなので、早く一般化（簡易化）しないかなぁ。
あと、Wordpressの場合テーマにも結構左右されるかもしれないです。
