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

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

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

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

ブラウザの Developer Console

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

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

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

ウェブ インターフェース

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

ブラウザの拡張機能

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

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

AMP 検証ツール拡張機能は、ChromeOpera でご利用いただけます。

CI 向けの NPM パッケージ

AMP 検証ツールの NPM パッケージを使用すると、AMP の検証をビルドやテストのパイプラインの一部として統合することができます。amphtml-validator または gulp-amphtml-validator (gulp プラグイン)のいずれかの
パッケージをご利用いただけます。たとえば、AMP 検証ツールの 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 検証ツールのコマンドライン ツールを使用して実施することもできます。

使い方:

  1. お使いのシステムに Node.js とそのパッケージマネージャ「npm」が インストールされていることを確認します。
  2. 次のコマンドを実行して、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. エラーに関する説明。このケースでは、<img> タグが使用されていますが、本来は <amp-img> タグを使用すべきであることが示されています。
  3. エラーに関連するドキュメントへのリンク。このケースでは、<amp-img> タグに関するドキュメントです。すべてのエラーにドキュメントのリンクが表示されるわけではありません。

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

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