WordPress のサイトを AMP に対応させる方法

WordPress のサイトを AMP に対応させる方法

· by · in

本サイトを AMP に対応させましたので、備忘録も兼ねて WordPress における AMP 対応方法を紹介します。

AMP とは？

AMP とは Accelerated Mobile Pages の略で、Google が主導している、スマートフォンなどのモバイル端末での Web ページの高速表示を目的としたオープンソースのプロジェクトです。
例えば、AMP 対応のページは以下のように、Google の検索結果で AMP 対応のマークが表示されます。

AMP の代表的な特徴は以下のとおりです。

  • AMP 対応の Web ページは Google の AMP キャッシュに保存される。
    => サイト訪問者は Google のサーバー (CDN) にアクセスし、ページが表示される。
  • 非同期の JavaScript のみを許可している。
    => スクリプトによってページのレンダリングが遅くなることがない。
  • イメージや広告などのリソースサイズを静的に決定している。
    => リソースの再読み込みがない。（一度のページの読み込みだけで済む）
  • 独自の HTML 様式を採用している。
    => 一般的な HTML より、効率的にタグを記載可能。

詳しい内容については AMP プロジェクトの公式サイト(https://www.ampproject.org/ja/)をご覧ください。
AMP 導入のためのチュートリアルから AMP 仕様を記載したドキュメントなどが詳細に紹介されています。

WordPress への AMP 導入方法

WordPress の記事を AMP 対応にする方法はプラグインの導入が最も簡単な方法でしょう。
代表的なプラグインは以下の 2 つかと思います。

  • AMP for WP
    特徴：AMP 対応ページの細かい設定が可能
  • AMP
    特徴：とにかくシンプルで、とりあえず AMP 対応化させれば良い人向け

双方ともプラグインを有効化するだけで、AMP 対応ページが作成されますが、特徴があるので自分にあったほうを使ってみてください。
当サイトでは「AMP for WP」を利用していますが、AMP 対応すればそれでいい方は「AMP」のほうがよいかもしれません。

それでは必要最低限だと考えられる AMP 導入までの方法を以下で紹介します。

1. プラグインのインストールと有効化

WordPress のプラグインのページから「AMP for WP」もしくは、「AMP」をインストールし、有効化しましょう。

2. AMP ページ用ロゴの設定

AMP ページにはロゴの設定が義務付けられています。
Google のガイドラインによるとロゴ画像の推奨サイズは「60 x 600 px」で、縦横どちらかが推奨サイズに沿っているほうが好ましいようです。

The logo should fit in a 60x600px rectangle., and either be exactly 60px high (preferred), or exactly 600px wide.
Google Search Guide より引用

また、JPG や PNG、GIF 等のベクター形式でない画像フォーマットで、アイコン単体ではなくサイトの名前が全て記載されており、背景が白もしくは明るい色のほうが好ましいようです。

ちなみに当サイトの AMP 用ロゴは以下を設定しています。

AMP  for WP

AMP for WP のロゴの設定は、専用の設定画面の「Getting Started」=> 「General」から設定します。

まずは、 AMP 用ロゴとして設定したい画像を WordpPress のメディアライブラリにアップロードします。
アップロードできたら、Logo の項目にアップロードした画像を設定します。

「AMP for WP」では推奨サイズがなぜか「190 x 36 px」になっています。このままでもよいですが、Google の推奨サイズに合わせたほうがよいので、「Custom Logo Size」の項目を「ON」にしてカスタムサイズを有効化しましょう。
ON にしたら、自サイト用の AMP ロゴ画像のサイズに合わせて、「Logo Width」、「Logo Height」に横と縦のサイズを設定しましょう。

AMP

AMP の場合は、WordPress に設定したサイトアイコンがそのまま AMP 用ロゴとして利用され、プラグインのソースを書き換えない限り、変更することができません。

もし、サイトアイコンを設定していない場合は、WordPress 設定の「外観」=>「カスタマイズ」=>「サイト基本情報」からサイトアイコンを設定しましょう。

3. Google Analytics のトラッキング設定

インストールした直後の状態では、AMP ページは Goolge Analytics のカウントの対象外になってしまうため、設定が必要となります。
自サイトのトラッキング ID （UA-XXXXXXXX-X）を設定しましょう。

AMP  for WP

AMP for WP の Google Analytics のトラッキング設定は、専用の設定画面の「Getting Started」=> 「Analytics」から設定します。

「Analytics Type」の項目を Google Analytics に設定し、「Google Analytics」の項目に自サイトのトラッキング ID （UA-XXXXXXXX-X）を設定しましょう。

設定後は、Google Analytics のページから、AMP ページがトラッキングできていることを確認します。

AMP

AMP の場合は、専用の設定画面の「Analytics」から設定します。

Type に「googleanalytics」を設定し、JSON Configuration に下記のコードを入力します。
なお、「UA-XXXXXXXX-X」の部分は、自身のトラッキング ID に置き換えてください。

{
  "vars": {
    "account": "UA-XXXXXXXXX-X"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}

設定後は、Google Analytics から、AMP ページがトラッキングできていることを確認します。

4. AMP ページのテスト

最後に、AMP ページがきちんと AMP の仕様に従っているかテストします。
プラグインを有効化すると、AMP ページの URL は以下のようになります。

http://ページの URL /amp/
例：https://macperson.net/imac-2017-custom-guide/amp/

Google が公開している、AMP テスト用のサイト にアクセスし、適当な自サイトのページの URL を入力して、テストしましょう。

「有効な AMP ページです」かつ「構造化データが有効なページ」になっていれば OK です。
もし、構造化データにエラーがあった場合は、Google 構造化データテストツールで、どの構造化データに不備があるか、チェックしましょう。

5. その他の設定（AMP ページのデザイン等）

必須の設定ではありませんが、「AMP for WP」は AMP ページのデザインや SNS の連携設定なども変更可能です。Page Builder も利用可能なので、好みのサイトデザインにすることが可能です。

こちらの設定方法等は別の記事で紹介したいと思います。

まとめ

以上のように、WordPress のページの AMP 対応化は非常に簡単です。ぜひ、あなたの Web サイトも AMP に対応させましょう。

 

Tags: ,