【StaticPressも対応】WordPressのサイトを「AMP for WordPress」プラグインを使ってサクッとAMP対応しちゃおう【インストール/使い方】

What’s?

皆さんはAMPと言う言葉をご存じでしょうか？

AMPとは、Accelerated Mobile Pagesの略で、Googleが推進しているモバイルページを高速に表示させるための技術が適用されているページの事を指します。

こちらは2015年10月に、モバイルユーザーのUX向上を目的としてGoogleとTwitterが協力し、オープンソースプロジェクトとして発足しました。

では、このAMPにはどのようなメリット/デメリットがあるのでしょうか。

メリット

ページの表示速度アップ

ページの表示速度が約4倍ほど早くなると言われています。

これは、Google側でキャッシュを利用している点と、AMPページのデータ通信料量がとても少ない点を利用して実現しています。

さらに、このキャッシュに含まれる情報はAMPのルールに沿った厳しく制限されたミニマムなhtmlとCSSのみとなるため、必然的に少なくなります。

検索結果にAMP対応の表示が出る

こちらは直接的に何かに影響があるわけではないですが、Googleの検索結果にAMPに対応している事を表す表示が出るようです。

一般ユーザーにはあまり影響ないかもしれませんが、同業者でAMPの存在を知っているからは参考にしようとするサイト訪問が増えるかもしれませんね。笑

SEOに間接的に効果が出る可能性がある

AMP対応をしたからといって検索順位が上がることはありません。
しかし、表示速度が改善されるので間接的に順位が上がる可能性はあります。

デメリット

修正が必要

AMPを利用するには、通常のHTMLとは別のAMP HTMLというものを用意する必要があります。

これは、利用出来るタグなどが制限されたHTMLとなっているので、2種類のHTMLを作らないといけません。

うまく表示出来ない可能性がある

前述の通り、利用出来るタグが異なるので正しくページが表示されなくなる可能性がります。

また、AMPではJavaScriptも利用出来ないのでJavaScript前提のサイトだとうまく動作しなくなる可能性が非常に高いです。

SEOに直接効果があるわけではない

GoogleはAMP対応の有無によって検索順位が変わることはないと明言しています。

ですので、順位を気にしてAMPの導入を考えているのであれば、急いで対応する必要はありません。

WordPressならプラグインを入れるだけで対応可能

自前で用意するととても大変そうなAMPですが、さすがWordpress様。

なんとプラグインを入れて有効にするだけでAMP対応が可能になってしまうのです！！

ただ、利用しているプラグインやテーマによっては別途対応が必要な場合もあります。
筆者も何点か修正を行って別の記事にしているのでそちらも参考にして頂ければなと思います。（※後述）

今回実際に入れてみましたのでご紹介致します。

プラグインをインストール

今回はAMP for WordPressというプラグインをインストールします。

有効化するのを忘れずに。

たったこれだけで準備は完了です。

確認

AMPプラグインを有効にすると、パーマリングの末尾に amp をつけることでAMPページにアクセスする事が可能になります。

こちらが元ページです。

そして、こちらがAMPページです。

広告やサイドバーなどが消え、記事本文のみのシンプルなレイアウトに変わっています。

また、さらに細かいチェックについては、コチラ からURL単位でテストが出来るので試してみると良いでしょう♪

以下のように判定されると、スマホ端末でGoogle検索した際にAMPページが自動で表示されるようになります。

StaticPressにも対応

また、こちらのプラグインを導入するとheadタグ内に、自動でampページへのリンクが差し込まれます。

なので、自動でAMPページも出力対象になります。

これは助かりますね♪

場合によってはうまく表示されないことも

しかし、StaticPressやGoogleAnalytics、GoogleAdsense、AmazonJSを利用していると、AMPで使えないタグが出力されてしまったり無効になってしまったりすることがあります。

その場合は以下の対応をする必要がありますので、そちらも参考にして頂ければなと思います♪

参考

【原因はStaticPress】吐き出したAMPページがGoogleSearchConsoleで「<meta http-equiv>」が原因でエラー発生する際の対応方法【WordPress】

GoogleSearchConsole Mac SEO Windows Wordpress カスタマイズ パソコン ブログ プログラミング 備忘録

参考

【AMP For WordPress】スマホ向けにAMP対応した途端にGoogleAnalyticsのPV数がガクッと下がった場合の原因と対処方法【必須設定】

GoogleAnalytics Mac SEO Windows Wordpress お小遣い稼ぎ カスタマイズ パソコン ブログ まとめ 便利ツール

参考

【AMP For WordPress】AMPページにGoogleAdsenseが表示されない場合の原因と対処方法【設定必須】

GoogleAdsense GoogleAnalytics Mac Windows Wordpress お小遣い稼ぎ カスタマイズ パソコン ブログ プログラミング

参考

【AMP For WordPress】AMPページにAmazonJSのリンクの画像や商品情報が表示されない場合の原因と対処方法【デザイン調整】

Amazon Mac Windows Wordpress お小遣い稼ぎ カスタマイズ デザイン パソコン ブログ プログラミング

また、デザインやレイアウトはデフォルトのものになってしまうので、通常ページに寄せたカスタマイズをすることも可能です。

参考

【AMP For WordPress】WordPressのAMPプラグインで出力されるページのレイアウトやデザインをcssでカスタマイズしよう【templatesファイル】

Mac SEO Windows Wordpress お小遣い稼ぎ カスタマイズ デザイン パソコン ブログ プログラミング

今後、注目が集まるであろうAMP対応がWordPressのプラグインを入れるだけで実現出来るのはとても助かりますね。

新しい技術をどんどん盛り込んで時代遅れのサイトにならないように気をつけましょう♪