WordPressサイトでさくっとAMP対応とカスタマイズのあれこれ

この記事は[Akatsuki Advent Calendar 2016](http://qiita.com/advent-calendar/2016/aktsk)の8日目です。

こんにちは。そとあそびでエンジニアやってます @paranishian です。
ひとりpull requestでぼちぼちやっております :laughing:

さてさて、そとあそびではアウトドアレジャー予約サイトの「[そとあそび](http://sotoasobi.net)」とは別に、観光情報やアウトドア情報を発信する「[Outfitter](http://sotoasobi.net/outfitter/)」というメディアも運営しています。

今回、Outfitter（WordPress製）でさくっとAMP対応したので簡単にまとめます。

そもそもAMPとは
===
[Accelerated Mobile Pages Project](https://www.ampproject.org/)
「Accelerated Mobile Pages」の略で、モバイルページを爆速で表示しようというオープンソースのプロジェクトです。
最近スマホの検索結果やFacebookフィードでよく見る⚡マークのあれです。
AMPは表示が爆速なのでユーザ体験が良いのはもちろんのこと、検索結果でも上位に表示されるという大きなSEOアドバンテージがあるので、デザインはどうであれ取り急ぎAMP対応しといたほうが良いでしょう。

AMP対応
===
OutfitterはWordPress製なのでプラグインで対応しちゃいます。

プラグインのインストール
---
今回はこちらのプラグインを利用します。
[AMP — WordPress Plugins](https://ja.wordpress.org/plugins/amp/)

このプラグインをインストールして有効化するとひとまずAMPページが見れるようになっているので、URLの末尾に`/amp/`もしくは`amp=1`パラメータを付与してアクセスしてみましょう。

|通常|AMP|
|---|---|
|http://sotoasobi.net/activity/snow/blog/illumination-spot-event | http://sotoasobi.net/activity/snow/blog/illumination-spot-event/amp/ |
|![スクリーンショット 2016-12-07 21.09.29.png](https://qiita-image-store.s3.amazonaws.com/0/611/f2207ddd-876b-5a4e-36cc-99d156ea28cc.png)|![スクリーンショット 2016-12-07 21.09.40.png](https://qiita-image-store.s3.amazonaws.com/0/611/66f27cc1-3808-679e-cd97-34e76093af90.png)|

プラグインの注意点
---
このプラグインでは、記事内の画像やSNSのURLをAMP用のタグで出力しています。中でもSNSのタグは[oEmbed](https://wpdocs.osdn.jp/oEmbed)の仕組みを利用していて、URLをタグに書き換えているので、記事内に直接埋め込みタグをコピペしている場合は機能しません。その場合は埋め込みタグを単純なURLにリライトしましょう。
（ただ、Facebookだけが厄介なことになってるので[FacebookのoEmbed対応](#facebook%E3%81%AEoembed%E3%81%AB%E5%AF%BE%E5%BF%9C)が必要です。）

```
⭕ 良い例
https://twitter.com/sotoasobi_net/status/805894539567190016
```

```
❌ 悪い例
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">ウィンタースポーツの季節到来！今シーズンやっておきたいのはコレ<a href="https://t.co/UJix11FqFZ">https://t.co/UJix11FqFZ</a></p>&mdash; そとあそび 自然を思いっきり満喫しよう！ (@sotoasobi_net) <a href="https://twitter.com/sotoasobi_net/status/805894539567190016">2016年12月5日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
```

さらにカスタマイズ
---
このプラグインは記事執筆時点でまだv0.4.2なので、細かいデザイン調整の機能がついているわけではなく、自分でカスタマイズする必要があります。詳細はREADMEをご確認下さい。
[amp-wp/readme.md at master · Automattic/amp-wp](https://github.com/Automattic/amp-wp/blob/master/readme.md)

ここでは必要になりそうなカスタマイズをいくつかご紹介します。
#### Google Analyticsの設定
下記の例ではPVイベントのみ設定しています。細かな設定項目については以下をご確認ください。
[AMP ページにアナリティクスを追加する  |  AMP ページ向けアナリティクス  |  Google Developers](https://developers.google.com/analytics/devguides/collection/amp-analytics/?hl=ja)

```functions.php
add_action('amp_post_template_analytics', 'custom_amp_post_template_analytics');
function custom_amp_post_template_analytics($analytics)
{
    if (!is_array($analytics)){
        $analytics = array();
    }
    $analytics['outfitter-analytics'] = array(
        'type' => 'googleanalytics',
        'attributes' => array(),
        'config_data' => array(
            'vars' => array(
                'account' => "UA-XXXXXXX-X"
            ),
            "triggers" => array(
                "trackPageview" => array(
                    "on" => "visible",
                    "request" => "pageview"
                ),
            ),
        ),
    );
    return $analytics;
}
```
#### 著者を非表示に
```functions.php
add_action( 'amp_post_article_header_meta', 'amp_remove_author_meta' );
function amp_remove_author_meta( $meta_parts ) {
    foreach ( array_keys( $meta_parts, 'meta-author', true ) as $key ) {
        unset( $meta_parts[ $key ] );
    }
    return $meta_parts;
}
```
#### FacebookのoEmbedに対応
なぜかFacebookだけoEmbed対応がWordPress4.7以降となっています。
[#34737 (Add Facebook oEmbed support) – WordPress Trac](https://core.trac.wordpress.org/ticket/34737)
このままではAMPページではFacebookの埋め込みコンテンツがちゃんと表示されるのに、通常ページではただのURLになってしまう、という残念な挙動になってしまうので、手動で先で対応しちゃいましょう。

**追記：** 2016/12/6にWordPress4.7がリリースされたので4.7以上の方は対応不要です。

```functions.php
// ref: https://github.com/khromov/wp-facebook-oembed
function khromov_wp_facebook_oembed() {
    $endpoints = array(
        '#https?://www\.facebook\.com/video.php.*#i'      => 'https://www.facebook.com/plugins/video/oembed.json/',
        '#https?://www\.facebook\.com/.*/videos/.*#i'     => 'https://www.facebook.com/plugins/video/oembed.json/',
        '#https?://www\.facebook\.com/.*/posts/.*#i'      => 'https://www.facebook.com/plugins/post/oembed.json/',
        '#https?://www\.facebook\.com/.*/activity/.*#i'   => 'https://www.facebook.com/plugins/post/oembed.json/',
        '#https?://www\.facebook\.com/photo(s/|.php).*#i' => 'https://www.facebook.com/plugins/post/oembed.json/',
        '#https?://www\.facebook\.com/permalink.php.*#i'  => 'https://www.facebook.com/plugins/post/oembed.json/',
        '#https?://www\.facebook\.com/media/.*#i'         => 'https://www.facebook.com/plugins/post/oembed.json/',
        '#https?://www\.facebook\.com/questions/.*#i'     => 'https://www.facebook.com/plugins/post/oembed.json/',
        '#https?://www\.facebook\.com/notes/.*#i'         => 'https://www.facebook.com/plugins/post/oembed.json/',
    );
    foreach ( $endpoints as $pattern => $endpoint ) {
        wp_oembed_add_provider( $pattern, $endpoint, true );
    }
}
add_action( 'init', 'khromov_wp_facebook_oembed' );
```

AMPページのバリデーションチェック
---
AMPの書式に準拠しているかどうかは、Google Chromeで該当のURLの末尾に`#development=1`を付与することで確認できます。
バリデーションが通ればデベロッパーコンソールに以下のように表示されます。
![スクリーンショット 2016-12-07 21.03.30.png](https://qiita-image-store.s3.amazonaws.com/0/611/7f1dd663-9fde-aa65-20b2-99007b2c5210.png)

余談
===
- AMP対応したらGoogleのSearch Consoleでfetch as googleして早めにクロールしてもらいましょう
- Search Console > 検索での見え方 > Accelerated Mobile Pages でエラーがあればちゃんと修正しましょう
- 最近AMP対応した食べログのページの出来がなんかすごい

本記事ではWordPressでの手っ取り早いAMP対応を紹介させていただきました。
AMPでできることはどんどん増えてきているので、こんな簡単な対応で終わることなくちゃんとUI/UXの改善をしていきましょー！（自戒を込めて :pray: ）