AMP ページの検証

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

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

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

AMP の妥当性に加えて、AMP ドキュメントがサードパーティプラットフォームで検出可能かどうかを確認することもお勧めします。

ブラウザの Developer Console

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

1. ブラウザで AMP ページを開きます。
2. URL に「#development=[1,actions,amp,amp4ads,amp4email]」を追加します。たとえば、http://localhost:8000/released.amp.html#development=1 は、AMP 形式の過去の検証方法です。http://localhost:8000/released.amp.html#development=amp4email は、AMP for email 仕様に対してドキュメントを検証します。
3. Chrome DevTools のコンソールを開いて、検証エラーを確認します。

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

ウェブインターフェース

AMP Validator のウェブインターフェースには、validator.ampproject.org からアクセスできます。このインターフェースでは、ページの HTML ソースとともに、インラインでエラーが表示されます。このインターフェースは対話型エディタとなっており、HTML ソースに加えた変更は、インタラクティブに再検証されます。

ブラウザの拡張機能

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

AMP Validator 拡張機能は、Chrome と Opera でご利用いただけます。

CI 向けの NPM パッケージ

AMP Validator の NPM パッケージを使用すると、AMP の検証をビルドやテストのパイプラインの一部として統合することができます。amphtml-validator または gulp-amphtml-validator（gulp プラグイン）のいずれかのパッケージをご利用いただけます。たとえば、AMP Validator の NPM パッケージを統合テストやスケジュールタスク内で使用して、本番環境の AMP ページを検証できます。

例: AMP HTML ファイルの検証

この例では、AMP HTML ファイルの検証を amphtml-validator NPM パッケージを使用して実施します。検証のステータスはコンソールに出力されます。

'use strict';
var amphtmlValidator = require('amphtml-validator');
var fs = require('fs');

amphtmlValidator.getInstance().then(function (validator) {
  var input = fs.readFileSync('index.html', 'utf8');
  var result = validator.validateString(input);
  (result.status === 'PASS' ? console.log : console.error)(result.status);
  for (var ii = 0; ii < result.errors.length; ii++) {
    var error = result.errors[ii];
    var msg =
      'line ' + error.line + ', col ' + error.col + ': ' + error.message;
    if (error.specUrl !== null) {
      msg += ' (see ' + error.specUrl + ')';
    }
    (error.severity === 'ERROR' ? console.error : console.warn)(msg);
  }
});

例: gulp タスクを使った AMP HTML の検証

この例では、gulp タスクを使用してすべての AMP HTML ファイルを検証します。AMP 検証エラーが見つかった場合、タスクはエラーコード（1）で終了します。

const gulp = require('gulp');
const gulpAmpValidator = require('gulp-amphtml-validator');

const paths = {
  src: 'src/*.html',
};

gulp.task('amphtml:validate', () => {
  return gulp
    .src(paths.src)
    .pipe(gulpAmpValidator.validate())
    .pipe(gulpAmpValidator.format())
    .pipe(gulpAmpValidator.failAfterError());
});
gulp.task('default', ['amphtml:validate'], function () {});

コマンドラインツール

AMP HTML ファイルの検証は、AMP HTML Validator のコマンドラインツールを使用して実施することもできます。

使い方:

1. お使いのシステムに Node.js とそのパッケージマネージャ「npm」が インストールされていることを確認します。
2. 次のコマンドを実行して、AMP HTML Validator のコマンドラインツールをインストールします（npm install -g amphtml-validator）。

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

$ amphtml-validator https://amp.dev/
https://amp.dev/: 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 /ja/documentation/components/amp-img/)
several_errors.html:34:2 The attribute 'width' in tag 'amp-ad' is set to the invalid value '100%'. (see /ja/documentation/components/amp-ad/)
...

エラーメッセージの形式は、ファイル名、行、列、メッセージから成り、その後に AMP HTML 参照へのリンクが続くこともあります。Emacs などの一部のエディタでは、この形式を解釈して、元のファイル内のエラーにジャンプできるものがあります。

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

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

コマンドラインツールには、色の切り替え、JSON 出力の表示、特定のバージョンの Validator 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 Validator は開発中に役に立つだけではありません。AMP ページをコンテンツや検索結果に統合している Twitter や Google などのプラットフォームでも使用されています。さらに、こうしたプラットフォームでは一般に、サーバーに直接ページをリクエストするのではなく、Google AMP キャッシュ（ページをキャッシュして世界中で利用できるようにする無料のサービス）を利用しているため、読み込みは一層高速になります。

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

検証エラーの修正方法

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

<img src="cat.png">

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

• ブラウザの Developer Console

• ウェブインターフェース {amp-img0}{/amp-img0}

• ブラウザの拡張機能

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

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

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

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