[WordPress]AMPプラグインを導入してみました


By: jonel hanopol

AMP(Accelerated Mobile Pages Projectがついにリリースされましたね。

昨日ちょうどAMPのページを読みながら色々試していて、「既存のページからamp用のhtml変換に対応するのを手でやるのは大変だなぁ。Wordpressに関してはプラグインが使えるようになったころに導入してみよう。」と思っていたところ、「WordPressのAMPプラグインが更新!秒速でAMP化」という記事を見かけたので、本ブログにも「AMP Plugin」を導入してみました。

とりあえずエラーなく導入はできたのですが、Search Consoleの方ではまだAMPページを認識していない模様。

amp1

また、進展があれば追記しようと思います。

とりあえず、導入にあたっていくつか追加設定をしたのでメモを残しておきます。

1. 導入

プラグイン検索で「amp」と入力して、AMPプラグインをインストールします。

amp2

インストールできたらプラグインを有効化します。

特別な設定は特に必要なく、これだけでAMP対応ページが生成されるようになります。

シンプルですね。

「/amp/」を付けて記事にアクセスしてみるとAMP用ページができていました。

例: https://blog.hello-world.jp.net/blog/4407/amp/

2. 確認

AMPのルールに沿ってhtmlが記述されているかを確認するにはChromeのデベロッパーツールを開いて(Macの場合、Command + option + i)、AMPページのURLに「#development=1」をつけてアクセスします。

例: https://blog.hello-world.jp.net/blog/4407/amp/#development=1

ドキュメントで許可されていない属性が付いていたりするとドカドカーっとエラーが出るのですが「AMP validation successful.」となっており、正しいAMPフォーマットでhtmlが生成できていました。
amp3

3.構造化データをテストしてみる

AMP ページの Google 検索ガイドライン – Search Console ヘルプ」によると構造化データに対応しておくと、検索結果の目立つところにコンテンツが表示される、とのことです。

↓の「トップニュース」の部分ですね。
amp4

対応しておけるなら対応しておこうと思い、「Structured Data Testing Tool」を使って先ほどのURLを確認してみたところ「publisherのlogoが正しくない」とのエラーが出ていました。

AMPプラグインのreadme.mdにpublisherのカスタマイズ方法が書かれていたので、カスタマイズ用のコードを追加してみます。

フィルターをどこに書くのがいいのか未だに分かっていないのですが、とりあえずpublisherカスタマイズ用の別プラグインとして以下のようなコードを追加しました。

# wp-content/plugins/amp-publisher/amp-publisher.php

<?php
/*
  Plugin Name: AMP Publisher for blog.hello-world.jp.net
  Plugin URI: http://hello-world.jp.net
  Description: AMP Publisher for blog.hello-world.jp.net
  Version: v0.0.1
  Author: hilotter
  Author URI: http://hello-world.jp.net
*/

add_filter( 'amp_post_template_metadata', 'hello_world_amp_modify_json_metadata', 10, 2 );

function hello_world_amp_modify_json_metadata( $metadata, $post ) {
    $metadata['@type'] = 'NewsArticle';
    $metadata['publisher']['logo'] = array(
        '@type' => 'ImageObject',
        'url' => site_url() . '/apple-touch-icon-120x120.png',
        'height' => "120",
        'width' => "120",
    );
    return $metadata;
}

ロゴもapple-touch-iconを流用していたりで取り急ぎ感が半端ないですね。

これを保存した後、プラグインページで「AMP Publisher for blog.hello-world.jp.net」を有効にします。

height, widthの値は文字列にしておかないと構造化ツールのテスト時にエラーになるのでご注意ください。

プラグインを有効にした後、再度「Structured Data Testing Tool」で確認してみるとlogoが正しく設定され、エラーがなくなりました。

amp5

まとめ

まだAMP対応した記事がインデックスされていないのでどうなるか分からないですが、AMPプラグインを使うことで手軽にWordpressブログをAMP対応することができました。

AMP対応htmlではjsが使えないという制約がありますが、その代わりにモバイルでの表示速度が上がるのは嬉しいですね。

AMP登場によって今後の検索はどう変わっていくのでしょうか。

Web1.0の頃のようなシンプルhtmlに原点回帰したらそれはそれでおもしろそうですね。

参考