AMPサイト作成に役立つツールまとめ（2019）

2019-02-172020-01-04AMP

AMPサイト制作に便利で役立つツールのまとめです

Google Search Console「AMPテスト」

「AMPテスト」はSEOの要であるGoogle Search Consoleの機能としても使われているAMPチェックツール

Google Search ConsoleのAMP項目も同様のシステムでチェック・評価されている

URLを入力すればAMPとして有効なページかどうかを教えてくれる

AMPエラーが発生して無効であった場合、どこのコードがダメなのか、どうダメなのかも教えてくれる

また、構造化データが含まれている場合は構造化のチェックとその結果を見る事が可能

Chrome拡張機能「AMP Validator」

同検証ができるWEB版もあります

「AMP Validator」はAMPプロジェクト公式のChrome拡張機能

Chrome拡張機能で使えばかなり便利で自サイトのチェックだけでなく、ほかのどんなサイトがAMPページを作っているのか、AMPは有効になっているのかページを開くだけで確認できます

「AMP Validator」は現在のページをチェックしてそれがAMPページであるかどうかを確認し、AMPページが有効なら緑、無効なら赤にアイコンの色が変化します
またAMPページではないけどAMPページが登録されていれば青になり、アイコンクリックでAMPページに移動・検証します

AMPにおける警告やエラーがある場合は、アイコンをクリックすると警告やエラーが表示されます

エラーのある行番号も表示してくれるのでAMPチェックの際はHTMLの縮小表示は解除しておきたいですね

AMPのテスト開発環境「AMP Playground」

「AMP Playground」はAMPプロジェクト製のブラウザで実行できるテスト開発環境です

アクセスすると基本のAMPHTMLコードが整形されていて、リアルタイム編集が可能です

iPhoneやAndroidなどのウィンドウサイズも指定でき、表示端末に合わせた表示が確認可能

また、テンプレートを選択して、AMPコンポーネントの各実行テストサンプルが使えるので重宝します