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

この記事はAkatsuki Advent Calendar 2016の8日目です。

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

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

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

そもそもAMPとは

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

AMP対応

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

プラグインのインストール

今回はこちらのプラグインを利用します。
AMP — WordPress Plugins

このプラグインをインストールして有効化するとひとまず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/

プラグインの注意点

このプラグインでは、記事内の画像やSNSのURLをAMP用のタグで出力しています。中でもSNSのタグはoEmbedの仕組みを利用していて、URLをタグに書き換えているので、記事内に直接埋め込みタグをコピペしている場合は機能しません。その場合は埋め込みタグを単純なURLにリライトしましょう。
（ただ、Facebookだけが厄介なことになってるのでFacebookのoEmbed対応が必要です。）

⭕ 良い例
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

ここでは必要になりそうなカスタマイズをいくつかご紹介します。

Google Analyticsの設定

下記の例ではPVイベントのみ設定しています。細かな設定項目については以下をご確認ください。
AMP ページにアナリティクスを追加する  |  AMP ページ向けアナリティクス  |  Google Developers

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
このままでは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を付与することで確認できます。
バリデーションが通ればデベロッパーコンソールに以下のように表示されます。

余談

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

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