AMP for WordPressプラグインを使ってAMPに対応した手順

GoogleのSpeed Updateに絡んでAMPが話題になっています。

ページの読み込み速度をモバイル検索のランキング要因として用いる “Speed Update”（スピード アップデート）を Google は今月導入する予定です。

Speed Update は、本当に遅いページだけが影響を受けるアルゴリズムだと思われていました。
しかしながら実際には、速ければ速いほど評価が上がるアルゴリズムになっているようです。
https://www.suzukikenichi.com/blog/the-faster-you-can-make-your-pages-the-more-speed-uptate-can-take-that-into-account/

AMPとはGoogleが推奨・開発しているモバイル端末でウェブページを高速表示するためのプロジェクトです。2015年10月から立ち上がっているプロジェクトで、大手のニュースメディアなどはとっくに導入済みでしょうが、個人ブログでは特に必要性を感じなかったので導入していませんでした。

ところがここに来て、”Speed Updateは速ければ速いほどプラスに作用するアルゴリズム”であると分かり、個人ブログもAMPに対応した方が良いのでは？と話題になっています。

実際にAMPを導入することが最適かどうかはわかりません。AMPには様々な制限があり、仕様もそれなりに複雑です。

Speed Update についての補足です。
１）アナウンスしている通り「ユーザーに本当に遅い体験を提供しているようなページについてのみ影響し」ます。
２）それは遅さに応じて段階的に適用されます
３）今月ローンチ予定です。
もしすでに十分速いサイトの場合、改善しても特に何も変化は起きません。 https://t.co/JcReDliMGw

— 金谷 武明 – Takeaki Kanaya (@jumpingknee) 2018年7月3日

という訳で「速ければ速いほど評価が上がるアルゴリズム」というのは誤りだそうです。なのでAMPに対応したからと言って検索結果の順位が大幅に上がるということはないようです。

WordPressではプラグインで簡単に表示対応は出来ますが、デザインや機能面ではかなり簡素化されます。
このブログで使っているSANGOはAMPには標準機能では対応しておらず、プラグインか自力でAMP用のテーマファイルを作る必要があります。

ここではAMP for WordPressプラグインを使ってAMPに対応した手順を書き記します。作業の流れとして以下のようになります。

AMP for WordPressプラグインのインストール・設定

WordPress管理画面>プラグイン>新規追加から「AMP」と検索します。「AMP for WordPress」をインストール・有効化します。

AMPの設定

WordPress管理画面の左メニューに「AMP」という項目が表示されますのでそこから「General」に進みます。

投稿にチェックが入っていることを確認して保存します。

AMP Analytics OptionsでGoogleアナリティクスのAMPのトラッキングを設定する

管理画面のAMP>AMP Analytics OptionsではGoogleアナリティクスのトラッキングIDを設定することができます。

Type: googleanalytics

JSON Configuration:

{
  "vars": {
    "account": "UA-xxxxxxxx-x"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}

UA-xxxxxxxx-xには各自ご自身のトラッキングIDを入れて下さい。上記のように入力して保存します。

AMPの見え方を確認する

投稿記事URLの末尾に/amp/をつけるとAMPでの表示が確認できます。デザインを全くいじっていないので簡素な表示になっています。

デザインをカスタマイズ（配色のみ）

A

MP for WordPressプラグインではWordPress管理画面>外観>AMPまたはカスタマイズ>AMPからヘッダーの背景色など基本的な配色の変更ができます。

ここではテーマカラーのグリーンを設定しました。

AMPにGoogleAdSenseを表示するための設定をする

AMPには通常のGoogleAdSenseは表示されません。AMP用のというタグを使って表示する必要があります。

AMPページにタグ(AdSense)を入れたメモ（Automatic社のWordPressにAMP導入するプラグイン使っているとき）| Qiita

基本的には↑の記事の通りにやれば上手く行きました。以下手順を追って説明します。

AMP対応広告ユニットを作る

AdsenseヘルプのAMP 対応広告ユニットの作成方法に書いてる通りにAMP対応広告ユニットを作ります。
レスポンシブ広告ユニットを作って、data-ad-client=”ca-pub-xxxxxxxxx”,data-ad-slot=”xxxxxxxx”を下記の様に書き換えます。

<amp-ad width="100vw" height=320
  type="adsense"
  data-ad-client="ca-pub-xxxxxxxx"
  data-ad-slot="xxxxxxx"
  data-auto-format="rspv"
  data-full-width>
    <div overflow></div>
</amp-ad>

functions.phpでAMPスクリプトを挿入する

AMPでAdSenseを表示するにはAMP HTMLのheadの中にamp-ad表示用のスクリプト追加する必要があります。必要な記述をまとめましたので以下のコードを子テーマのfunctions.phpに追加すればOKです。

//Adsense-JS追加
add_action( 'amp_post_template_head', 'xyz_amp_add_tag_adsense_js' );

function xyz_amp_add_tag_adsense_js() {
?>
<!-- AMP Ad -->
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
<?php
}

// AdSense追加
add_action( 'amp_post_template_footer', 'xyz_amp_add_tag_adsense' );

function xyz_amp_add_tag_adsense() {
?>
<!-- Google Adsense -->
<amp-ad width="100vw" height=320
  type="adsense"
  data-ad-client="ca-pub-xxxxxxxx"
  data-ad-slot="xxxxxxxx"
  data-auto-format="rspv"
  data-full-width>
    <div overflow></div>
</amp-ad>
<?php
}

Google Adsenseのところに先程作った広告ユニットコードを入れて下さい。

参考：https://github.com/Automattic/amp-wp/blob/master/readme.md

AMP用のCSSを追加する

デフォルトのAMPのデザインだと簡素過ぎて読みにくいのでAMP用のCSSを追加します。以下の記事を参考にしました。

以下のコードをfunctions.phpに追加して下さい。/* AMP用CSSここから */と/* AMP用CSSここまで */の間にAMP用のCSSを入れます。デザインボックスやカエレバ・WPアソシエイトポストR2のデザインなど必要なCSSを追加して下さい。容量制限があるので記事に関係する部分のCSSだけで良いと思います。

//AMP用CSS追加
add_action( 'amp_post_template_css', 'xyz_amp_my_additional_css_styles' );

function xyz_amp_my_additional_css_styles( $amp_template ) {
    // only CSS here please...
    ?>


   /* AMP用CSSここから */
  /* AMP用CSSここまで */


    <?php
}

AMP用のCSSの書き方注意点

AMP用のCSSの記述には幾つかの制限があります。

参考:AMPページ用HTMLの書き方を調べてみました | MONOCHROME DESIGN : 東京都中野区東中野でホームページ制作・WordPressによるサイト制作を行うフリーランスデザイナー

!important が使えないことは要注意ですね。

AMPでGoogleFontやFontAwesomeを使う方法

AMPでもFontAwesomeneが使えました。以下のコードをテーマのfunctions.phpに追加します。

//AMP webフォントを追加
add_action( 'amp_post_template_data', 'my_amp_post_custom_add_fonts');
function my_amp_post_custom_add_fonts($data) {
    //デフォルト読み込みのフォントMerriweatherを削除
    $data['font_urls'] = array(
        'Josefin' => 'https://fonts.googleapis.com/css?family=Josefin+Sans',
        'FontAwesome' => 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
        // 使いたいフォントの名前とurlをここに追加
    );
    return $data;
}

サルワカさんの記事を参考にしています。

AMPの記述が正しいか確認

最後にThe AMP ValidatorでAMPの記述が正しいか確認しましょう。
記事URLの末尾に/amp/をつけて「URL」に入力し、「Validate」をクリックします。

以下のように「Pass」が出ていればOKです。

以上AMP for WordPressプラグインを使ったAMP対応の手順をまとめました。SANGO以外のテーマでも使えるやり方です。Affinger4やCocoonなどテーマの標準機能でAMP対応が出来る場合はプラグインではなくそちらを使って下さい。