GoggleからこのブログのAMPについて問題があるとのメールが届きました。
今回のAMPエラーの内容は、タイトル通り
「タグ「style[amp-keyframes]」の CSS 構文エラー」
です。
性格もあるとは思うのですが、AMP関連のエラーは、これまでにも経験があるとはいえ、Googleからのメールがくると緊張します。
今回のエラーは、推測ではあります原因と対策とが整理できたので、今後のためにも備忘録としてまとめておきます。
AMPエラーについての経緯
今回のAMPエラーに関する経緯を時系列で列挙します。
- 5月26日AMPエラー気づく寝る前だったので翌日確認することにしました。
- 5月27日AMPエラーの確認と修正作業Search ConsoleでAMPエラーの内容を確認しました。
5/26 AMPエラー 18ページ
5/27 AMPエラー 24ページ
エラーとなっているページをWordPressで確認したのですが、特に問題点は見当たらない。
同様のエラーがないか関連情報を探したところ、どうやらCocoonのバージョンアップによるものと思われ、CocoonのアップデートとWordPressでの確認・修正（上書き程度）を行い、Search Consoleで修正承認のリクエストをしました。
その後も同様のエラーに関する情報を調べていると、Cocoonフォーラムで類似の不具合報告があろ、AMPキャッシュの削除も必要との情報を得ました。
はかせやらかしてしまいました。
Googleの担当の方、お手数かけてすみませんでした。
![]()
AMPでのタグ「style[amp-keyframes]」の CSS 構文エラーお世話になります。テーマ有難く利用させていただいております。 本日、AMP用のkeyframeでエラーが検出され困っています。 該当箇所を調べたところ「CSS syntax error in tag 'style' - invalid pr...wp-cocoon.comAMP削除の作業を実施しました。
- 5月28日AMPエラーの連絡メールGoogleから７ページは修正されているが、未修正のページがあるとのメールが届きました。
AMPキャッシュ削除前に修正完了とテスト依頼をしてしまったためと考え、AMPエラーの確認を兼ねて記事も見直すことに決め、修正作業完了後、Googleに修正承認のリクエストをしました。
AMPエラーの原因と対応作業
AMPエラーの原因となったのは、上記Cocoonの不具合フォーラムに書かれているCocoonの2.1.6.4による不具合と考えています。
残念ながらフォーラムに書かれている技術的な内容についてはほぼ分かりませんが、次の２点を実施することで解決すると理解しました。
- Cocoonのバージョンアップ：2.1.6.4に→2.1.6.5
- AMPのキャッシュ削除
Cocoonは、不具合が出てもほぼ即日解決されているように思います。作者のわいひらさん及びフォーラムで回答してくださっている方々に感謝しています。
AMPエラーの詳細
AMPエラーについて、Googleから連絡のあった内容と、Search Consoleでの表示内容について以下に示します。
AMPエラーの１例ではありますが、エラーが出るとあわててしまうので、自分に言い聞かせるために整理しておきます。
ブログの技術的なことにある程度知識や経験があれば当たり前の対応なのかもしれませんが、技術サポート担当として専門外の製品を扱わなければいけなかったことを思い出すせいか、毎度ドキドキものです。
AMPエラーの内容
AMPエラーについてのメール本文を以下に示します。
今回のAMPエラーの内容：タグ「style[amp-keyframes]」の CSS 構文エラーです。
（１）AMPで問題が検出されました。
- 慣れることはなく、いつもドキッとさせられるメールです。
メール：「AMP」関連の問題が１件検出されました。
図１ メール：「AMP」関連の問題が１件検出されました。
（２）「AMP」の問題の修正を検証しています。
- 何が問題なのかよく（じっくり）調べます。
- 対策（対応作業）をすべて終わらせてから修正承認のリクエストをします。
メール：「AMP」の問題の趨勢を検出しています。
図２ メール：「AMP」の問題の趨勢を検出しています。
（３）AMPの問題の未修正部分について
- AMPのキャッシュ削除をせずに、修正承認のリクエストをしてしまったので未修正部分が残ってしまいました。
メール：AMPの問題の未修正部分について
図３ メール：AMPの問題の未修正部分について
Search ConsoleでのAMPエラーの表示
AMPエラーについて、Search Consoleの表示例を示します。
（１）AMPエラーの指摘箇所
- AMPエラーのリンクをクリックすると下図の表示がされるが、正直なところ何が問題なのか全く分かりません。
- 下図右下の「検査」ボタンをクリックして検査をします。
- 該当ページのチェックをします。
AMPエラーの指摘箇所の１例
図４ AMPエラーの指摘箇所の１例
（２）Search Consoleでの検査結果
- AMPエラーのメールと同じ内容が表示されます。
- 修正後、下図右上の「公開URLをテスト」をクリックします。
AMP：公開URPをテスト
図５ AMP：公開URPをテスト
（３）公開URLのテスト結果（テスト完了後）
- 公開URLのテスト完了後の画面です。
- 全てのページの修正が完了した後、修正承認のリクエストします。
AMP：修正承認のリクエスト
図６ AMP：公開ULRのテスト完了の１例
AMPエラー修正承認のリクエスト後の経過
修正承認のリクエストをした後、検証の詳細を確認すると、残っているAMPエラーは「保留」の状態になりました。
AMPエラーの検証の詳細の１例
図７ AMPエラーの検証の詳細の１例
幸い、AMPエラーの数は現象傾向なので、しばらく待つことにします。
AMPエラーの修正承認状況（その１）
図８ AMPエラーの修正承認状況（その１）
その後、AMPエラー数が減らない日が３日ほど続き、内心ドキドキしていましたが、現象傾向の様なのでCocoonのバージョンアップを行い、このまま様子をみることにします。
- Cocoonのバージョンアップ：2.1.6.5に→2.1.6.7
AMPエラーの修正承認状況（その２）
図９ AMPエラーの修正承認状況（その２）
約３週間経過、当初のページ以外の確認も逐次進んでいるようです。
別のブログは単純な減少傾向となっているので、AMPキャッシュ未削除の影響と考えています。
AMPエラーの修正承認状況（その３）
図10 AMPエラーの修正承認状況（その３）
別のブログでは、6月22日にエラーがゼロとなりました。
その後も、当初検出されていなかったページを含めた検証（修正の確認）が続き、7月5日Googleから、以下のメールが届きました。
サイト（https://pdcatovision.com/）に関する「AMP」の問題が修正されました
AMPエラーについての振り返り（反省）
AMP関係のエラーが出ると、Cocoonの場合ページごとAMPページを生成しないことも簡単にできるので、あわてることはないのですが、やはり気にはなります。
週末の気持ちにゆとりがある時に対応すればよいのですが、AMPエラーが出たままの状態というのは、気持ちが落ち着かないのです。
では、どうするか？
Cocoonは、機能追加や不具合対応がこまめにされるので、最新版が出るとすぐにアップデートしたくなるのですが、今回の失敗を振り返り次の様にすることにしました。
Cocoonの自動更新（WordPressでの更新）ができるようになったからと言って即日更新せずに、週末を待ってアップデートする。
また、修正作業の際には、一概には言えないのですが、
- キャッシュのクリア作業
を考慮して、修正結果の報告をするようにした方がよさそうです。
まとめ
GoggleからこのブログのAMPについて問題があるとのメールが届きました。
今回のAMPエラーの内容は、タイトル通り「タグ「style[amp-keyframes]」の CSS 構文エラー」です。
ここでは、このAMPエラーについての対応について、以下の項目でまとめています。
- AMPエラーについての経緯
- AMPエラーの原因と対応作業
- AMPエラーの詳細
- AMPエラーの内容
- Search ConsoleでのAMPエラーの表示
- AMPエラー修正承認のリクエスト後の経過
- AMPエラーについての振り返り（反省）
