Accelerated Mobile Pages の問題を効率的にチェックするには

2016 年 9 月 19 日(月曜日)

AMP ページが Google 検索に表示されるためには、そのページが正しく実装されていなければなりません。つまり、Accelerated Mobile Pages でサイトを AMP 化(#AMPlify)した後も、ページの状態を定期的に確認することが重要になります。

AMP ページを実装する際に、ページにエラーが含まれていると、そのページは Google 検索のインデックスに登録されません。また、エラーにはなっていなくても、ページに警告が含まれていることがあります。たとえば、要素が推奨された方法に従っていない場合や、将来的にエラーになる可能性がある場合です。

Google Search Console は、どの AMP ページにエラーが含まれているかを確認できるツールです。Search Console で問題のあるページの URL を特定できたら、以下のツールのいずれかを使用して検証エラーの詳細を簡単に確認できます。

ブラウザ デベロッパー ツール

デベロッパー ツールを使用して検証するには:

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

Developer Console には、エラーが以下のように表示されます。

AMP ブラウザ拡張機能

AMP ブラウザ拡張機能(ChromeOpera に対応)を使用すると、無効な AMP ページを簡単に特定してデバッグできます。ブラウザでサイトを表示すると、拡張機能が AMP ページにアクセスし、各ページが有効かどうかを判別します。次の表は、AMP マークアップの有効性に基づいて表示される拡張機能の各アイコンを示しています。

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

拡張機能を追加することにより、アイコンをクリックするだけで、ページにどんなエラーや警告があるかわかるようになるわけです。それぞれの問題について、原因となっているソースの行番号と列番号、そして、何が問題かを示すメッセージが表示されます。さらに詳しい説明がある場合は、[Learn more] をクリックすると ampproject.org の該当ページが表示されます。

AMP Web Validator

AMP Web Validator は、AMP ページの有効性を検証するためのシンプルなウェブ インターフェースです。validator.ampproject.org からアクセスできます。

このツールを使用するには、AMP の URL を入力するか、ソースコードをコピーして貼り付けます。エラーがある場合は、行と行の間にエラー メッセージが表示されます。AMP Web Validator 上で直接編集すると再検証が行われ、その変更によって問題が解決するかどうかがすぐわかります。

AMP ページの状態を確認するうえで、どの方法が一番使い勝手が良かったでしょうか。下のコメント欄または Google+ の Google ウェブマスター コミュニティからフィードバックをお願いします。質問がある場合は、お気軽にウェブマスター ヘルプ フォーラムに投稿してください。