WordPressでプラグインでAMP対応するには？メリット・デメリットは？

あなたのWebサイトにはAMPが導入されているでしょうか？

AMPを導入することによって、モバイルページの表示速度を高速化させることができます。AMPを導入すると、モバイルページの表示速度が約4倍になるとも言われています。

そこで今回は、「AMPとは何なのか」、「AMPをどうやって導入するのか」といったことをお伝えしていきます。AMPを導入しようか迷っている方には特に読んでもらいたいです。

ワードプレスのおすすめプラグインまとめはこちら

AMP（Accelerated Mobile Pages）とは？

（amp公式サイトより）

AMP（アンプ）とは、GoogleとTwitterで共同開発されているモバイル端末でWebページを高速表示するためのプロジェクト、またはそのためのフレームワーク（AMP HTML）のことです。（SEO HACKSより）

簡単に言うと、「モバイル端末でWebページを高速表示できる仕組み」のことです。（「AMP」を日本語に訳すと、「加速化モバイルページ」となります。）

AMPは2015年にプロジェクト公開され、2016年10月からはスマホでの検索結果にもAMP対応が始まりました。

Google Chromeのスマホ検索結果では、次のように表示されています。

AMPの仕組み

AMPは、3つの要素から成り立っています。この3要素を使って、モバイル端末でページを高速で表示しているのです。

• AMP HTML（ページを高速で表示させるための制約が設けられているHTML）
• AMP JS（AMP HTMLの出力を高速化するライブラリ）
• Google AMP Cache（取得したAMPのページをキャッシュする）

具体的なAMPの仕組みとしては、次のようになります。

仕様を限定する

AMPでは、JavaScriptを使うことはできません。

どうしてもJavaScriptを使用したい場合は「AMP JS」というAMPが定義しているJavaScriptのライブラリを使う必要があります。

AMP JSを使ってJavaScriptの仕様を制限し、動画やアニメーションなどを瞬時にロードできるようにしています。

簡単に言うと、高速化する際に無駄なものをできるだけ減らそうとしているのです。このように、仕様を限定することで高速化しているのです。

キャッシュを利用する

AMPの仕様に沿って作成されたページは、GoogleやTwitterにキャッシュとして保存されています。

このキャッシュを利用することにより、読み込みにかかる時間を大幅に減らしているのです。

AMP化のメリットとデメリット

AMPのメリット

コンテンツが高速で表示される

先ほどもお伝えしたように、以下のような仕組みで高速表示されます。

• GoogleやTwitterのサーバーにキャッシュされる
• 「AMP JS」を使う

これによって読み込み時間が短縮され、モバイルページの高速表示が可能になります。

AMPが導入されていないWebサイトはリンクをクリックしてからサーバーに情報を取得しに行くので、どうしても時間がかかってしまいます。

通常の検索結果の枠とは別の枠で記事を表示させることができる

AMPを導入しているWebサイトは、Googleでのモバイル検索結果で表示されるカルーセル部分で記事を表示させることが可能です。投稿した記事が必ず表示されるとは限りませんが…。

カルーセル部分は、「アイキャッチ」と呼ばれる画像とタイトルが一緒に表示されます。そのため、他の上位表示されているWebサイトに比べて、目が届きやすくなり、多くの人がアクセスしてくれる可能性があります。

ユーザーのストレスを軽減できる

ページの表示速度が高速化されることにより、ユーザーが「遅い」と感じることは少なくなります。そのため、ユーザーが読むことへのストレスがなくなり、直帰率や離脱率を下げることができます。

AMPのデメリット

AMPを導入するまでに時間がかかる

AMPを導入するには、細かな設定が必要になるのですぐに導入するのは難しいです。AMPでは「AMP JS」を使うことに加えて、禁止されているタグが多いです。

例えば、画像を入れる際に使う「imgタグ」は「amp-imgタグ」を利用しなければならないため、HTMLも修正する必要があります。

他にもhtml要素に「amp」という属性をつけることが必要になります。

AdSense広告が表示されない

独自ドメインでWebサイトを持っている方であれば、Google AdSenseなどの広告を貼っている場合も多いでしょう。

しかし、AMPはJavaScriptの使用が制限されるので、このままでは広告は表示されません。広告を表示する場合は「amp-ad」というタグに変更する必要があります。

AdSense広告を表示する方法については後ほど詳しく説明します。

デザインが崩れてしまう

AMPを導入することによって、デザインが崩れてしまうことがあります。バグのように表示されてしまうこともあるので、注意が必要です。

AMPを導入した際には、崩れたデザインを修正することも必要になります。

WordPressのプラグインでAMP化する方法

ここからはプラグインでAMP化する方法をお伝えします。プラグインを使うことで、AMP化させることは可能です。

しかし、記事本文以外の要素が削られてしまうことがあるので、プラグインを入れるだけでなく、Webサイトのデザインに合わせてカスタマイズすることが必要になります。

ここでは、以下の4つのプラグインについて紹介します。

AMP

このプラグインは、AMP公式サポートページでも紹介されているプラグインです。プラグインをインストールして有効化するだけで簡単にAMP化することができます。

難しい設定は一切ありませんが、機能はWebサイトをAMP化するための機能だけになっています。

AMP化されたページは、「http://○○○/amp/」か「http://○○○?amp=1」にすることで表示されます。もし、レイアウトが崩れていた場合はプラグインを構成している「template.php」でレイアウトを編集しましょう。

facebook instant articles & google amp pages by pagefrog

先ほど紹介した「AMP」は、AMP化することしかできません。また、「Google Analytics」を使ったアクセス解析や、「Google AdSense」などの広告も削除されてしまいます。

ですが、このプラグインを併用することで「Google Analytics」を使ったアクセス解析や、「Google AdSense」などの広告表示ができるようになります。その他にも「AMP」で生じたエラーを解消して、デザインの調整もしてくれます。

Glue for Yoast SEO & AMP

このプラグインは、SEO対策として「Yoast SEO」という別のプラグインを入れている場合のみ、必要になります。それ以外の場合にインストールして有効化しても使うことはできませんので注意しましょう。

簡単に言うと、AMPのために作られた「Yoast SEO」のアドオンプラグインです。これによって、Yoast SEOで設定した組織の名称やロゴなどのデータをAMPページのデータに反映してくれるのです。

このプラグインは設定が一切ないので、インストールして有効化するだけですぐにAMP化することができます。

AMP for WP – Accelerated Mobile Pages

このプラグインは、別のプラグインと併用することなく、AMP化することができます。設定では、以下の項目が設定できます。

• ロゴの設定
• Google AdSense広告の設定
• ソーシャルリンクの設定
• Google Analyticsの設定

このように細かな設定も可能です。ロゴが設定されていないと、AMPチェックでエラー表示されるので、必ず設定しておきましょう。

プラグインなしでAMP化する方法

先ほどはプラグインを使ってAMP化する方法をお伝えしてきました。しかし、プラグインなしでAMP化することも可能です。

プラグインを使わずにAMP化するためには、以下のような手順で行います。

1. PHPコードで通常のページとAMPページでの振り分け機能を追加する
2. headタグとmetaタグの振り分ける
3. canonivalタグを設定する
4. amphtmlを設定する
5. viewportを設定する
6. AMP用のJavaScriptライブラリを読み込む
7. Schema.orgの設定をする
8. CSSの設定をする
9. amp-boilerplateを読み込む

このように9つの手順が必要になります。

また、HTMLやCSSだけでなく、PHPも使っていくことになります。PHPでの条件分岐を行うので、PHPの知識も必要になるので、難易度は非常に高いです。

初心者の方でどうしてもAMP化したいという場合は、プラグインを使うことをおすすめします。

AMPのカスタマイズ方法

AMP化できるプラグインを有効化すれば、あなたもWebサイトもすぐにAMP化できます。

簡単にできるのは良いのですが、思い通りのデザインやレイアウトが崩れてしまうことが多いです。それを修正するためにカスタマイズが必要になります。

カスタマイズしないと、以下のようなことが起こってしまいます。

• レイアウトが崩れる
• デザインの色がWordPressのデフォルトの青色になってしまう
• Google Analyticsが使えない
• Google AdSenseが表示できない

このようなことが起こってしまいます。せっかくきれいなデザインに仕上げたWebサイトがスマホなどのモバイル端末では単純なデザインでしか表示されていないのは、非常にもったいないです。

なので、少し手間はかかりますが、カスタマイズすることをおすすめします。ここでは、AMPのカスタマイズをするための流れを簡単に紹介しておきます。

手順としては以下のようになります。

1. テーマフォルダの中に「amp」という名前のフォルダを作る
2. 「amp」フォルダの中に「header.php（ヘッダー）」、「single.php（個別投稿）」、「footer.php（フッター）」の3つのファイルを作る
3. 「amp」フォルダの中に「style.php」を作る（これでオリジナルのCSSが適用できます。）

この3つの手順を踏んでいく必要があります。

基本的には、レイアウトやデザインに関するカスタマイズは「style.php」に記述しましょう。Google AdSenseなどのそれぞれの投稿ページに出力する必要があるものは、「single.php」に記述していきます。

AMPに対応するテーマ＆テンプレート

ここでは、AMPに対応しているテーマを3つ紹介します。

Simp

（simpデモページ）

「Simp」は、無料で開発されているWordPressのテンプレートになります。あなたがデザインしたページを元にしてAMPページを作成してくれます。

画像なども自動で「amp-img」タグに置き換えてくれるなど非常に便利になっていますので、面倒な手間は必要ありません。

Sentry

（sentryデモページ）

「Sentry」は、無料のWordPressのテーマです。WordPressのAMPプラグインをインストールして有効化するだけで、独自のAMPページを生成してくれます。

他にも人気記事や、SNSにシェアするためのボタンを自動的に表示してくれます。

このテーマでカスタマイズをすることで、Google AnalyticsやGoogle AdSenseも設置することが可能です。

AWESOME

（AWESOMEテーマページ）

「AWESOME」は、無料のWordPressテーマです。すでにメニュー表示してくれるハンバーガーメニューが実装されていて、使いやすくてきれいなデザインになっています。

また、SNSのシェアボタンやGoogle Analyticsが簡単に導入できるなど便利な機能が多いのも特徴です。

AMP化でエラーが発生したときの対処

エラーは、 AMP化している際によく起こってしまいます。

しかし、このエラーをそのままにしていると、AMP化されたページが表示されないなどトラブルの原因にもなります。また、ユーザーが使いにくいようなページになってしまうこともあります。

AMP化したページを公開する前には必ずエラーのチェックやエラーの対処をしておきましょう。エラーを発見する方法としては以下の2つの方法があります。

• Google Chromeのデベロッパーツールで確認する
• The AMP Validatorを使って確認する

Google Chromeのデベロッパーツールで確認する場合

自分でWebサイトを作ったことがある方なら「デベロッパーツール」は使ったことがあるでしょう。（デベロッパーツールを出力したいページで右クリック→「検証」）

以下のようにエラーの発見をします。

• Google Chromeでエラーチェックをしたいページを開く
• 開いたページのURLの後ろに「#development=1」を追記する（例．https://www.rbbtoday.com/webcode/#development=1）

これでエラーがデベロッパーツールの「Console」に表示されます。エラーがない場合は、「AMP validation successful.」と表示されます。

エラーがある場合は、エラーの原因とそのリンクが警告として表示されます。

The AMP Validatorを使って確認する

「The AMP Validator」は、「AMP Project」が公式に提供しているサービスです。このサイトにAMP化したURLかソースコードをコピーします。

すると、エラーが出力されます。コードをいちいちコピペするのは少し面倒ですが、どこでエラーが起こっているのかわかりやすく表示されます。

エラーがない場合は、「Validation Status」がPASSと表示されます。エラーがある場合は、Validation StatusがFAILと表示され、該当している部分に原因が表示されます。

AMPページにAdSense広告を貼る方法

AMP化したページには限られたタグやコードしか使えません。そのため、AMP化したページにGoogle AdSense広告を表示するには、「amp-ad」というタグを使う必要があります。

ここでは、AdSense広告を貼る方法について紹介します。すでにAMP化されていて、AdSenseの利用登録が済んでいることを前提として説明していきます。

手順としては以下のようになります。

1. AMPにAdSenseを貼るためのライブラリを読み込む
2. Google AdSenseでレスポンシブの広告ユニットを作成する
3. 任意の場所にAMP用の広告コードを設置する

AMPにAdSenseを貼るためのライブラリを読み込む

AMPにAdSenseを設置する場合はamp-adライブラリを読み込む必要があります。

headタグの中に下のようなコードを記述します。記述する場所としては、「single.php」の「meta name」の下に記述しておけばOKです。

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

Google AdSenseでレスポンシブの広告ユニットを作成する

Google AdSenseの「広告の設定」→「広告ユニット」でレスポンシブ広告ユニットをAMP用に作成します。

次に広告ユニットのコードを確認します。以下のようなコードが表示されていると思います。この中の「data-ad-client」と「data-ad-slot」の2つの情報を後で使うので、どこかにメモしておきましょう。

ちなみに、「data-ad-client」は、Webサイト運営者のIDを示しています。別のWebサイトでも運営者が同じであれば、IDは変わりません。ですが、「data-ad-slot」は広告ユニットごとに変わってきますので、間違えないようにしましょう。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"

     style="display:block"

     data-ad-client="ca-pub-XXXXXXXXXXXXXXX"

     data-ad-slot="YYYYYYYYYYY"

     data-ad-format="auto"></ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

 

任意の場所にAMP用の広告コードを設置する

自分の好きな場所にAMP用の広告コードを設置していきます。サイズは自由に設定できますが、AdSenseの公式ページでは以下のような記述があります。

場合によっては規約違反になることもあるので注意しましょう。

• ファーストビューのときは高さ100pxにする
• ファーストビューでなければ、300px×250pxがおすすめ

高さ100pxにする場合は、layoutに以下のように記述します。

<amp-ad

layout="fixed-height"

height=100

type="adsense"

data-ad-client="ca-pub-XXXXXXXXXXXXXXX"

data-ad-slot="YYYYYYYYYYY">

</amp-ad>

300px×250pxにする場合は以下のように記述します。

<amp-ad

layout="fixed-height"

height=100

type="adsense"

data-ad-client="ca-pub-XXXXXXXXXXXXXXX"

data-ad-slot="YYYYYYYYYYY">

</amp-ad>

AMPに関するまとめ

いかがでしたか？

今回はWordPressのサイトをAMP対応する方法についてお伝えしました。AMP化することでスマホなどのモバイル端末でも高速で表示してくれます。

ですが、プラグインを使ってAMP化するにしても設定やカスタマイズは手間がかかります。「表示速度があまりにも遅すぎてどうにかしたい」という方であれば、やってみても良いでしょう。

最後まで読んでいただき、ありがとうございました。