こんばんは。Googleさんが2月25日より検索結果でのAMP(Accelerated Mobile Pages)対応ページの表示を開始しました。このブログもいつかはAMP対応しないといけないかなぁと思っていたのですが、休みに思い切って対応させてしまいました。モバイル端末でのウェブサイト表示速度が大幅に高速化されて、さらにSEOの効果もあるそうです！

高速ブラウジングを実現するGoogleの「AMP」、日本でも検索結果にAMP対応記事が表示されるように

AMP対応で行ったこと

AMP（Accelerated Mobile Pages）とは何か？については、下記サイトに詳しく書いてあります。またGoogle先生に聞いてもたくさん教えてもらえるかと思います。なので、ここでは詳しくは書かないですが、AMP対応すると、モバイル端末でのウェブサイト表示速度が大幅に高速化されて、ググったときの検索結果の上部にカルーセル形式で表示されることもあるらしいですよ。

AMP(Accelerated Mobile Pages)ってなんで速いの。

WordPressのプラグイン

このブログはWordPressを使っているのですが、なんとAMPのプラグインがあるので、意外と簡単に対応できます！名前もそのまま「AMP」というプラグインです。
WordPressのAMPプラグイン

上記のAMPプラグインをプラグインの新規追加画面で検索、インストール、有効化します。すると、URLの末尾に/amp/を付けると、AMP対応されたページが表示されるようになりました。

例）
元のURL：https://takkaaaaa.com/review-acer-liquid-z530/
AMPページ：https://takkaaaaa.com/review-acer-liquid-z530/amp/

見てもらえるとわかりますが、AMPページでは記事本文以外のパーツ(関連記事など)は表示されず、必要最低限の表示になっています。また、CSSもAMPプラグインのものが使われるので、デザインも変わってしまいます。
※上記AMPページは後述するCSSの設定済みなので、普通にこのブログを見る時に近いデザインになっています。

CSSの設定

自分のテーマのCSSファイルを読み込むために、AMPプラグインの記事ページのテンプレートファイルを修正します。

/WordPressインストールディレクトリ/wp-content/plugins/amp/templates/single.php
を編集し、下記の赤字部分を追記しました。AMPではインラインCSSにする必要があるので、<style amp-custom>タグ内にincludeを使って読み込ませています。


<!doctype html>
<html amp>
<head>
～略～
<style amp-custom>
<?php $this->load_parts( array( 'style' ) ); ?>
<?php do_action( 'amp_post_template_css', $this ); ?>
/* add-start */
<?php include '/WordPressインストールディレクトリ/wp-content/themes/テーマ名/style.css';?>
/* add-end */
</style>
</head>

ここで注意点があって、AMPではCSSで!importantの使用が禁止されているということです。なので、事前に準備としてCSSを直して、!importantを使わないようにしておきたいですね。普段から!importantに頼ってコーディングしていると苦労します・・・。

Googleアナリティクス

AMPプラグインを有効化しただけでは、AMPページでGoogleアナリティクスが有効になりません。なので、ここでもCSSの設定のときと同じファイル(/wp-content/plugins/amp/templates/single.php)を修正し、下記の赤字部分を追記します。UA-XXXXXXXX-Xはご自分のものに置き換えてください。


<!--add-start-->
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
<!--add-end-->
</head>
<body>
<!--add-start-->
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXXXXX-X"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
<!--add-end-->

Googleアドセンス

AMPプラグインを有効化しただけだと、Googleアドセンスも表示されません。Googleアドセンスの配置は人それぞれだと思いますが、記事内部に入れている場合と、記事外部に置いている場合で修正する箇所が違います。

アドセンスを記事の外部に置いている場合は、AMPプラグインのテンプレート(/wp-content/plugins/amp/templates/single.php)のアドセンスを表示させたい場所に、下記を追記すればよいかと思います。widthとheightのところは広告の幅と高さの値を入れてください。

<amp-ad
type="adsense"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="YYYYYYYYYY"
width="336"
height="280">
</amp-ad>

アドセンスを記事本文中にアドセンスのコードをベタ書きしている場合ですけど、AMPのときは上記のコード、通常のページの場合は今までどおりのコードを出力するように分岐や置換をするしかないのかな。たぶん、functions.phpとかで頑張ればできると思うけど、難しいそう。。。

ちなみに、このブログでは動的にアドセンスのコードを記事中に挿入しています(最初のh2タグ、及び、最後のh2タグと置換)。なので、AMPかどうかを判定するための下記関数をfunctions.phpに作り、AMPの時は上記のようなAMP用のアドセンスコードを入れるように修正しました。

function is_Amp($the_content) {
//AMPチェック
$myAmp = false;
// $string = $post->post_content; //記事本文を$post->post_contentから取得する場合
$string = $the_content; //記事本文を関数の引数から取得する場合
//記事ページ、かつ、（URLの最後が「/amp/」、または、URLの後ろが「?amp=1」）
if(is_single()
&& (strlen($_SERVER["REQUEST_URI"]) - 5 === strpos($_SERVER["REQUEST_URI"], '/amp/')
|| $_GET['amp'] === '1')) {
$myAmp = true;
}
return $myAmp;
}

動作確認

動作確認はGoogle ChromeでF12を押して開発者ツールを起動して行います。AMPページのURLの後ろに「#development=1」を付けてアクセスすると、問題がない場合は「AMP validation successful.」、エラーがある場合は「AMP validation had errors.」とコンソールに表示されます。ちなみに私はCSSに!importantを使っていたのでここで怒られました笑。

GoogleのStructured Data Testing Tool(構造化データテストツール)でも不足している構造化データなどがわかります。

【2016/3/13追記】
当ブログは外部サイトからの画像直リンクを禁止する(404を返す)ように設定していたのですが、nginxのアクセスログを見ていると、画像ファイルやアイコンファイルなどに対して、「https://cdn.ampproject.org/」からのリファラでアクセスログがありました。こんな感じで。

72.14.xx.xx - - [13/Mar/2016:14:09:18 +0900] "GET /wp-content/uploads/2016/01/cropped-icon_before2-1-32x32.jpg HTTP/1.1" 404 136 "https://cdn.ampproject.org/" "Mozilla/5.0 (iPhone; CPU iPhone OS 8_3 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12F70 Safari/600.1.4 (compatible; Google-AMPHTML)" "-"

せっかくGoogle様のGoogle-AMPHTMLというbot？がうちのAMPページを見に来てくださったのに、画像ファイルに対して404を返してしまってました。Google様はiOS8.3のiPhoneのエージェントのフリをしてアクセスしてくるんですね。Google様申し訳ございません、お許しを～。m(_ _)m

というわけで、AMP対応をする際は、cdn.ampproject.orgからの直リンクは許可したほうが良いと思われます。例ですが、うちのブログのWebサーバーはnginxなので、

location ~ \.(jpg|png|gif|jpeg)$ {
　　log_not_found off;
　　expires 1y;
　　access_log off;
　　valid_referers none blocked server_names 自ドメイン(takkaaaaa.com)
　　　　　　　　　　　　　　　　　　　　　　　cdn.ampproject.org
　　　　　　　　　　　　　　　　　　　　　　　*.google.co.jp
　　　　　　　　　　　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　　　　　　　　　　　・;
　　if ($invalid_referer) {
　　　　return 404;
　　}
}
のような設定に修正(赤字部分を追加)することで、直リンクを許可するリファラにcdn.ampproject.orgを追加しました。

終わりに

以上がこのブログのAMP対応で行った内容になります。AMPは技術的なハードルが高いのかなと思っていましたが、WordPressのプラグインを使用したことにより、思ってたよりは楽になったと思います。ここで書いたこと以外にもAMP対応に必要なことはあると思うのですが、それらはプラグインがやってくれているのでしょうね。

今回は以下のサイトを参考にして、AMP対応しました。ありがとうございました。
いよいよ導入されるAMP（Accelerated Mobile Pages）の基礎知識から対応方法まで！まとめ
【WordPress】プラグイン無しでAMP（Accelerated Mobile Pages）に対応にする手順