kawasakiAMP HTMLをチェックする
前回の記事でも触れましたが、AMP HTMLはちょっとしたことでエラー出ます。
せっかく対応しても、正しく設定されていないとAMPコンテンツとしてGoogleに認識されません。
そこで今回はAMP HTMLのチェック方法をまとめてみました。
AMP Validator
AMP Projectがチェック用のアドオンを公開。
導入は「AMP Validator」を追加するだけ。おなじみの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
