AMPページのバリデーションをWeb上で行える「The AMP Validator」を使ってみた

The AMP Validator

通常、「AMP」ページのバリデーションを行う場合、検証したいページのURLの末尾に「#development=1」と入力して、Chromeブラウザのコンソール表示で確認する必要がありました。

「#development=1」を入力せずに、もっと気軽に「AMP」ページのバリデーションを行える「The AMP Validator」というWebサイトが公開されたようなので、使ってみました。

「The AMP Validator」のサイトの使い方

使い方は簡単で、URLを入力して検証する方法と、ソースを張り付けて検証する方法があります。

URLで検証

操作と見方は下記のようになります。

「The AMP Validator」

  1. URLに検証するAMPページのURLを入力する。
  2. 「VALIDATE」ボタンを押下する。
  3. AMPページのソースが表示される。
  4. バリデーションのステータスが表示される。
  5. バリデーションのエラー内容が表示される。

確認の仕方

発生しているエラーがどの部分を指しているかを確認することができます。

「The AMP Validator」確認の仕方

  1. エラー項目を押下する。
  2. 該当のエラー部分にカーソルが移動する。

上記の操作でどの部分のエラーかがわかります。

リファレンスページで確認

エラーが発生している各要素の付近やソースの一番下に表示される、「Learn more」というテキストを押下すると、対応するリファレンスページに遷移します。

要素の付近
ソースの一番下
対応するリファレンスページが表示される

リファレンスページで、自分が記述しているコードとの違いを確認することができます。

ソースで検証

ソースで検証する場合は、テキストエリアにAMPページのソースを張り付けるだけです。

「The AMP Validator」
テキストエリアにソースを張り付ける

ソースを張り付けた瞬間にバリデーションが行われます。エラーの確認法方法はURLでの検証と同じです。

エラーを修正し、バリデーションが通ると、ステータスに緑色で「PASS」と表示されます。

「The AMP Validator」 バリデーションOKのステータス
バリデーションをPASS

まとめ

  • 「The AMP Validator」はAMPページのバリデーションを行うサイト。
  • URLとソースで検証する二つの方法がある。
  • 実際のエラーがどの部分を指しているかを確認することができる。
  • 「Learn more」テキストを押下すると、対応するリファレンスページで確認ができる。

「The AMP Validator」は簡単にAMPページのバリデーションを行えるので、気軽に検証することができます。

こういった検証サイトは本当にありがたいですよね。

スポンサーリンク
記事のタイトルとURLをコピーする

シェアする

フォローする

この記事をお届けした
PC ウェブログの最新ニュース情報を、
いいねしてチェックしよう!