Google Search Console

searchconsole.png

画像引用：Google Search Console

Googleが提供しているWebサイトのアクセス管理ツール「Google Search Console」でもAMPページが正しく導入されているかテストすることができます。

まずはSearch Consoleにログインし、AMPページを導入したサイトを表示しましょう。そのあと、「検索の見え方」から「Accelerated Mobile Pages」をクリックします。

エラーページがある場合は「重大な問題のあるAMPページ」という箇所に、エラーのあるページ数が表示されるので、修正内容に従ってコードを書き換えましょう。

ただ、Search Consoleは仕様が変わったために、現在は「AMP ステータス レポート」という名前に変わっています。

AMP ステータス レポートはSearch Consoleに標準搭載されていないので、右上の「はてなマーク」のアイコンをクリックし、検索窓にAMP ステータス レポートと入力しましょう。

下にスクロールすると「AMPレポートを開く」という項目が表示されるのでクリックしてください。すると、AMPレポートが表示されますが、すぐ結果が反映されるのではありません。一日後にデータの取得を行います。

WebサイトすべてのURLからAMPの導入テストを一括で行ってくれるので、導入したページURLを入力する必要はありません。

デベロッパーツール

デベロッパーツールは、Chromeに搭載されている機能でAMP HTMLのページソースを確認できるツールです。

まずはAMPページURLに「#development＝1」をつけて「デベロッパーツール内」で対象となるページを表示します。

Chromeを利用している方は右上にある3本の線の入った設定画面を開き、「その他のツール」から、「デベロッパーツール」を起動しましょう。

それ以外のWebを使用している場合は「Ctrl+Shift+i（Windowsパソコン）」「Ctrl+Opt+i（MacBookパソコン）」のショートカットキーを入力すれば起動できます。

デベロッパーツールで対象のページを開き、画面上部にある「Console」を選択してください。

正常にAMPページが導入されていれば、「Console」の一行目に「Powered by AMP」が表示されます。しかし、AMPページの導入に何らかのエラーがあった場合には、1行目に注意を促すアイコンが表示され、エラー部分が表示されるので修正を行いましょう。

AMP Validator

ampvalidator.png

画像引用：AMP Validator

AMP Validatorとは、AMPプロジェクトが提供しているツールです。上記のAMPテストのようにGoogleが提供しているわけではありませんが、Chromeでも利用できます。

ただ、Web版もあるので、普段お使いのブラウザに合わせたツールを選びましょう。

Chrome版はインストールが必要です。インストールが完了したらAMP Validatorにアクセスし、AMPページを確認したいURLからアクセスします。

すると、

  • 灰色/AMP未対応
  • 青色/AMP対応
  • 緑/AMP HTMLが有効
  • 赤/エラーのあるページ

赤色のアイコンをクリックすると、それに応じた情報が表示されるので修正すべき箇所がすぐに見つかります。

Web版はインストールの必要はありません。まずはAMP Validatorの公式サイトへアクセスし、確認したいURLページを検索窓に入力しましょう。入力し終えたら、VALIDATEをクリックしてください。

するとページソースが表示され、エラー箇所があればソースコードの行に赤色のアイコンが表示されます。それを元にAMPページの修正を行いましょう。