AMP ページにエラーがないかブラウザで簡単に確かめる方法

AMP HTML は細かいルールがいくつもあります。AMP対応ページを作ってみたものの、はたしてそのページのAMP HTMLは正しいのでしょうか? せっかくAMP対応をしたつもりでも、エラーを吐いていてはGoogleにキャッシュされないこともあります。必ずAMP HTMLが仕様に準拠しているか検証する必要があります。

そこで、今回はAMP HTMLが正しいかを検証する方法をご紹介します。必要なものはおなじみのブラウザChrome(デスクトップ版)だけ!とても簡単です。

AMP HTMLの検証手順

1. デベロッパーツールを起動

Chromeのデベロッパーツール(Chrome Developer Tools)を起動します。このページをご覧の方でデベロッパーツールを知らない方はほとんどいないでしょうから省略します。デベロッパーツールなにそれ?という方は下記の記事がわかりやすいです。
http://www.buildinsider.net/web/chromedevtools/01

2. AMPページのURLの末尾に #development=1 をつけてアクセス

AMPページのURLの末尾に #development=1 をつけてアクセスします。#development=1 の箇所に一文字でも打ち間違いがあると検証機能が動作しないので綴りにお気をつけください。

例)
https://www.craneto.co.jp/archives/467/amp/#development=1
https://www.craneto.co.jp/examples_amp/something_wrong/#development=1

3. Consoleタブをチェック

デベロッパーツール(Chrome Developer Tools)のConsoleタブを選択するとAMP HTMLの検証結果を見ることができます。

エラーがない場合は AMP validation successful. と表示され、エラーがあると AMP validation had erros: という赤文字でエラーの詳細が表示されます。

正しいAMP HTMLの場合:

scs2

 

正しくないAMP HTMLの場合:

sc20160913

以上です。

検証時に毎回 #development=1 をつけるのが面倒くさい場合には AMP Validator という拡張機能を導入すると便利です。

複数のAMPページを一括検証

手順自体は簡単ですが、検証のためにはChromeでAMPページにアクセスしなければなりません。100ページ程度ならまだしも1000ページ,10000ページ単位のページボリュームになると手にを得ません。そこで、弊社ではURLを入力するだけで一括検証できる独自のAMP Validationツールを開発しました。

無料でお試しいただけますので、お気軽にどうぞ。
Amp Validation Service