(cache) WordpressをAMPページにサクっと対応しようとしてみたらめちゃくちゃ大変だった【一応解決】

f:id:photoblg:20160407174124j:plain

こんにちは。はてなブックマークアプリがAMP(Accelerated Mobile Pages 以下AMP)対応しましたね。

bookmark.hatenastaff.com

話題のAMPですが、そんなに爆速になるのであれば、やっておかなくてはと焦ってきました。
はてなブログはそのうち公式で対応しそうな気がするので（あくまで予測ですが） WordpressのサイトをAMP対応してみます。

AMPって何？

AMPはモバイル環境でのウェブサイト表示を高速化するプロジェクトでGoogleが発足しました。

AMP のテクノロジーを利用しているウェブページは、従来に比べ平均 4 倍の速度で表示され、データ量も約 1/10 に抑えられるため、ほとんどのページが瞬時に表示されます。

引用：Google Japan Blog: モバイルウェブをもっと速く
f:id:photoblg:20160407204452p:plain

これまでのモバイル向けのウェブページに加えて、AMP HTML に準拠したウェブページを公開すると、Google のクローラーが AMP ページをキャッシュします。キャッシュされたコンテンツが検索クエリに関連が深いと判断された場合、検索結果にはキャッシュされたページの URL がリンクされます。検索結果に表示されたキャッシュ済みの AMP ページにユーザーがアクセスする場合には、キャッシュ済みのためコンテンツの取得までの時間が短く、また広告やアナリティクスといったタグは遅延読込されるため、記事の表示が瞬時に行われます。

引用：Google Developers Japan: Google モバイル検索が Accelerated Mobile Pages に対応しました
つまり専用のページ（AMPのHTML)を用意しておけば、クローラーがAMPページをキャッシュして、検索クエリと関連度が高ければAMPページへのリンクが生成されます。

どれぐらい速いのか？

モバイル端末から以下のリンクで体感できます。対応ページは「AMP」と書いているのでわかると思いますが、ほんと速い！
ただ、まだ一般サイトでAMPリンクは見かけないですね。

f:id:photoblg:20160407222351j:plain
mars - Google Search
Google

AMPは検索順位に影響する？

現状はランキング要因にはならないようです。ただ表示するスピードが速いのは検索ユーザーにとってはメリットがあるのでそのうちランキング要因の１つになることはあるかも・・？。

どうすれば対応できる？

AMPに対応するには既存のページにAMP準拠のタグの記述とAMPページを用意する必要があります。

細かい内容になるので、詳しくはここでは書きません。以下のページが詳しいのでのぞいてみてください。

Google ウェブマスター向け公式ブログ: Accelerated Mobile Pages プロジェクトについて -- 導入ガイド日本語版を本日公開しました
 What Is AMP?

Wordpressで対応してみる

せっかくWordpressなのでプラグインで実装してみます。
プラグインの新規追加でAccelerated Mobele Pageをインストールします。

なんということでしょう。これで終わりです（笑）
この時点ではこの後に苦労するとは思ってもいませんでした・・・。

正しくインストールされているか確認する方法

まず、URLに?ampを追加すると、AMPページが生成されます。
http://example.com/の場合は、http://example.com/?ampです。
なお、既にパラメータが付与されている場合は&ampで確認できます。（※http://example.com/p=123&）
f:id:photoblg:20160407211008j:plain

次にURLに#development=1を付与してブラウザのデベロッパーツール（Google Chrome、Firefox）でエラーが無いか確認します。
Windows（F12 か Ctrl + Shift + i)
Mac（Cmd＋Opt＋i）
f:id:photoblg:20160407211946p:plain

問題なく設定されていれば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の対応方法まとめ (作成途中)

次に構造化チェックツールでチェックしてみましたが特にエラーは出ていませんでした。

f:id:photoblg:20160407215234j:plain

しかし次に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;

f:id:photoblg:20160407231139j:plain