Google AMP HTMLが正しく記述されたかチェックする方法

Google AMP(Accelerated Mobile Pages) HTMLとは、モバイル端末で高速にページを表示する為の新たな試みです。

当記事では、AMPの記述が問題ないかチェックする手順を解説していきたいと思います。検証にはChrome Developer Toolsや構造化テストツール、Google Search Consoleを使います。

尚、Google AMP HTMLの記述方法や導入方法について詳しく知りたいという方は以下をご覧ください。

当ブログ
Google AMP(Accelerated Mobile Pages)HTMLについて

目次

photo by Mr. JosephW - DSC03309 on flickr

AMP HTMLの記述が正しいかチェックする方法

手順は簡単にまとめると、以下３つの流れで行います。

1. Chrome Developer ToolsでAMP HTMLの検証
2. 構造化データの検証
3. Google Search Consoleでクロールされたか確認

それでは順番に確認していきましょう。

1.Chrome Developer ToolsでAMP HTMLの検証

まずは、Google ChromeのDeveloper Toolsを使って検証します。

Developer toolsが開けたら検証を行いたいAMP HTMLのURLを開いてみましょう。

続いて、開いたURLに#development=1を付け加えて再読み込みします。DevToolsでは、URLに#development=1を加えると、AMPの記述が正しいかデバッグを行うことができます。AMPの記述に問題がなければコンソールにAMP validation successful.と表示されます。

一例として、当記事のAMP HTMLでデバッグしてみたいと思います。当記事のAMP版は./amp/index.htmlに生成させています。

例えばこのページを検証する場合するには、Chrome Developer Toolから./amp/index.html#development=1へアクセスして、Chrome Developer ToolsでのコンソールにAMP validation successful.と表示さればAMP HTMLの記述が問題ないことが確認できます。

問題があれば、その部分に関して修正を行ってください。以下はエラーの表示例です。

問題が無ければ次に進みます。

2.構造化データの検証

構造化データとは、googleで検索結果として表示される情報の塊です。構造化データについては、当記事をご覧ください。

当ブログ
Google AMP(Accelerated Mobile Pages)HTMLについて

上記の記事で述べましたように、構造化データはAMPのheadタグ内に記述します。この記述が上手くいっているかを判別するためには、構造化データ・テストツールを開き、検証したいAMP HTMLのURLを入力します。

構造化テストツール
google - 構造化データ テストツール

例えば当記事では検証結果が以下のようになります。

3.Google Search Consoleで正常にクロールされたか確認

AMPの記述の検証は、上記の1と2で完了です。お疲れ様でした^^

あとは作成したAMP HTMLがGoogle Robotにクロールされるのを待ちましょう。問題なくクロールされると、Google Search Consoleでクロールされたトータルページ数が確認できるようになります。

Google Search Console
Google - Google Search Console

AMP HTMLのクロール状況を確認するには、Google Search Console(トップ画面) > 検索の見え方 > Accelerated Mobile Pagesを表示します。

「エラーのあるAMPページ数」が1件以上ある場合は、前述した1と2の検証でエラーが出ているページとなります。エラーが発生したら改めて修正を行ってみてください。

最後に

という事で、今回はAMP HTMLが正しく記述されたかチェックする方法についてまとめてみました。