Google AMP(Accelerated Mobile Pages) HTMLとは、モバイル端末で高速にページを表示する為の新たな試みです。
当記事では、AMPの記述が問題ないかチェックする手順を解説していきたいと思います。検証にはChrome Developer Toolsや構造化テストツール、Google Search Consoleを使います。
尚、Google AMP HTMLの記述方法や導入方法について詳しく知りたいという方は以下をご覧ください。
目次
AMPページと通常のHTMLページ
当サイトでは、以下のようにAMP HTMLを用意しています。実例として参考にご覧ください。
- 通常のウェブページ : markdownの記法まとめ
- AMP版のウェブページ : markdownの記法まとめ(AMP版)
photo by Mr. JosephW - DSC03309 on flickr
AMP HTMLの記述が正しいかチェックする方法
手順は簡単にまとめると、以下３つの流れで行います。
- Chrome Developer ToolsでAMP HTMLの検証
- 構造化データの検証
- Google Search Consoleでクロールされたか確認
それでは順番に確認していきましょう。
1.Chrome Developer ToolsでAMP HTMLの検証
まずは、Google ChromeのDeveloper Toolsを使って検証します。
Chrome Developer Tools
Google Chrome Developer ToolsはChromeから以下のショートカットキーで呼び出すことができます。
| OS | ショートカット |
|---|---|
| Windows | Ctrl + Shift + I |
| mac OSX | alt + command + I |
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の記述が問題ないことが確認できます。
問題があれば、その部分に関して修正を行ってください。以下はエラーの表示例です。
問題が無ければ次に進みます。
2017年2月追記：その他のデバッグ方法
上記でご説明したChrome DevToolsを使ったデバッグ方法以外に、新たに追加された検証方法がありますのでご紹介します。AMP HTMLは現在、以下の4つの方法でデバッグが可能です。
- Chrome DevToolsにてURLに
#development=1をつけて検証モードに - AMP Validatorサイトで検証
- ブラウザ拡張のAMP Validator for Chromeを使う
- amphtml-validatorやgulp-amphtml-validatorを使い、一括で自動検証
尚、amphtml-validatorに関する記事を新たに追加しましたので、こちらは下記をご覧ください。
2.構造化データの検証
構造化データとは、googleで検索結果として表示される情報の塊です。構造化データについては、当記事をご覧ください。
2016年2月追記：構造化データが必須では無くなった
AMP HTMLの構造化データは必須条件から外れ、任意に変更されました。
ただし、検索結果のトップニュース枠に表示されるようなAMPカルーセルには、これまで通り構造化データが必須です。
上記の記事で述べましたように、構造化データは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が正しく記述されたかチェックする方法についてまとめてみました。