タグ「style amp-custom」の CSS 構文エラーです。
グーグルサーチコンソールに上のようなエラーが表示されました。
すぐわかる概要
WordPress(5.4.1)のCocoonテーマ(2.1.6.5)を利用しています。
今回は、直前に追加CSSの変更をしていたので、それが原因かもしれません。追加CSSを見ても構文エラーはなかったのですが、実際のウェブページのソースのCSSになったときに一部が欠けていてエラーになっていました。
WordPressの中で追加CSSなどを合わせてHTMLを生成するときに、どうもうまくいっていないようです。
- CocoonのAMPキャッシュを削除しました。
- また、作業中にCocoonの更新(2.1.7)があったので適用しました。
- そこで、Google Search Console で「修正を検証」して様子を見ました。
その後、Google Search Consoleで「検証: 修正を確認しました」を確認してみると、「合格」になっているページがありました。どうも解決したようです。


ここからは詳しく書いていきます。
「AMP」の問題が新たに検出されました


上のようなメールが届きました。主なエラーをみてみると、
タグ「style amp-custom」の CSS 構文エラーです。
Google Search Consoleで確認
Google Search Consoleをみると、7つのページでエラーになっています。


style amp-customを確認する


中身の部分を読んでみる
<style amp-custom>は、WordPress内のさまざまなCSSから自動生成されているコードなので、そのままだと詰まって読みにくいです。
- CSSのコード整形ツール(https://lab.syncer.jp/Tool/CSS-PrettyPrint/)
こちらのサイトでCSSを整形しました。




カッコ{}には問題がなさそうです
CSSの妥当性チェック
2つのサイトでCSSの妥当性をチェックしました。
- The AMP Validator(https://validator.ampproject.org/)
- The W3C CSS Validation Service(https://jigsaw.w3.org/css-validator/#validate_by_uri)


The AMP ValidatorにURLを読み込ませたところ、結果は「PASS」でした。これにはちょっと意表をつかれました。


ん? もしかしたら、何か修正が反映されていないだけで、時間が解決するのかも…?
一方のThe W3C CSS Validation ServiceでCSSを読み込ませると「parse error」がぞくそく。




Value Errorは変数が値に解決されていないことが原因のようです。


Parse Errorは、なぜか要素名が消えてしまっているからのようです


左がWordPressで入力した「追加CSS」と、生成された<style amp-custom>の対応部分を比べてみると、一部がかけているように見えます。
そこで、問題の原因は
- 追加CSSにエラーがある
- WordPress・Cocoonのプログラムにバグがある
- AMPキャッシュに変なCSSが残っている
追加CSSの妥当性をチェックする
The W3C CSS Validation Serviceで「追加CSS」のコードをチェックしてみました。


こちらはエラーなしです。
たまたまテーマの更新通知がきていた


基本的には更新はすぐに適用しているのですが、たまたまこのエラー修正の作業中にCocoonの2.1.7の更新があったので、バックアップしてから適用しました。


また、Cocoonテーマには「AMPキャッシュ」の機能があります。CSSを修正してもすぐには反映されないので、キャッシュを削除しました。
修正を検証
Google Search Consoleで「修正を検証」しました。(2020-06-04時点)


検証の進捗
検証の進捗状況をみました(2020-06-06時点)


エラーページが7ページから6ページに減ってます!
「詳細を表示」で見てみます。


無事に「合格」がでました!他の「保留」のページもクロールされて「合格」になることを期待です。