メニュー

AMPページが機能しているかどうか確認する方法(AMP Validatorのインストール)

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>