【解決済】AMPの問題:タグ「style[amp-keyframes]」のCSS構文エラー

GoggleからこのブログのAMPについて問題があるとのメールが届きました。

今回のAMPエラーの内容は、タイトル通り

「タグ「style[amp-keyframes]」の CSS 構文エラー」

です。

はかせ
はかせ

性格もあるとは思うのですが、AMP関連のエラーは、これまでにも経験があるとはいえ、Googleからのメールがくると緊張します。

今回のエラーは、推測ではあります原因と対策とが整理できたので、今後のためにも備忘録としてまとめておきます。

スポンサーリンク

AMPエラーについての経緯

今回の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 prope...

    AMP削除の作業を実施しました。

  • 5月28日
    AMPエラーの連絡メール
    Googleから7ページは修正されているが、未修正のページがあるとのメールが届きました。

    AMPキャッシュ削除前に修正完了とテスト依頼をしてしまったためと考え、AMPエラーの確認を兼ねて記事も見直すことに決め、修正作業完了後、Googleに修正承認のリクエストをしました。

スポンサーリンク

AMPエラーの原因と対応作業

AMPエラーの原因となったのは、上記Cocoonの不具合フォーラムに書かれているCocoonの2.1.6.4による不具合と考えています。

残念ながらフォーラムに書かれている技術的な内容についてはほぼ分かりませんが、次の2点を実施することで解決すると理解しました。

  • Cocoonのバージョンアップ:2.1.6.4に→2.1.6.5
  • AMPのキャッシュ削除
はかせ
はかせ

Cocoonは、不具合が出てもほぼ即日解決されているように思います。作者のわいひらさん及びフォーラムで回答してくださっている方々に感謝しています。

スポンサーリンク

AMPエラーの詳細

AMPエラーについて、Googleから連絡のあった内容と、Search Consoleでの表示内容について以下に示します。

AMPエラーの1例ではありますが、エラーが出るとあわててしまうので、自分に言い聞かせるために整理しておきます。

はかせ
はかせ

ブログの技術的なことにある程度知識や経験があれば当たり前の対応なのかもしれませんが、技術サポート担当として専門外の製品を扱わなければいけなかったことを思い出すせいか、毎度ドキドキものです。

AMPエラーの内容

AMPエラーについてのメール本文を以下に示します。

今回のAMPエラーの内容:タグ「style[amp-keyframes]」の CSS 構文エラーです。

(1)AMPで問題が検出されました。

  • 慣れることはなく、いつもドキッとさせられるメールです。
メール:「AMP」関連の問題が1件検出されました。

メール:「AMP」関連の問題が1件検出されました。

図1 メール:「AMP」関連の問題が1件検出されました。

(2)「AMP」の問題の修正を検証しています。

  • 何が問題なのかよく(じっくり)調べます。
  • 対策(対応作業)をすべて終わらせてから修正承認のリクエストをします。
メール:「AMP」の問題の趨勢を検出しています。

メール:「AMP」の問題の趨勢を検出しています。

図2 メール:「AMP」の問題の趨勢を検出しています。

(3)AMPの問題の未修正部分について

  • AMPのキャッシュ削除をせずに、修正承認のリクエストをしてしまったので未修正部分が残ってしまいました。
メール:AMPの問題の未修正部分について

メール:AMPの問題の未修正部分について

図3 メール:AMPの問題の未修正部分について

Search ConsoleでのAMPエラーの表示

AMPエラーについて、Search Consoleの表示例を示します。

(1)AMPエラーの指摘箇所

  • AMPエラーのリンクをクリックすると下図の表示がされるが、正直なところ何が問題なのか全く分かりません。
  • 下図右下の「検査」ボタンをクリックして検査をします。
  • 該当ページのチェックをします。
AMPエラーの指摘箇所の1例

AMPエラーの指摘箇所の1例

図4 AMPエラーの指摘箇所の1例

(2)Search Consoleでの検査結果

  • AMPエラーのメールと同じ内容が表示されます。
  • 修正後、下図右上の「公開URLをテスト」をクリックします。
AMP:公開URPをテスト

AMP:公開URPをテスト

図5 AMP:公開URPをテスト

(3)公開URLのテスト結果(テスト完了後)

  • 公開URLのテスト完了後の画面です。
  • 全てのページの修正が完了した後、修正承認のリクエストします。
AMP:修正承認のリクエスト

AMP:修正承認のリクエスト

図6 AMP:公開ULRのテスト完了の1例

AMPエラー修正承認のリクエスト後の経過

修正承認のリクエストをした後、検証の詳細を確認すると、残っているAMPエラーは「保留」の状態になりました。

AMPエラーの検証の詳細の1例

AMPエラーの検証の詳細の1例

図7 AMPエラーの検証の詳細の1例

幸い、AMPエラーの数は現象傾向なので、しばらく待つことにします。

AMPエラーの修正承認状況(その1)

AMPエラーの修正承認状況(その1)

図8 AMPエラーの修正承認状況(その1)

その後、AMPエラー数が減らない日が3日ほど続き、内心ドキドキしていましたが、現象傾向の様なのでCocoonのバージョンアップを行い、このまま様子をみることにします。

  • Cocoonのバージョンアップ:2.1.6.5に→2.1.6.7
AMPエラーの修正承認状況(その2)

AMPエラーの修正承認状況(その2)

図9 AMPエラーの修正承認状況(その2)

約3週間経過、当初のページ以外の確認も逐次進んでいるようです。

別のブログは単純な減少傾向となっているので、AMPキャッシュ未削除の影響と考えています。

AMPエラーの修正承認状況(その3)

AMPエラーの修正承認状況(その3)

図10 AMPエラーの修正承認状況(その3)

別のブログでは、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エラーについての振り返り(反省)
はかせ

ISOを学ぶきっかけは、知り合いの社長さんからのISO認証取得の相談からでした。
品質マネジメントは、会社をよくするツールであり、チームやプロジェクトにも使えるよくできた仕組みです。

はかせをフォローする
ブログ運営
スポンサーリンク
はかせをフォローする
ビジョンで回す博士の品質マネジメント
タイトルとURLをコピーしました