AMP HTMLをチェックする

kawasaki

8年 ago

前回の記事でも触れましたが、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." と表示されます。

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

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

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

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