AMPとは？

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

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

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

導入の流れ

AMPの設定

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

Googleアナリティクスの設定

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

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

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

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

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

例) 記事URLが、https://www.simplesimplesdesign.com/excerpt/dairy/single-lens-film-beginners.html であれば、https://www.simplesimplesdesign.com/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

1. 「AMPテストを起動」を選択する
2. 検証したいAMPのURLを入力する
3. 「テストを実行」を選択する
4. 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.simplesimplesdesign.com/wp-content/themes/allinthemind/assets/amp.png“,
‘width’ => “238px“,
‘height’ => “60px“,
);
$metadata[‘image’] = array(
‘@type’ => ‘ImageObject’,
‘url’ => “https://www.simplesimplesdesign.com/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アナリティクスを開く。

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

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

1. 「AMP」を選択し、「Analytics」を選択する
2. Typeに任意のワードを入力する
3. JSONを入力するaccountの値は、Googleアナリティクスの設定で取得したトラッキングIDを入力する

   {
   “vars”:{
   “account”:”UA-XXXXXX-XX”
   },
   “triggers”:{
   “trackPageview”:{
   “on”:”visible”,
   “request”:”pageview”
   }
   }
   }

4. 「Save」を選択する

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

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

これにて完了。