仕事帰りの電車の中、少し調べ物をしていると当サイトがまぁまぁ上位表示されておりました。自分のサイトなので今調べている内容と違うことはわかっていたのですがAMP対応のマークがあったので表示確認の意味もこめてタップ。
すると「Sorry,this page is not valid AMP HTML」って表示が・・・・
えっ！まじで！実装して結構経つけどうまくいってなかったの！！！！！
調べ物の内容が変わってしまいました。
エラーの原因はページではなくURLだった
結論から言うと、エラーの原因はページ自体ではなくURLでした。URLの後ろに?amp/を追記するとAMPページに分岐される仕組みにしておりました。この?amp/のスラッシュに問題があったみたいで?ampにするとうまくページが表示されました。
原因特定に至った経緯
ページ自体にエラーはなかったのですが、何かミスってるのかと思い様々なAMPバリデーでションツールで検証するも、これと言った原因は特定できませんでしたが、エラーページをよく見ると「Show errors」とあるじゃないですか！
タップしてみるとエラーの内容はどうやら元のページを読みに行ってぽかったのでURLを疑いました。
そしてスラッシュを外してみると正常にページが表示されました！
AMPのチェックツール
エラーを調べている過程でいろんなチェックツールを使ったのですが以下が便利だったので共有します。
AMPBench – AMP ⚡ Validator
AMPのチェックも構造化データのチェックもここで出来ます。AMPのバリデートはここだけでもいいのかも？AMP4ADSは不明ですが・・・
AMP Validator Chrome拡張機能
Chrome拡張機能のAMP Validatorめっちゃ便利です。ぱっと見でエラーががあるかわかるので日々の更新コンテンツのチェックにもいいかもしれません。
焦らず隅々までよく見よう
何と言っても今回ハマったのはページ自体にエラーがなかったことです。エラーページ自体にエラーのリンクがあることに気付かなかったのも解決に時間がかかった要因です。焦らずじっくりメッセージを読む癖をつけなくては・・・・・・あたりまえですよね。
