Site icon Tips Note by TAM

AMP HTMLをチェックする

前回の記事でも触れましたが、AMP HTMLはちょっとしたことでエラー出ます。
せっかく対応しても、正しく設定されていないとAMPコンテンツとしてGoogleに認識されません。
そこで今回はAMP HTMLのチェック方法をまとめてみました。

AMP Validator

AMP Projectがチェック用のアドオンを公開。
導入は「AMP Validator」を追加するだけ。おなじみのAMPマークがツールバーに追加されます。

マークの説明

・・・正しく設定されたAMPページ

・・・AMPエラーあり

アイコンをクリックするとAMPエラーの詳細を確認できます。

・・・対応するAMPページあり

アイコンをクリックするとAMPページに遷移します。
AMPページを作成した場合、通常のHTMLページに下記の記述が必要です。
記述漏れの確認にも、ソースを開かなくていいので便利です。
<link rel="amphtml" href="AMPページのURL">

・・・AMP対応なし

デベロッパーツールでチェック

1.検証したいAMPページのURL末尾に "#development=1" を付与
2.Chromeのデベロッパーツールをひらき、[Console]で検証結果を確認
 正しく設定できていれば、"AMP Validation successful." と表示されます。

Search Consoleでエラーメッセージを確認

1.Search Console にログインし、確認したいプロパティを選択
2.[検索での見え方]>[Accelerated Mobile Pages]を選択
 エラー項目をクリックすると、エラーがでているURLの一覧が表示されます。

3.URLをクリックすると、エラーの詳細が表示

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

Googleの「構造化データテストツール」を開き、確認したいAMPページのURLをはってテストを実行。
コードスニペットは直接コードを貼ってテストを実行。

公開後にAMP CDNにキャッシュされているかチェック

AMP CDNにキャッシュされているかは、キャッシュのURLを開くだけでチェックできます。
キャッシュのURLは、オリジナルAMPページのURLが「http」か「https」かで異なります。
キャッシュされていない場合は、エラー画面が表示されます。

・httpの場合

https://cdn.ampproject.org/c/(AMP対応ページのURL).html

・httpsの場合

https://cdn.ampproject.org/c/s/(AMP対応ページのURL).html

TipsNoteは「http」なので「http」を除いたURLを追加。

https://cdn.ampproject.org/c/www.tam-tam.co.jp/tipsnote/mobile/post8220.html?amp=1