この記事を書いてる人: 
tea

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

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

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

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

Ads

目次

 AMPページと通常のHTMLページ

当サイトでは、以下のようにAMP HTMLを用意しています。実例として参考にご覧ください。

雷画像

photo by Mr. JosephW - DSC03309 on flickr

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

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

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

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

1.Chrome Developer ToolsでAMP HTMLの検証

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

 Chrome Developer Tools

Google Chrome Developer ToolsはChromeから以下のショートカットキーで呼び出すことができます。

OSショートカット
WindowsCtrl + Shift + I
mac OSXalt + 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の記述が問題ないことが確認できます。

検証1:Chrome Developer ToolsからAMP HTMLの検証結果:問題なし
検証1:Chrome Developer ToolsからAMP HTMLの検証結果:問題なし ©

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

AMP HTMLのエラー表示例:iframeタグが混じっている
AMP HTMLのエラー表示例:iframeタグが混じっている ©

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

 2017年2月追記:その他のデバッグ方法

上記でご説明したChrome DevToolsを使ったデバッグ方法以外に、新たに追加された検証方法がありますのでご紹介します。AMP HTMLは現在、以下の4つの方法でデバッグが可能です。

尚、amphtml-validatorに関する記事を新たに追加しましたので、こちらは下記をご覧ください。

2.構造化データの検証

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

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

 2016年2月追記:構造化データが必須では無くなった

AMP HTMLの構造化データは必須条件から外れ、任意に変更されました。

ただし、検索結果のトップニュース枠に表示されるようなAMPカルーセルには、これまで通り構造化データが必須です。

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

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

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

検証2:構造化データテストツールの検証結果
検証2:構造化データテストツールの検証結果 ©

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を表示します。

検証3:Google search consoleでAMP HTMLがクロール状況が分かる
検証3:Google search consoleでAMP HTMLがクロール状況が分かる ©

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

最後に

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

Ads
 記事を書いてる人
gravatar
tea (てぃー)

ゆるふわポートレートや自然風景を撮影しています。その他の趣味は音楽制作/メダカの鑑賞/web。撮影や写真掲載・寄稿等のご依頼もお待ちしてます。お問い合わせは以下のフォームまたはSNSよりお願い致します。

 お問い合わせ

 撮影のご依頼

 ポートフォリオ

 各作例のご紹介

 シェアする
 記事名とURLをコピーする

Google AMP HTMLが正しく記述されたかチェックする方法 - TPB
https://photo-tea.com/p/how-to-validate-amp/

 おすすめ記事
Ads
 作例掲載