Web

AMP for WordPress プラグインを使って WordPressサイトをAMP対応する手順

投稿日:2018年7月12日 更新日:

1. AMP とは?

AMP というのは Accelerated Mobile Pages(高速化されたモバイルページ)の略で、Google が主導している モバイルページ高速化プロジェクト、またはこのプロジェクトによって提供されるAMP フレームワークを指します。

※ Google の紹介動画を見てみると、AMP は「エーエムピー」ではなく「アンプ」と呼ぶのが正しいようです。
※ AMP はモバイル専用というわけではありません。

AMP 公式サイト
AMP 公式サイト

なぜ、AMP が必要なのか?

近年ではスマートフォンやタブレットPCからウェブページを閲覧するユーザーが増えてきました。

しかし、スマートフォンやタブレットPC は通常のパソコンと比較してスペックが低いことが多く、ウェブページの表示に多少時間が掛かります。モバイル用に軽いページが用意されているウェブサイトもありますが、それでもまだ「高速に表示される」「一瞬で表示される」という状況にはなっていません。

これはウェブサイトの制作者に問題があるわけではなく、「今のウェブサイトの仕組み上、普通に作るとそうなってしまう」のです。本気で高速化するには、抜本的な仕様変更が必要です。

そこで、Google が始めたプロジェクトの1つが AMP です。

多少面倒なのですが、AMPフレームワークを利用して ウェブページを作ると「劇的に」表示速度が上がります(遅さの要因となる機能が制限されるので当然ですが)。

表示速度が上がればウェブがより快適な環境となり、誰にとってもメリットがあります。

また、ウェブサイトの運営者にとっては、表示速度が遅い原因でウェブサイトから離脱されてしまうことを防ぐことができます。それに、Google検索の結果順位にはウェブサイトの表示速度も評価の対象になるそうなので、SEOの視点から見ても、表示速度が重要な指標の1つとなります。

とはいえ、個人レベルであれば正直なところ「高速化が必要だ!」とまでは思わないでしょう。ところが、Google は違います。Google という企業はインターネットから莫大な収益を上げていますので、このままウェブが遅くて不便なままであるというのは企業の根幹に関わる問題なのです。ウェブサイトが遅いために離脱されてしまうと、AdSense 広告が見てもらえなくなってしまいます。「もっと速いページを探して見よう」と考えてくれるユーザーばかりならまだ良いですが、「どこ見ても遅いから、ウェブサイトはもう見ない。検索アプリか紙広告を見よう。」となってしまうと困ります。Google にとってウェブはより速く、より便利であり続けることが重要なのです。AMP の公式ページを見ると、広告を載せているウェブサイトの運営者に対して、「離脱率を下げないようになります!」というメリットを説明していますが、これは Google にとっても同じことが言えるのではないでしょうか。

AMP フレームワーク

AMP フレームワークの三大要素は以下となります。

1. AMP HTML
2. AMP JS
3. AMP キャッシュ

1. AMP HTML

AMP に対応したウェブページは 基本的に通常の HTML で記述することができますが、独自の HTMLタグやルールがあったり、一部使えない要素があったりします。これらは全て表示速度を高めることを目的としています。この HTML のことを AMP HTML といいます。

AMP HTML の仕様はこちらです。➡ AMP HTML 仕様 – AMP

2. AMP JS

AMP JS は、AMP が用意している JavaScriptライブラリです。AMP に対応したページでは、最初にこの JavaScriptファイルが読み込まれ、高速なレンダリングを実現します。

3. AMP キャッシュ

AMP ページは自動的にキャッシュされ、Google などが用意した CDN (コンテンツデリバリネットワーク) によって配信されます。これにより、ウェブブラウザが要求されたページが高速で返されます。

その他

  • 基本的には、静的ページに対する高速化を行います。
  • JavaScript で何か処理をやっているようなページは対象外です。

2. AMP for WordPress プラグインについて

AMP for WordPress というプラグインを使うと、WordPress サイトを簡単に AMP 対応することができます。

他にも同じ目的のプラグインがあるようですが、AMP for WordPress は、Automattic や Google が開発に参加しているので安心感がありますし、あまりゴテゴテした実装になっていないため、手軽に AMP対応することができます。

※ Automattic は、WordPress.com を運営していたり、Jetpack という有名な WordPressプラグインを開発している企業です。

AMP for WordPress
AMP for WordPress

基本的な動作

AMP for WordPress プラグインを導入すると、各投稿ページに対して「AMP対応版ページ」が自動的に生成されます。

例えば、

https://example.com/foo/

というページがあった場合、

https://example.com/foo/amp/

という URL で、AMP対応版ページが生成されます。(※ URLに、?amp を付加するやり方もあります。)

この時、通常ページの <head>...</head> 内には AMP対応版ページのURL情報が埋め込まれます。

<link rel="amphtml" href="https://example.com/foo/amp/">

逆に AMP対応版ページの<head>...</head> 内には通常ページのURL情報が埋め込まれます。

<link rel="canonical" href="https://example.com/foo/" />

こうやって、お互いがリンクされます。

基本的にはこれだけです。

通常のページと、AMP対応版ページの比較

百聞は一見に如かずということで、「通常のウェブページ」と、「AMP for WordPress が自動生成したAMP対応版ウェブページ」を見てみましょう。

まずは、通常のページです。

通常ページ
通常ページ

このページが AMP対応されると以下になります。

AMP対応ページ
AMP対応ページ

通常ページを少しスクロールしてみました。

通常ページ(少しスクロールしたところ)
通常ページ(少しスクロールしたところ)

AMP対応ページで同じ位置を表示したのが以下になります。

AMP対応ページ(少しスクロールしたところ)
AMP対応ページ(少しスクロールしたところ)

どうでしょうか? かなり シンプルな表示 になっていますよね。

AMP のことを全く想定していない記事(コンテンツ)を、無理やり AMP 対応にしていますので、元のページのスタイルを維持するのは難しいでしょう。テーマのスタイル (style.css など) は、AMP の仕様を想定していないでしょうから、そのまま全部自動的に適用するわけにもいかないのだと思われます。

そもそも 普通の HTML の機能を制限して表示速度を上げたものが AMP HTML なので、その意味でも表現力は落ちるのです。

少し制限はあるものの CSS は使えますが、あまり装飾を増やしてしまうと、せっかく AMP で高速化しているのにそれに逆行してしまう気もします。

とはいえ、最低限追加しておきたいスタイル(CSS)は追加するべきです。追加方法は、後述します。

Google 検索の結果

AMP for WordPress プラグイ導入後、Google 検索のクローラーが「通常のページ」をクロールした際には、埋め込まれている AMP対応版ページのURLを取得してそちらもクロールします。これが検索結果の表示やその順位にも影響するようになります。

下画面はスマートフォンの Chromeブラウザで Google検索し、本サイトの記事が表示されたところです。

モバイル環境での Google検索結果画面
モバイル環境での Google検索結果画面

本サイトはAMP対応していますので、AMPのマーク(稲妻)が表示されています。

以下は、この検索結果のリンクをクリックした後の画面です。

Google検索結果のリンクをクリックして記事を見たところ
Google検索結果のリンクをクリックして記事を見たところ

本サイトのコンテンツが表示されていますが、アドレスバーには https://google.com というドメインが表示されています。ここではURLが最後まで表示されていませんが、実際のURLは以下です。

https://www.google.com/amp/s/laboradian.com/win10-change-net-public-private/amp/

つまり、これは本サイトである laboradian.com のウェブサーバーからコンテンツを取得しているのではなく、Google が用意した CDN サーバーがキャッシュしたコンテンツを取得して表示しているのです。

このように、CDNからの配信による「ページ取得の高速化」と、AMP HTML と AMP JS による「ページの描画の高速化」の二重の高速化により、瞬時にページが表示されます。

3. プラグインのバージョン

本ページで扱う各プラグインのバージョンは以下となります。

  • AMP for WordPressのバージョン: 0.7.2
  • Glue for Yoast SEO & AMP のバージョン: 0.4.3

4. AMP 対応手順

では、AMP for WordPress プラグインを使った AMP対応手順を説明します。

1. AMP for WordPress プラグイン をインストールする

まずは、「AMP for WordPress」プラグイン をインストールします。

AMP for WordPress
AMP for WordPress

次に、「Glue for Yoast SEO & AMP」プラグインをインストールします。

これは、「AMP for WordPress」プラグインをカスタマイズするためのプラグインです。Yoast SEO という有名なプラグインが既にインストールされていることを前提としています。
今回は、カスタマイズ作業でラクをしたいので導入しますが、本ページで紹介するカスタマイズの内容であれば、このプラグインがなくても手動で可能だと思います(functions.php への記述で代行できるでしょう)。

Glue for Yoast SEO & AMP
Glue for Yoast SEO & AMP

2. AMP の設定を行う

AMP for WordPress プラグインの設定

AMP for WordPress プラグイン のメニュー項目は、以下のように「General」と「Analytics」の2つ用意されています。

AMP for WordPress のメニュー
AMP for WordPress のメニュー

General のページは以下のようになっており、このままにしておけばよいでしょう。

AMP for WordPress の General ページ
AMP for WordPress の General ページ

Analytics に関しては Glue for Yoast SEO & AMP プラグインの設定ページを使うので、何も設定しません。

Glue for Yoast SEO & AMP プラグインの設定

Glue for Yoast SEO & AMP プラグインの設定メニューは、Yoast SEO プラグインのメニュー内の「AMP」という部分にあります。

Glue for Yoast SEO & AMP プラグインのメニュー
Glue for Yoast SEO & AMP プラグインのメニュー

「AMP」のページでは、画面上部に「Post types」「Design」「Analytics」という3つのタブがあります。

まず、「Post types」タブは以下のような画面になりますが、特に何もする必要はないでしょう。

「Post types」タブ
「Post types」タブ

「Design」タブでは、デザインに関する設定項目がいろいろと用意されています。特に必須な項目があるわけではないようですが、「Extra CSS」という項目は入力することをお勧めします。

「Design」タブ
「Design」タブ

WordPress では style.css ファイルに記述したスタイルが適用されますが、AMP for WordPress で生成される AMP対応版ページにはこのスタイルは適用されません。ですので、そのままにしているとスタイルが無さ過ぎてあまりに無味乾燥な見た目になってしまいます。ここで、最低限必要になるスタイルを入力しておきましょう。

「Extra CSS」
「Extra CSS」

「Analytics」タブでは、Google Analytics 用のトラッキングコードを入力します。

「Analytics」タブ
「Analytics」タブ

これは書式が決まっており、以下のコードをセットします。

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>

「UA-XXXXX-Y」のところには、そのウェブサイトのトラッキングIDをセットしてください。

※ 詳細は、「AMP ページにアナリティクスを追加する  |  AMP ページ向けアナリティクス  |  Google Developers」を参照してください。

3. AMP対応しない記事は除外する

AMP は基本的には 静的なページ の高速化を行います。JavaScript も原則として動きません。そのため、AMP対応してはいけない記事も中には出てきます。

AMP for WordPress では、記事毎にAMPの有効/無効を切り替えられるようになっていますので、少し面倒ですが、除外したい記事がある場合は 1つ1つ無効にしていきましょう。

具体的には、記事の編集画面の以下の箇所に「AMP」の項目が表示されていますので、「Disabled」にチェックを入れて [OK]ボタンを押します。その後、更新しておきます。

記事に対してAMPを無効にする
記事に対してAMPを無効にする

4. 表示の確認

自動で生成される AMP対応版ページを見てみましょう。

どれか「記事」のページをウェブブラウザで表示するのですが、URLの末尾に、/amp/ もしくは ?amp を追加してアクセスすると、そのページの AMP対応版ページが表示されます。

https://example.com/foo/

https://example.com/foo/amp/

とか、

https://example.com/foo/

https://example.com/foo/?amp

といった要領です。

※ URLに /amp/?amp を付けると AMP用ページが表示されるというのは、AMP for WordPress プラグインの仕様です。AMPの仕様ではありません。

以下のように、それっぽいページが表示されましたでしょうか?

AMP対応版ページの例
AMP対応版ページの例

5. ブラウザでエラーが発生しないか検証する(バリデーションチェック)

では、見た目では分からない部分で内部的なエラーが発生していないかどうかをチェックしてみましょう。

そのため、今度はURLの末尾に「#development=1」を追加してアクセスしてみます。

https://example.com/foo/amp/#development=1

とか、

https://example.com/foo/?amp#development=1

といったURLになります。

その際、Chrome や Firefox ブラウザであれば(Windowsの場合)、Ctrl + Shift + i キーを押すとデベロッパーツールが表示されますので、その中にある「Console(コンソール)」をクリックしておきます。

では、アクセスしてみましょう。

問題なし!
問題なし!

上記のように、「AMP validation successful.」と表示されれば異常はありません。

もしエラーが出力された場合は、エラーメッセージをよく読んで対応します。

以下の公式ドキュメントも参考にしてください。

5. AMP 検証ツールで問題がないかチェックする

AMP 検証ツール(The AMP Validator) を使って、ページを検証することもできます。

AMP 検証ツール
AMP 検証ツール

以下の手順で簡単に使うことができます。

  1. URL欄に、AMP対応版ページのURLをセットします。
  2. 「VALIDATE」ボタンをクリックして検証を実行します。
  3. 結果が表示されます。

エラーがあった場合は、行毎に問題点が指摘されますので、1つ1つ対応しましょう。

※ このツールは、AMP ページを検証する – AMP でも紹介されています。

7. 構造化データ テストツール(Google Structured Data Testing Tool)でチェックする

構造化データ テストツール でAMP用ページの問題点をチェックします。

こちらも簡単に使うことができます。

  1. URLをセットします。
  2. 「テストを実行」ボタンをクリックします。
構造化データ テストツール
構造化データ テストツール

以下のように、「エラーなし 警告なし」という結果であれば問題ありません。

構造化データ テストツールの結果:問題なし
構造化データ テストツールの結果:問題なし

今回、以下のエラーに遭遇しました。

構造化データ テストツールの結果:問題あり
構造化データ テストツールの結果:問題あり

この問題は、WordPress の管理サイトから「カスタマイズ」-「サイト基本情報」-「サイトアイコン」を設定すると解消しました。

サイトアイコンの設定
サイトアイコンの設定

8. AMP テスト – Google Search Console

AMP テスト – Google Search Console は、Google の検索結果ページにも関わるテストを行うことができます。

先ほどと同じような操作でテストを実行します。

  1. URLをセットします。
  2. 「テストを実行」ボタンをクリックします。
AMP テスト
AMP テスト

以下のように「有効なAMPページです」と表示されると、このページは Googleの検索結果上で AMPのページとして扱われます。

AMP テスト 結果
AMP テスト 結果

この画面上の各リンクに関して簡単に説明します。

「GOOGLEに送信」リンク

ここをクリックすると、このページが Google の検索結果の対象として登録することができます。

「検索結果をプレビュー」

ここをクリックすると、Google 検索結果ページでの見え方を確認することができます。

「省略可能な値を探す」リンク

ここをクリックすると、先程の「構造化データ テストツール」でのテストが実行されます。

それから、今回のように AMP対応版のページを後から追加したのだけど、間違えて元のURLをテストしてしまった場合は、ちゃんとそれを検知して知らせてくれます。

AMPへのリンクを検知したところ
AMPへのリンクを検知したところ

全く AMP のページになっていない場合は、以下のように表示されます。

AMP ページではない場合の表示
AMP ページではない場合の表示

9. Search Console でもエラーが発生していないかチェックする

Google の Search Console 内にも、AMP のページがあります。

以下は、旧版の Search Console 画面です。

[Search Appearance] – [Accelarated Mobile Pages] メニューを開いてみましょう。

作成したAMP対応版ページが Google に認識されているか、ここでチェックすることができます。

Search Console の AMP ページ
Search Console の AMP ページ

5. AMP for WordPress プラグインのカスタマイズ

AMP for WordPress プラグインは、templates というディレクトリを持っており、この中にテンプレートファイルが配置されています。

小テーマを使っている場合、その小テーマのディレクトリ内に、amp という名前のディレクトリを作成し、その中にテンプレートファイルを配置すると、AMP for WordPress プラグインのテンプレートファイルよりも優先して読み込まれるようになります。

ですので、例えば AMP対応版「記事」ページの見た目を変えるには、templatesディレクトリ内の single.php ファイルを小テーマの amp ディレクトリにコピーして編集することで可能です。

参照

6. Google AdSense について

AMPページに、Google AdSense の広告を貼る場合は、AMP 対応広告ユニットの作成方法 – AdSense ヘルプ にある手順に従えばよいです。

大まかには以下の手順となります。

(1) Google AdSense の広告ユニットを作成する。

広告ユニットを作成し(広告サイズには「レスポンシブ」を選択します)、生成された広告コードの中から、以下の2つをメモしておきます。

  • サイト運営者 ID(data-ad-client)
  • 広告ユニット ID(data-ad-slot)

(2) AMPページの <head></head>タグ内に以下を追記します。

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

この記述により、AdSense広告を表示するために必要な JavaScriptコードを読み込みます。

(3) AMPページに、広告コードを挿入します。

AMP用の広告コードは以下のフォーマットに決まっています、先程メモした「data-ad-client」と「data-ad-slot」をセットして、広告を表示されたい部分に貼り付けます。

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

AMP for WordPress プラグインの注意点

AMP for WordPress プラグインを使っている場合、上の手順(2)に関して注意点があります。

AMP for WordPress プラグインは、本文内に <amp-ad>タグを見付けると、手順(2)のコードを自動的に追加してくれるのです。この JavaScriptファイルを2回読み込むとエラーが発生してしまいますので注意しましょう。

そして、これはあくまで「本文内」です。記事のヘッダ部やフッタ部に<amp-ad>タグがあっても自動挿入されません。

参考

7. Google 検索結果から AMP コンテンツを削除する方法

AMP対応を止めたい場合、Google 検索結果から AMP コンテンツを削除するにはどうすればよいのでしょうか?

ここでは、対応方法について書いてあるページへのリンクを貼っておきます。

※ Google 検索結果から削除するだけでなく、CDN サーバーからキャッシュを削除する方法も必要です。

8. おわりに

AMP 自体が先行き不透明なものですので、わざわざ手動で AMP用ページを制作するというのは、学習コストも含め、労力が無駄になる可能性があります。

そのため、現在のところは「ツールで簡単に対応できるなら対応しておこう」というスタンスが一番現実的なのではないかと思います。

WordPress サイトの場合は、今回紹介した AMP for WordPress のようなプラグインがあるので、最低限の使い方だけ勉強して導入してしまうのが良さそうです。

今回の対応により、1つの記事であっても 通常版AMP版 の2種類存在することになり、しかも CDNサーバーにコンテンツがキャッシュされてしまうという変化が起きます。これに対し、「管理がいろいろと面倒になる」「何を見せているのかを把握し辛くなる」などのマイナス面はあるでしょう。

とはいえ、やってみないと分からないことがあるのも事実です。是非一度トライしてみてください。

📂-Web
-

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

DokuWiki

DokuWiki: Layout Switcher Plugin

DokuWiki用プラグイン「Layout Switcher Plugin」のページです。 目次1. 概要2. インストールと設定(1) プラグインファイルのダウンロード(2) プラグインをサーバーに …

Web Programming

Webプログラミングのための Web入門

この記事では、Webプログラミングで必要になる Webの知識をご紹介します。 目次1. インターネット2. インターネットを土台として存在するプロトコル3. Web とは?4. URL5. HTML2 …

ただ今、本ウェブサイトを改造しています

現在、このウェブサイトを改造しています。 今回、WordPress の「Attitude」というテーマを使ってみたのですが、評判が良いだけあって使いやすいです。デザインがすっきりしていてシンプルなのも …

Chrome

Google Chrome 68 で、HTTPS非対応のマークが変わりました

目次1. Chrome 68 がリリース2. 以前のマーク3. Chrome 68 以降のマーク4. ついでに、https にしてアクセスしてみる5. おわりに 1. Chrome 68 がリリース …

Firefox

Firefox のコンテンツブロッキング (Enhanced Tracking Protection)

Firefox の コンテンツブロッキング 機能について説明します。