AMP for wordpressの使い方！簡単にサイトをAMP対応する方法

AMPとは、モバイルの検索環境でWebページ表示を高速化する手法です。通常AMPに対応するには、別途AMPページを作成する必要があります。しかし「AMP for WordPress」を使用することで、簡単にサイトをAMP対応できます。今回は、AMP for WordPressの使い方について詳しく解説します。WordPressでサイトを構築しており、かつAMP未対応の方は、ぜひ参考にしてください。

「AMP for WordPress」プラグインとは？

AMPとは、2016年にリリースされたWebページ表示を高速化する手法です。モバイルで検索するユーザーが増加したことに伴い、快適な検索環境を整えるために開発されました。AMPを導入するには、本サイトのWebページとは別にAMPページを作成する必要があります。AMPページは通常のWebページよりもソースコードの記述が制限されており、AMP HTMLの宣言に沿って作成します。つまり既存のWebページと同一内容ですが、ページを構成する要素が異なるページです。
AMPに対応することでSEOの評価向上にも期待できます。一方で新規にページを作成する必要があり、導入には手間がかかるデメリットもあります。しかしそのデメリットなく、手軽にAMP対応できる方法が「AMP for WordPress」です。

AMP for WordPress プラグインはGoogleも開発に参加

WordPressでは、AMPを含むさまざなまプラグインが展開されています。AMP化できるプラグインにもいくつか種類があるため、どのプラグインを使用すべきか迷ってしまうでしょう。なかでも「AMP for WordPress」は Googleも開発に参加しているため、安心して使用できます。また実装も難しくないため、手軽にAMP化することが可能です。

WordPressにAMPを導入するメリット

WordPressにAMP（Accelerated Mobile Pages）を導入することには、いくつかのメリットがあります。

Webページの表示速度が上がる

AMPの最大の利点は、ページの読み込み速度を大幅に向上させることです。特にモバイル端末からアクセスする場合、速度の違いが顕著になります。この高速化により、ユーザーがサイト内をスムーズに移動でき、サイトの回遊率を高める効果が期待できます。

カルーセルに表示されやすくなる

AMPで作成されたページは、モバイルの検索結果のトップにあるカルーセル部分に表示されやすくなります。これにより、ユーザーのクリックを集めやすくなり、サイトの認知を高めることが可能です。

検索順位が上がる

ページの高速化はSEOに良い影響を与え、検索結果での順位向上につながる可能性があります。GoogleはAMP自体が評価に直接影響しないとしつつも、ページの表示速度は評価に繋がるとしているためです。検索順位が上がると、より多くの訪問者がサイトに流入し、売上向上の機会も増えるでしょう。

「AMP for WordPress」プラグインの使い方

プラグインはインストールして使用するアプリ的なツールであるため、使い方は難しくありません。ここでは実践編として、AMP for WordPressの使い方をご紹介します。

AMP for WordPressをインストール、有効化する

まずはWordPress管理画面の左ツールバーにある、コンセントマークのプラグイン項目から「新規追加」を選択します。「プラグインを追加」の画面になるため、左上にある「プラグインの検索…」に「AMP for WordPress」と入力してプラグインを検索。AMP for WordPressの「今すぐインストール」をクリックし、プラグインをインストールします。インストール後プラグインを有効化することで、自動的に各ページに対応するAMP HTMLが生成されます。AMP化されたページは、URLの末尾に「amp/」が埋め込まれるため確認してみてください。

Googleアナリティクスの設定

AMPページを Googleアナリティクスで計測・解析するには、改めて設定する必要があります。またGoogleアナリティクスの設定を忘れてしまうと、AMPページの計測が含まれないことで、Webサイトのアクセスが減少したように見えてしまうので注意しましょう。
AMPページの Googleアナリティクス設定方法は、主に以下2パターンです。

【1】AMP Analytics Optionsプラグインを使用する方法

①AMP Analytics Optionをインストールする
②WordPress管理画面の左メニューバーで「AMP＞Analytics」をクリック
③フォームに以下情報を入力
　・Type：googleanaytics
　・ ID：自動入力
　・JOSON Configuration：下記コードをコピーして貼り付け

{
　　”vars”: {
　　　　”account”: “UA-○○○○○○○-○○”
　　},
　　”triggers”: {
　　　　”trackPageview”: {
　　　　　　”on”: “visible”,
　　　　　　”request”: “pageview”
　　　　}
　　}
}

※UA-○○○○○○○-○○の部分は、Googleアナリティクスの「プロパティ設定」にあるトラッキングIDをコピーして貼り付

【2】AMPページにソースコードを設置する方法

① 下記コードスニペットをコピーする

　
<script async custom-element=”amp-analytics” src=”https://cdn.ampproject.org/v0/amp-analytics-0.1.js”></script>
<amp-analytics type=”gtag” data-credentials=”include”>
<script type=”application/json”>
{
　”vars” : {
　　”gtag_id”: “<GA_MEASUREMENT_ID>”,
　　”config” : {
　　　”<GA_MEASUREMENT_ID>”: { “groups”: “default” }
　　}
　}
}
</script>
</amp-analytics>

②<GA_MEASUREMENT_ID>は、トラッキングIDに置き換える
※トラッキングIDは、Googleアナリティクスの「プロパティ設定」で確認

Googleアナリティクスの設定が完了したら、Googleアナリティクスの「リアルタイム」などでタグが正常に実装されているかを確認しましょう。

AMPの設定が正しくできているか確認する方法

AMP for WordPressを有効化したにもかかわらず、正常に機能していなかったケースを防ぐため、正しく設定できているかを確認しましょう。以下で、AMP設定の3つの確認方法をご紹介します。

方法1　AMPテストによるチェック

1つ目の方法は、「AMPテスト」です。対象となるAMPページのURLを入力するだけで、AMPが正しく設定できているかがチェックできます。正常に設定できている場合には「有効なAMPページです」と表示され、正常でない場合は修正箇所が表示されます。

方法2　構造化データテストツール

2つ目の方法は、「構造化データテストツール」です。構造化データテストでは、AMPページのschema.orgが適切に設定できているかを検証できます。使い方はAMPテストと同様に、対象のAMPページURLを入力し、テスト実行をクリックするだけです。「エラーなし警告なし」と表示が出れば、正しく設定されています。

方法3　searchconsole

3つ目の方法は、searchconsoleのAMPエラーのレポート機能です。searchconsoleの左メニューバーにある「検索の見え方＞Accelerated Mobile Pages（AMPステータス）」では、AMPページのエラー有無を示すグラフがあります。正常に設定できていないAMPページがあると、「エラーのあるAMPページ数」に数字が表示されます。エラー内容を修正した後は、修正がすぐに反映されるよう「URL検査ツール」からクロールをリクエストし、その後正常に設定されたかを確認しましょう。

「AMP for WordPress」でAMPを手軽に導入できる！

通常AMPページの作成は、大きな手間です。しかしWordPressで構築しているWebサイトであれば、プラグインを使用することで簡単にAMPページが作成できます。AMPに関するプラグインは複数種類がありますが、その中でも今回紹介した「AMP for WordPress」がおすすめです。インストールして有効化するだけで、簡単にAMPページが作成されます。またAMPページ作成後は、Googleアナリティクスの設定とAMPページが正常に設定できているかの確認を忘れずに行いましょう。