2018-8-13

WordPressでAMP対応して、Googleアナリティクスを設定する → プラグイン「AMP for WordPress」

AMPとは？

AMPは、Accelerated Mobile Pagesの略。詳細はウィキペディア（Accelerated Mobile Pages）で確認したりググって調べる。

実例としては、Googleのオーガニック検索結果で検索結果の上部に表示されるエリア（参考：キャプチャは、「iphone」で検索した場合の結果画面）。これはAMP対応していないと表示されることはない。逆にいえばAMP対応することで、検索結果上部に表示される可能性が0ではなくなるとも言える。

実装するには、記事ページを作成した際に、それとは別にAMP用のHTMLファイルを用意する必要がある。テンプレートを自前で用意するのもアリだが、WordPressを使ってることもあり、プラグインを使ってサクッと終わらせてしまおうと思う。

導入の流れ

AMPの設定

プラグイン「AMP for WordPress」をインストールし、有効化する
AMPが正しく設定されたか確認する
ツールを使ってテストする

Googleアナリティクスの設定

GoogleアナリティクスでAMP用のプロファイルを作成する
WordPressの管理画面でプロファイルIDを紐付けする
Googleアナリティクスのリアルタイムでログが集計されることを確認する

1. プラグイン「AMP for WordPress」をインストールし、有効化する

「プラグイン」を選択し、「新規追加」を選択する
入力フォームに「AMP for WordPress」と入力する
検索結果に表示される「AMP for WordPress」の「インストール」を選択する
インストール後、「有効化」を選択する

2. AMPが正しく設定されたか確認する

記事URLの末尾に「/amp」もしくは「?amp」を付与してページを確認します。

例) 記事URLが、https://www.allinthemind.biz/excerpt/dairy/single-lens-film-beginners.html であれば、https://www.allinthemind.biz/excerpt/dairy/single-lens-film-beginners.html?amp とURLを変更して確認します。下記の画像は自動はこの例でAMP HTMLが自動で生成された画面です。

3. ツールを使ってテストする

GoogleのAMPテスト

https://support.google.com/webmasters/answer/7320015?hl=ja&ref_topic=4589289

「AMPテストを起動」を選択する
検証したいAMPのURLを入力する
「テストを実行」を選択する
AMPファイルとしてOKだが、エラーが表示されてしまったので、「構造化データをテスト」を選択する

「logo」フィールドの値は必須です。

「logo」フィールドの値は必須です。とエラー表示されているが、このエラーを放置してしまうと、Google検索結果の上部に表示されないらしい。それは困るので修正する。

修正するには、functions.php の中に2枚の画像を設定します。

functions.php: /**
* AMPの Google構造化データテストツールで「「logo」フィールドの値は必須です。」が表示された場合
*/
function amp_modify_json_metadata( $metadata, $post ) {
$metadata['publisher']['logo'] = array(
'@type' => 'ImageObject',
'url' => "https://www.allinthemind.biz/wp-content/themes/allinthemind/assets/amp.png",
'width' => "238px",
'height' => "60px",
);
$metadata['image'] = array(
'@type' => 'ImageObject',
'url' => "https://www.allinthemind.biz/wp-content/themes/allinthemind/assets/ogp.png",
'width' => "1200px",
'height' => "630px",
);
return $metadata;
}
add_filter( 'amp_post_template_metadata', 'amp_modify_json_metadata', 10, 2 );

画像のパスと画像の幅・高さは適時修正が必要。$metadata['publisher']['logo']の画像は、横600px以内、高さ60px以内である必要があるそうです。また、$metadata['image']の画像は、横659px以上である必要があるそうです。これは記事に画像がない場合に代替画像として使用されるそうです。

もう一度テストしてみると、無事にエラーが消えました！

以上でAMPの設定は終わり。続いてGoogleアナリティクスの設定。

1. GoogleアナリティクスでAMP用のプロファイルを作成する

Googleアナリティクスを開く。

「管理」を選択する
すでにアカウントを作成済みであれば、該当のアカウントを選択する。はじめてGoogleアナリティクスを利用する場合は「アカウントを作成」を選択する
AMP用に「プロパティを作成」を選択する
必要項目を入力して「トラッキングIDを取得」を選択する
トラッキングIDは後ほどWordPressの管理画面で利用するのでコピーしておく

2. WordPressの管理画面でプロファイルIDを紐付けする

「AMP」を選択し、「Analytics」を選択する
Typeに任意のワードを入力する
JSONを入力するaccountの値は、Googleアナリティクスの設定で取得したトラッキングIDを入力する
{
"vars":{
"account":"UA-XXXXXX-XX"
},
"triggers":{
"trackPageview":{
"on":"visible",
"request":"pageview"
}
}
}
「Save」を選択する

3. Googleアナリティクスのリアルタイムでログが集計されることを確認する

Googleアナリティクスを開き、先に設定したプロパティのリアルタイムを開く
AMPファイルへアクセスし、ログが取得されることを確認する

これにて完了。