AMP の主な長所は、単にページの読み込み時間を短縮するだけでなく、それを検証可能な方法で行うことです。そのため、Twitter、Instagram、Google 検索などのサードパーティでは、興味深い方法でユーザーに AMP ページを積極的に配信しています。

ページが有効な AMP かどうかを確認する方法

AMP ドキュメントを検証するにはいくつかの方法があります。どの方法でも結果は同じになるため、自分の開発スタイルに最適なものを使用してください。

AMP の有効性に加えて、AMP ドキュメントがサードパーティ プラットフォームにとって検出可能かどうかも確認できます。

ブラウザの Developer Console

AMP JS ライブラリには AMP 検証ツールが付属しているため、すべての AMP ページですぐに使用できます。検証方法は次のとおりです。

  • ブラウザで AMP ページを開きます。
  • URL に「#development=1」を追加します(例: http://localhost:8000/released.amp.html#development=1
  • Chrome DevTools Console を開いて検証エラーを確認します。

Developer Console のエラーは次のように表示されます。

ウェブ インターフェース

validator.ampproject.org では AMP 検証ツールをウェブ インターフェースとして使用できます。このインターフェースには、ページの HTML ソースとともに、インラインでエラーが表示されます。このインターフェースは対話型エディタなので、HTML ソースに変更を加えると、インタラクティブに再検証できます。

ブラウザの拡張機能

ブラウザの拡張機能を使用すると、AMP 検証ツールにブラウザのツールバーから直接アクセスできるようになります。ブラウザでページを表示すると、アクセスした各 AMP ページが自動的に検証され、ページの有効性が色付きのアイコンで視覚的に示されます。

AMP ページ内にエラーがある場合は、拡張機能のアイコンが赤色になり、見つかったエラーの数が表示されます。
AMP ページ内にエラーがない場合は、アイコンが緑色になります。警告がある場合はその数が表示されます。
ページが AMP でなくても、AMP バージョンが存在することがわかっている場合は、アイコンが青色になってリンクアイコンが表示されます。拡張機能のアイコンをクリックすると AMP バージョンのページにリダイレクトされます。

ChromeOpera の AMP 検証ツール拡張機能をご利用ください。

コマンドライン ツール

前提条件として、Node.js とそのパッケージ マネージャー npm をシステムにインストールする必要があります。

AMP HTML 検証ツールのコマンドライン ツールをインストールするには、npm install -g amphtml-validator と入力します。

実際の AMP HTML ページを検証してみましょう。

$ amphtml-validator https://www.ampproject.org/
https://www.ampproject.org/: PASS

当然ですが、このページは有効な AMP HTML です。有効でない several_errors.html ページを試してみましょう。amphtml-validator コマンドを実行するには、ページの URL またはローカル ファイル名を指定します。several_errors.html をダウンロードしてファイルとして保存してから、実行します。

$ amphtml-validator several_errors.html
several_errors.html:23:2 The attribute 'charset' may not appear in tag 'meta name= and content='.
several_errors.html:26:2 The tag 'script' is disallowed except in specific forms.
several_errors.html:32:2 The mandatory attribute 'height' is missing in tag 'amp-img'. (see https://www.ampproject.org/docs/reference/amp-img.html)
several_errors.html:34:2 The attribute 'width' in tag 'amp-ad' is set to the invalid value '100%'. (see https://www.ampproject.org/docs/reference/amp-ad.html)
...

エラー メッセージの形式は、ファイル名、行、列、メッセージから成り、その後に AMP HTML リファレンスへのリンクが続くこともあります。Emacs などの一部のエディタでは(コンパイル コマンドやコンパイル モードを探してください)、この形式を解釈して、元のファイル内のエラーにジャンプできるものがあります。

AMP ページを作成する際の参考として、minimum_valid_amp.html を検討してみましょう。

$ amphtml-validator minimum_valid_amp.html
minimum_valid_amp.html: PASS

コマンドライン ツールには、色の切り替え、JSON 出力の印刷、特定のバージョンの検証ツール Javascript の実行(デフォルトでは、最新の公開版を実行します)などの追加の機能があります。

$ amphtml-validator --help

  Usage: index [options] <fileOrUrlOrMinus...>

  Validates the files or urls provided as arguments. If "-" is
  specified, reads from stdin instead.

  Options:

    -h, --help                  output usage information
    -V, --version               output the version number
    --validator_js <fileOrUrl>  The Validator Javascript.
      Latest published version by default, or
      dist/validator_minified.js (built with build.py)
      for development.
    --format <color|text|json>  How to format the output.
      "color" displays errors/warnings/success in
              red/orange/green.
      "text"  avoids color (e.g., useful in terminals not
              supporting color).
      "json"  emits json corresponding to the ValidationResult
              message in validator.proto.

ページが有効でない場合

AMP 検証ツールは開発中に役に立つだけではありません。AMP ページをコンテンツや検索結果に統合している Twitter や Google などのプラットフォームでも使用されています。プラットフォームでは一般に、サーバーに直接ページをリクエストするだけでなく、Google AMP キャッシュ(ページをキャッシュして世界中で利用できるようにする無料のサービス)も利用しているため、さらに高速に読み込むことができます。

AMP 検証サービスでページに問題があることが検出されると、そのページはサードパーティのウェブサイトによって検出、配信されなくなり、Google AMP キャッシュに表示されなくなります。つまり、キャッシュによるスピードのメリットが失われるだけでなく、多くの場所でページが表示されなくなる可能性があります。そのような事態が起きないようにしてください。

検証エラーの修正方法

ほとんどの検証エラーは簡単に対応して修正することができます。次の HTML タグを検討してみましょう。

<img src="cat.png">

このタグでは次の AMP 検証エラーが生成され、各ツールでは次のように表示されます。

  • ブラウザの Developer Console

  • ウェブ インターフェース

  • ブラウザの拡張機能

各ツールから、次のような情報がわかります。

  1. エラーが発生した HTML ドキュメント内の場所(行と列)。インターフェースによっては、クリック可能になっていて、その場所がハイライト表示されます。このケースでは、行 11、列 2 で問題が発生しています。
  2. エラーに関する説明。このケースでは、<amp-img> タグを使用すべきところで <img> タグを使用していることが示されています。
  3. エラーに関連するドキュメントへのリンク。このケースでは、<amp-img> タグに関するドキュメントです。すべてのエラーにドキュメントのリンクが表示されるわけではありません。

仕様をよく確認したところ、<amp-img> タグを使用すべきところで <img> タグを使用していることがわかりました。

可能性のあるエラーの詳細なリストを確認するには、AMP 検証エラーガイドをご覧ください。慎重に評価しても引き続きエラーが発生する場合は、質問を投稿してください。サポートいたします。