2021年08月17日 -

AMP化は正しく行えている?AMPテストを行うツールを4つご紹介!

モバイル検索で、Webページ表示を高速化する手法にAMPがあります。AMPは正しく実装されていなければ、検索結果でページが反映されません。そのためAMPページを作成したら、必ず検証が必要です。そこで今回はAMPのテストを行う方法として、AMPテストツールをご紹介します。これからAMPページを作成する場合は、今記事を参考に最適なAMPテストツールも導入しましょう。

AMPテストを行えるツール4選

AMPはモバイル検索において、Webページ表示を高速化する手法です。スマホで検索するユーザーが増えたことで、モバイルの検索結果におけるページ表示速度が重視されるようになりました。AMPはページ表示速度を高めることでユーザーの利便性を向上し、かつSEOにも良い影響を与えます。結果的に検索結果の上位獲得にも期待できるため、導入して損のない手法です。AMPは通常Webページとは異なるAMP HTMLで作成されるため、ページ公開にあたりAMPページが正常に機能しているかをチェックする必要があります。テストは以下のようなツールを用いて行います。

ツール名 概要
AMPテスト Googleが提供するAMPテストツール。URLを入力するだけで、簡単にテストができる。
Google Search Console Googleが提供するアクセス管理ツール。AMPレポートから、AMPページの状態がわかる。
デベロッパーツール Chromeに搭載されているAMPテスト機能。AMP HTMLのページソースが確認できる。
AMP Validator AMPプロジェクトが提供するAMPテストツール。AMPページのURLを入力することで、ソースが確認できる。

AMPページが正常であるかをチェックする目的は同じですが、ツールによって使い方や特徴が異なります。代表的な4つのツールの中から、使いやすいツールを導入してみてください。

1.AMPテスト

引用:AMP テスト – Google Search Console

AMPテストは、Googleが提供している無料で利用できるAMPテストツールです。ツール自体がシンプルでかつ使い方も単純であるため、初めてAMPテストツールを導入する場合におすすめです。

AMPテストの使い方

1 AMPテストにアクセス
2 ツール内の検索窓にテストしたAMPページのURLを入力
3 AMPページの有効有無を確認
4 有効でない場合は、修正箇所を確認

1 AMPテストにアクセス

下記は、AMPテストのサイトURLです。

https://search.google.com/test/amp

Googleの提供するツールですが、Googleアカウントの所有やアカウント作成は必要ありません。サイトにアクセスするだけで、すぐに利用できます。

2 ツール内の検索窓にテストしたAMPページのURLを入力

ツール内の検索窓に、AMPページのURLを入力して、「テストを実行」をクリックします。URL入力後は、数十秒ほどで結果が確認できます。

3 AMPページの有効有無を確認

AMPページが正常な場合は「有効なAMPページです」、異常がある場合は「有効なAMPページではありません」と表示されます。そもそもAMPページへのリンクが設定されていない場合は、「AMPページではありません」となります。
また「Googleに送信」を実行することで、Googleにインデックスが送信できます。そして「検索結果をプレビュー」を実行することで、実際の検索結果でどのように表示されるかが確認可能です。

4 有効でない場合は、修正箇所を確認

AMPページが有効でない場合は、修正が必要な箇所が指摘されます。指摘内容に沿って修正し、再度AMPテストを実施しましょう。

2.Google Search Console

引用:Google Search Console

Search Consoleは、Googleが提供するアクセス管理ツールです。サイトの検索トラフィックや掲載順位の測定など、SEOに関する検証・修正が行えます。Search Consoleを使うには、対象サイトの登録が必要です。そのためSearch Consoleでのアクセス管理も兼ねて、AMPテストも行いたい場合におすすめです。

Google Search Consoleの使い方

1 Search Consoleにログインする
2 ホームでAMPテストの対象となるWebサイトを選択
3 検索の見え方>Accelerated Mobile Pages(新・AMPステータス)を選択
4 AMPページのエラー有無を確認

※新Search Consoleでは「Accelerated Mobile Pages→AMPステータス」に改称

1 Search Consoleにログインする

Search Consoleを使用したことがない場合は、新規に登録が必要です。Googleアカウントがあれば、簡単に登録できます。その後Webサイトを登録すれば、利用開始となります。Search ConsoleではAMPテストのほか、SEOに関連するさまざまな検証・解析ができるため、長期的に利用したい場合には登録してみてください。

2 ホームでAMPテストの対象となるWebサイトを選択

Search Consoleでは、複数のWebサイトが登録できます。そのため複数のWebサイトを登録している場合は、まずホームからAMPテストの対象となるWebサイトを選択しましょう。

3 検索の見え方>Accelerated Mobile Pages(新・AMPステータス)を選択

左メニューバーにある「検索の見え方」から「Accelerated Mobile Pages(新・AMPステータス)」を選択します。特定のAMPページの入力は必要なく、対象Webサイト内の全てのAMPページが検証されます。

4 AMPページのエラー有無を確認

エラーとなるAMPページがある場合は、「重大な問題のあるAMPページ」に数字が表示されます。反対に全てのAMPページが正常であれば「インデックスに登録されたAMPページ数」に対象のAMPページ数が表示されます。エラーページがある場合は問題点を確認し、再度AMPテストを実施しましょう。

3.デベロッパーツール

デベロッパーツールは、Chromeに搭載されているAMP HTMLのページソースが確認できるツールです。Chromeに標準搭載されているため、新規でインストールする必要なく手軽に利用できます。

デベロッパーツールの使い方

1 Chromeツールバーの1番右にある設定画面を開く
2 「その他ツール」から「デベロッパー」ツールを起動
3 対象となるAMPページを開き「Console」を選択
4 AMPページのエラー有無を確認

1 Chromeツールバーの1番右にある設定画面を開く

Chromeを使用している場合は、ツールバーの1番右にある3本バーで設定画面を開きます。

2 「その他ツール」から「デベロッパー」ツールを起動

設定画面の下から4番目「その他ツール」を選択し、1番下にある「デベロッパーツール」を起動します。設定画面を開かなくとも、ショートカットで起動することも可能です。

Windows Ctrl+Shift+i
Mac Command+Opt+i

3 対象となるAMPページを開き「Console」を選択

デベロッパーツールを起動すると、ページソースが表示されます。最初の表示画面は「elements」になっているため、その隣にある「Console」を選択しましょう。

4 AMPページのエラー有無を確認

AMPページが正常であれば1行目に「Powered by AMP」の表示が出ます。エラーがある場合はエラー表示が出るため、エラー内容に沿って修正しましょう。

4.AMP Validator

引用:The AMP Validator

AMP Validatorは、AMPプロジェクトが提供するAMPテストツールです。Chrome版とWeb版があるため、ブラウザに合わせて利用できます。Chrome版は拡張機能となるため、Chromeウェブストアからインストールしましょう。Web版は下記URLからアクセスし、AMPページのURLを入力することで利用できます。

ここではChrome版のAMP Validatorの使い方をご紹介します。

AMP Validatorの使い方

1 AMP Validatorへアクセス
2 対象AMPページのURLにアクセス
3 AMPページのステータスを確認
4 エラー内容に沿って修正

1 AMP Validatorへアクセス

ChromeでAMP Validatorをインストールしたら、メニューバーからAMP Validator選択します。

2 対象AMPページのURLにアクセス

テスト対象のAMPページのURLを入力しアクセスしましょう。

3 AMPページのステータスを確認

テストが実行されると、AMPページのステータスを表す以下4つのアイコンが表示されます。

・灰色:AMP未対応
・青:AMP対応
・緑:AMP HTMLが有効/警告ありの場合はその数が表示
・赤:エラーあり/エラー数が表示

AMPページに異常がなければ、赤色のアイコンにはエラー数が表示されません。

4 エラー内容に沿って修正

赤色のアイコンに数字が表示されている場合は、アイコンをクリックしエラー内容を確認します。行数とエラー内容が表示されるため、指摘内容に基づいて修正しましょう。

AMP導入時には要確認!AMPテストで実装状況を確認しましょう

WebサイトのAMP化は、SEOの面でも重要な施策です。AMPページは通常ページとは異なるソースで作成されることから、ページ公開前は正常に実装されているかを確認する必要があります。AMPテストツールはどれも無料で利用でき、修正内容まで指摘してくれるため利便性が高い点も特徴です。AMPページの効果を十分に発揮させるためにも、AMPテストは怠らずにしっかりと行いましょう。