WordPressのプラグインを利用したAMP(Accelerated Mobile Pages)対応まとめと結果をご紹介します。AMPに対応させ、GoogleAnalyticsで計測、他サイトで導入した結果までご紹介します。
Webサイトの種類によりますが、圧倒的にモバイルからのアクセスが多くなっているので、AMP(Accelerated Mobile Pages)に対応してみました。
現時点(2016年11月)ではSEOに特段有利ということは無いですが、Googleのモバイルの検索結果でAMPラベルの表示したり、上位表示をすすめていくと予想されるので、対応するのに越したことはないですね。
Google、10月上旬から対応ページに「AMPラベル」を表示、モバイルの検索結果で
先にお伝えしておくと以下にご紹介するAMP対応方法は、記事だけしかAMP対応されておらず、対応が完璧ではありません。またプラグインを直接書き換えるなどの問題(プラグインのアップデート時に戻る可能性がある)もあります。ご注意ください。
WordPressのAMP(Accelerated Mobile Pages)対応手順
APMプラグインのインストール
プラグインの新規追加などから「AMP」プラグインをインストールして有効化します。
2016年11月時点でバージョンo.4.2でした。
インストールして有効化するだけで、記事のURLの末尾に「/amp」をつけると、AMP対応ページが表示されます。
いまのページのAMPページは以下になります。(PCでも確認できます。)
構造化データテストツールでチェックする
Googleが提供している構造化データテストツールでチェックします。
「logo」部分に1件のエラーが表示されています。
ここでエラーが出ていなければ問題ありません。logoにエラーが出ている場合は、Wordpressにlogoを登録します。
外観 > カスタマイズ > サイト基本情報 の「サイトアイコン」に画像を設定します。
画像サイズは縦横512px以上のサイズが必要ですが、実際には小さいサイズがAMPに登録されるようです。
これでエラーが無くなるはずですが、記事に画像が無い場合はimgeに「「image」フィールドの値は必須です。」というエラーが表示されます。
その場合は、以下の記事が参考になるかと・・(手抜き)。
WordPressのAMP対応プラグインを入れて「schema.org Article のエラー」が出たときにやったこと
これでエラーはなくなったかと思います。
Google Search Consoleに登録してあると、エラーがある場合にメールが送られてきて修正するように怒られます。。。
GoogleAnalyticsの設定
下記のGoogleの公式の説明に沿ってAnalyticsを登録します。
WordPressのAMPプラグインを利用した場合、具体的には、
1.新しいGoogleAnalyticsアカウントを取得してコードをメモしておく。取得したコードの中にある「UA-12345678-2」部分が必要です。
2.プラグインのamp > templates > single.phpを修正します。7行目あたりにある以下のコード
<?php do_action( 'amp_post_template_head', $this ); ?>
の”上”に、
<script async custom-element="amp-analytics"
src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
上記コードを追加します。下記のようになればOK。
<script async custom-element="amp-analytics"
src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<?php do_action( 'amp_post_template_head', $this ); ?>
次に、以下のコード内の(UA-XXXXX-Y)部分をさきほど1で取得したコードに書き換え、bodyタグ内に追記します。bodyタグ直下で問題ないかと。
<body class="<?php echo esc_attr( $this->get( 'body_class' ) ); ?>">
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
以上です。
最後に構造化データテストツールで一応再確認し、GoogleAnalyticsのリアルタイムサマリーでアクセスが計測できているかを確認すればOKです。
WordPressのAMP(Accelerated Mobile Pages)対応した結果
アクセスが多い別サイトで導入してまだ数日しか経っていないので、また後日追加しますが、意外と早くアクセスが来ています。
デイリーのアクセスが2.5万人/日ほどのサイトの結果です。11月4日に対応し、11月6日にエラー対応のメールがGoogleから届き、同日内に対応。8日19時時点なので8日時点で800人/日ほどは来訪しそうな感じです。
想定していたよりもアクセスされるのが早く、多かったです。
既存のユーザがAMPに流れたのか、新規ユーザが増えたのかはわかりませんが、今後また動向を追っていきます。
追記
amp広告を追加したらエラーが出たので、対応記事を書きました。