Chrome拡張アドオンを使ってAMPページエラーを簡単にチェック！

スマートフォンでの検索結果で、AMP対応ページが表示されることも増えてきましたね。
気になる話題など検索した場合に速報性の高いメディアサイトが表示されるので、余計にそういう印象になるのかも知れませんが、そのスピーディーな表示速度はとても快適で、さらに普及が進んで欲しいところです。
当ブログでも、たびたびAMP対応をお勧めするエントリを投稿しておりますが、まだ他のサイトが対応していないからいいや、と後回しになっていませんか。
正直、通常のチェックツールだと、どうしても細かな修正をしながらエラーチェックをするのが面倒だったりしますよね…
今回はページにアクセスするだけでAMP対応かどうかがすぐチェックできるChrome拡張アドオンをご紹介します。

チェックが一気に楽になりますし、気になる競合サイトの導入状況など一目瞭然です。

Chromeデベロッパーツール

1.対象ページのURLに「#development=1」を追加してChromeでページを表示させる。
2.デベロッパーツールを立ち上げてConsoleメニューで確認する。

エラーがない場合の表示

エラーを指摘されている場合の表示

Google「AMPテスト」ツール

1.Google「AMPテスト」ツールにアクセス。
https://search.google.com/search-console/amp
2.URL入力窓に調査したいサイトURLを入力する。
エラーがない場合の表示

エラーを指摘されている場合の表示

Google Search Console「Accelerated Mobile Pages」レポート

1.Google Search Consoleで「検索での見え方」＞「Accelerated Mobile Pages」を確認。

せっかく用意してくれているGoogleには申し訳ないのですが、URLを追加したり、別のページに飛ばないといけないのがとても面倒です。

Chromeアドオン「Amplifier AMP/Canonical switcher」

Amplifier AMP/Canonical switcher
は正規バージョンとAMPバージョンを切り替えるシンプルなアドオンです。

AMP対応している通常ページをChromeで表示するとアイコンが黄色く反応してAMP対応ページであることを知らせてくれます。
アイコンをクリックするとURL末尾に「&amp=1」など付与するかたちでAMPページを表示してくれます。

Chromeアドオン「AMP VAlidator」

AMP VAlidatorはChromeに表示中のAMP対応ページにエラーがあるか無いかをひと目で確認することができるアドオンです。

また、AMP対応ページであるかどうかもアイコンの反応で判別することが出来ます。
閲覧中のページがAMP対応ページであれば、青色にアイコン表示が変化、対応していなければ灰色（無反応）のままです。

水色のアイコンをクリックすることでAMPページが表示され（URL末尾に「&amp=1」などが付与されて遷移）、更にアイコンをクリックすることでページの状態をチェックする事ができます。
エラーがない場合は緑色のアイコンに、エラーがある場合にはアイコンは赤く変化しエラー数をバッジで表示してくれます。

今回の場合は、ページにamp-adのJSがないという警告がでています。
エラーとはなりません（アイコンは緑）が、バリデーション警告（黄色いバッジで警告箇所1を指摘）についての修正をアドバイスしてくれています・・・とても手軽で便利です。

AMPは導入したいけどエラーが厳しくて挫折した…という方も、もう一度アドオンを入れてトライしてみてはいかがでしょうか？
チェックが捗るだけで随分工数が減るので、意外と簡単に導入できてしまうかもしれませんよ。
モバイルファーストインデックスへの対応など、モバイルページ対策でやらなければならないことがふえてきている昨今、便利なツールで出来る限り作業量の削減を心がけてみてはいかがでしょうか。