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

Googleが検索結果にモバイルサイトを高速表示する仕組み、AMPを正式に導入しました。

しかし、現状では、検索結果にAMPとして表示されるのは、ニュース性の高い記事だけなので、サイトをAMP対応しても、正しく設定できているか、すぐに確認することができません。

今回は、AMPが正しく設定できているかどうか、確認する方法を紹介します。

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

  1. URLに「#development=1」をつけてChromeのデベロッパーツールでチェック
  2. Googleの構造化データテストツール「Structured Data Testing Tool」でチェック
  3. Googleサーチコンソールのレポートでチェック

URLに「#development=1」をつけてChromeのデベロッパーツールでチェック

Chromeデベロッパーツールのコンソールを使って、AMP対応を確認します。

AMP対応のURLの末尾に「#development=1」をつけてページにアクセスします。

例えば、
「https://www.wp-benricho.com/theme-check/」のAMPのURLが
「https://www.wp-benricho.com/theme-check/amp/」の場合、
「https://www.wp-benricho.com/theme-check/amp/#development=1」でアクセスします。

cap14

Chromeデベロッパーツールを開いて、コンソールメニューに移動します。

デベロッパーツールを起動するショートカットも覚えておくと便利です。

  • Windows: F12 もしくは Ctrl + Shift + I
  • Mac: Command + Option + I

cap16

正しく設定できている場合、「AMP validation successful.」と表示されます。

cap17

設定に誤りがある場合、エラーが一覧で表示されます。

cap18

それぞれのエラーの内容と、対応方法は、AMPプロジェクトの公式サイトで確認できます。

AMP Validation Errors | Accelerated Mobile Pages Project

Googleの構造化データテストツール「Structured Data Testing Tool」でチェック

Googleの構造化データテストツールでは、AMPの構造化データが正しく設定できているかチェックできます。

Structured Data Testing Toolにアクセスします。

cap19

左側の「Fetch URL」をクリックします。

cap24

構造化データをチェックするAMPのURLを入力して、「FETCH & VALIDATE」を押します。

cap20

正しく設定できている場合、「All good」と表示されます。

cap22

エラーがある場合は、エラー内容が赤字で表示されます。

cap23

Googleサーチコンソールのレポートでチェック

ページがAMP対応している場合、しばらくするとGoogleがページをクロールして、Googleのサーチコンソール(旧ウェブマスターツール)にレポートが表示されます。

AMPのレポートはサーチコンソールの「検索での見え方 > Accelerated Mobile Pages」に表示されます。

cap25

正しくインデクスされたページ数、エラーのあるページ数が表示され、エラーの詳細内容も分かります。

cap26

エラー内容を修正しても、Goolgeが再度ページをクロールするまで、レポートには反映されないので注意してください。

クロールを早くしてもらうには、サーチコンソールからサイトマップを再送信するか、Fetch as Googleで個別にURLを送信します。もちろん、急がないのであれば、何もせずに待っていても問題ありません。

サーチコンソールの「クロール > サイトマップ」からサイトマップを再送信できます。しばらくすると、Googleがクロールします。

cap27

サーチコンソールの「クロール > Fetch as Google」から個別にURLを「インデックスに送信」できます。しばらくすると、Googleがクロールします。

cap28

まとめ

AMPのテストは、開発中はChromデベロッパーツールを使いながら、Structured Data Testing Toolで構造化データを確認、開発が完了したらサーチコンソールのレポートでGoolgeのインデックス状況を確認する、という手順がおすすめです。