作成したAMPページの検証と公開済みページでエラーが発生した場合の確認方法
AMPに対応したページが正常かどうか検証する方法と、公開済みページでエラーが発生した場合の確認方法になります。
AMPでは使用できないタグや制限が沢山あり、なんとなく分かっているつもりでしたが、実際にやってみると、非常に細かい制限があり、目視や経験だけで判断すると、エラーが発生していることがあるので注意しましょう。
AMPページの検証
まず、作成したAMPページが正常なものかどうかチェックするには、ブラウザのデベロッパーツールを開いた状態で（F12で開く）、対象となるURLに「#development=1」を付加してページにアクセスします。
元のURLが
https://oar.st40.xyz/article/685
なら、これに先ほどのやつを追加して
https://oar.st40.xyz/article/685#development=1
になります。
なにかしら問題がある場合、デベロッパーツールのコンソールにAMP validation had errorsと表示され、その下に詳しいエラーの内容が出力されます。
出力されたエラーの内容には、それぞれのエラーに対応したAMPプロジェクトのリンクも一緒に出力されているので、なにが原因か分からない場合、そのリンクをクリックして詳しい仕様を確認することができます。
AMPページの検証で、逆になにも問題がなければ、コンソールにAMP validation successful.と表示されます。
気を付けてほしいのは、AMPはhttpsのサイトと開発用のlodalhostしか対応していないので、それ以外の環境でAMPページをブラウザで開くと、ページ自体に問題がなくてもエラーが発生します。
公開済みページでエラーが発生した場合の確認
続いて、実際にAMPページを公開した後にエラーが発生した場合の確認方法ですが、GoogleのSearch ConsoleにAMP用のページがあるので、そこで、どのページでどういったエラーが発生しているのか、ということを確認することができます。
エラーが多いとこんな感じでたくさん表示されます。
AMPページ修正後に、Search Console側で修正の確認を実行すると、エラーが発生したページの再検証を実施してくれます。
ちなみに上記エラーに、タグ「50000」で指定された作成者のスタイルシートが長すぎます。上限はundefinedバイトです。というのがあり、なんのことだろうと思って調べると、AMPでCSSを定義する場合、headタグ内に書いたものと、本文のinlineで定義したstyleの内容を合わせて50KB以下でないといけないようで、その制限を超えていたために発生していたエラーでした。
しかも、どうやらその制限にはコメントなどの文字も含まれてしまうようで、私の場合、head内に定義したスタイルがコメント含めて45KB近くあったため、本文に直接埋め込んでいるstyleが多いページでエラーが発生していました。
JavaScriptが使えないことや対応していないタグ、それに属性といったものは、コーディング時に気を付けておけばいいですが、スタイルのサイズ制限は、ページの追記や修正、inlineのstyleを多く含むページの作成などで、いつのまにか超えてしまうことがあるので、エラーを発生させたくないのであれば、ページの作成または修正後は必ず、上記の検証方法（URLに#development=1を追加）で確認した方がいいと思います。