GoogleクロームでAMP Validatorというチェックツールをインストールすれば、AMPページが正しく機能しているかどうかをブラウザで簡単に確認することができるようになります。
AMP Validatorのインストール方法
AMP Validatorをインストールするには、Chromeウェブストアに行きます。
画面右上に「Chromeに追加」というボタンがあります。ボタンをクリックします。ちなみに、AMP Validatorは無料でインストールできます。
Chromeに追加ボタンをクリックするとダイアログが表示されます。「拡張機能を追加」ボタンをクリックします。これで、AMP Validatorがインストールされます。
AMP Validatorがインストールされると、ブラウザの右上に以下の稲妻のようなアイコンが表示されるようになります。
ページを開いている際、このアイコンがグレー（灰色）の場合。そのページはAMP未対応という意味になります。一方、アイコンがブルー（青色）の場合。そのページはAMP対応という意味になります。
AMPページのエラーチェック
AMP ValidatorはAMPの対応・未対応を判別してくれると同時に、文法にエラーがないかどうかも自動でチェックしてくれます。AMPページにエラーがない場合、アイコンはグリーン（緑色）で表示されます。
一方、AMPページにエラーがある場合、アイコンはレッド（赤色）で表示されます。さらに、エラーが何個あるのか、数字で表示されます。
アイコンをクリックすると、エラーの内容が表示されます。（英語なのでわかりづらいですが）ちなみに、以下のエラーは「必要なAMPコンポーネントが入っていませんよ」ということを表しています。
上記のエラーの例ですと、「amp-position-observer」というAMPコンポーネントが入っていませんということを表しています。ですので、functions.phpにエラーが出ているAMPコンポーネントを入れてあげればエラーは改善します。
エラーが改善されました。
アンプレートの場合、本テーマに必要なAMPコンポーネントはすでに設定してありますので、コンポーネントを追加する必要はありません。
よく使われているAMPコンポーネント一覧
アンプレートはすでに必要なコンポーネントを設置済みですので追加する必要はありませんが、以下によく使われている。AMP Validatorでエラーの出やすいコンポーネントをいくつか掲載しておきます。
・amp-img
HTMLのimgタグに代わるAMP HTML用のコンポーネント。AMPページではimgタグは使えません。代わりにAMP用のamp-imgタグを使うようにします。
・amp-lightbox
子要素をライトボックス（フルスクリーンオーバーレイ）表示できるようにするコンポーネント。
【amp-lightboxのスクリプト】
<script async custom-element=”amp-lightbox” src=”https://cdn.ampproject.org/v0/amp-lightbox-0.1.js”></script>
・amp-image-lightbox
画像をライトボックスで表示させるコンポーネント。
【amp-image-lightboxのスクリプト】
<script async custom-element=”amp-image-lightbox” src=”https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js”></script>
・amp-carousel
AMPページでカルーセル表示（スライド表示）できるようにするコンポーネント。
【amp-carouselのスクリプト】
<script async custom-element=”amp-carousel” src=”https://cdn.ampproject.org/v0/amp-carousel-0.2.js”></script>
・amp-sidebar
左右からスライドインするサイドバーを表示させるコンポーネント。
【amp-sidebarのスクリプト】
<script async custom-element=”amp-sidebar” src=”https://cdn.ampproject.org/v0/amp-sidebar-0.1.js”></script>
・amp-social-share
AMPページでSNSのソーシャルボタンを作成するコンポーネント。
【amp-social-shareのスクリプト】
<script async custom-element=”amp-social-share” src=”https://cdn.ampproject.org/v0/amp-social-share-0.1.js”></script>
・amp-youtube
YouTubeの動画を表示させるコンポーネント。
【amp-youtubeのスクリプト】
<script async custom-element=”amp-youtube” src=”https://cdn.ampproject.org/v0/amp-youtube-0.1.js”></script>
・amp-twitter
twitterのツイートを表示するコンポーネント。
【amp-twitterのスクリプト】
<script async custom-element=”amp-twitter” src=”https://cdn.ampproject.org/v0/amp-twitter-0.1.js”></script>
・amp-instagram
instagramの投稿を表示するコンポーネント。
【amp-instagramのスクリプト】
<script async custom-element=”amp-instagram” src=”https://cdn.ampproject.org/v0/amp-instagram-0.1.js”></script>
・amp-facebook
Facebookの投稿を表示するコンポーネント
【amp-facebookのスクリプト】
<script async custom-element=”amp-facebook” src=”https://cdn.ampproject.org/v0/amp-facebook-0.1.js”></script>
・amp-iframe
iframeの汎用コンテンツ（地図や広告など）を埋め込む際に必要なコンポーネント。
【amp-iframeのスクリプト】
<script async custom-element=”amp-iframe” src=”https://cdn.ampproject.org/v0/amp-iframe-0.1.js”></script>
・amp-video
オリジナルビデオを表示するためのコンポーネント。
【amp-videoのスクリプト】
<script async custom-element=”amp-video” src=”https://cdn.ampproject.org/v0/amp-video-0.1.js”></script>
・amp-audio
音楽を埋め込むコンポーネント。
【amp-audioのスクリプト】
<script async custom-element=”amp-audio” src=”https://cdn.ampproject.org/v0/amp-audio-0.1.js”></script>
・amp-anim
アニメーションGIFを表示させるコンポーネント。
【amp-animのスクリプト】
<script async custom-element=”amp-anim” src=”https://cdn.ampproject.org/v0/amp-anim-0.1.js”></script>
・amp-ad
広告を表示させるコンポーネント。（AMPページではAMP対応された広告のみ表示させることができます）
【amp-adのスクリプト】
<script async custom-element=”amp-ad” src=”https://cdn.ampproject.org/v0/amp-ad-0.1.js”></script>
・amp-sticky-ad
画面下部に広告を固定表示できるようにするコンポーネント。
【amp-sticky-adのスクリプト】
<script async custom-element=”amp-sticky-ad” src=”https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js”></script>
・amp-analytics
Googleアナリティクスのアクセス解析トラッキングコードを追加するコンポーネント。
【amp-analyticsのスクリプト】
<script async custom-element=”amp-analytics” src=”https://cdn.ampproject.org/v0/amp-analytics-0.1.js”></script>
・amp-form
問い合わせフォームなど、フォームに関するHTMLタグが使用できるようになるコンポーネント。
【amp-formのスクリプト】
<script async custom-element=”amp-form” src=”https://cdn.ampproject.org/v0/amp-form-0.1.js”></script>
・amp-accordion
見出しやコンテンツなど、アコーディオンパネルで表示できるコンポーネント。
【amp-accordionのスクリプト】
<script async custom-element=”amp-accordion” src=”https://cdn.ampproject.org/v0/amp-accordion-0.1.js”></script>