サーチコンソールでAMPエラー 表示(Cocoonで)
WordPress初心者でも 解決できました!
タグ「style amp-custom」のCSS構文エラーで困ってる人に向け、書いてみます。
参考になりますように〜
(感情ままに書くので、ちょっと長め。臨場感はあり 笑)
AMPエラー【タグ style amp-customのCSS構文エラー】がでた
AMPエラーで、詳細、をクリックして見ると。。。
ステータス エラー
型 タグ「style amp-custom」の CSS 構文エラーです。
とある。
続けて、URLを見ると。。。
AMPエラーが出てる記事は1つだけ。
タグ style amp-customのcss構文エラーの意味がわからない
でも、指摘されてる意味がぜーんぜんわからない。
タグ style amp-custom のCSS構文エラーって何?
Word Pressをビジュアルエディターでしか書けない超初心者にむかってそんな無理難題を言ってもらっても困りますよ。
タグって何?
style amp-customも当然わからないけどさ。
CSSの構文が間違ってるってことぐらいはわかる。
(わかっても何の役にも立たない)
エラーの原因を探すには
エラーの原因を探すため、エラーのURLをクリックしたら。。。
コードがズラズラ〜と出てきた。
赤くなって部分がエラー部分、らしい。
だけど。。。
エラー部分って、”部分”じゃないよ、赤くなってるところが、すごく長い!
どこがエラーの原因かなんて、探せるかいっ。
ネットで見た情報を試してみる
で。。。ネットで検索。
「これで治りました」みたいなものを試してみようっ、とする。
とはいえ。。。
ネットに書いてる情報が、私には難しい。
何が書いてあるのか、読んでもわからないものばかり。
うーむ。
とりあえず、簡単に書いてある、わかりやすいのだけをPICK UPして、試すことにする。
↓に、試したことを書いていきますね
まず、キャッシュの削除を試す
Cocoon設定から、キャッシュ削除してみる。
そのやり方は↓
Cocoon設定をクリック
左側サイドバー(Cocoon設定の下)にある、キャッシュ削除をクリック
AMPキャッシュの削除をクリック
簡単なこのキャッシュ削除で直ったらいいなぁ〜。(強い期待)
ワクワク。。。
AMPテストで直ったか確認できる
Cocoon設定のキャッシュ削除をした後。。。
AMPエラーが直ったかどうかが、Googleの【AMPテストのページ】で確認できるらしい。
(全部ネットからの情報ですもちろん)
さっそく、【AMPテストのページ】で、エラーが出た記事のURLを入れてテスト。
urlの最後に”?amp=1″を足す? 足さない?
しかし、ここで1つ疑問。
URLを入れる欄に入れるURLの、入れ方がわからない。
というのも。。。
ネットで調べると、【AMPテストのページ】のURL欄には、最後に”?amp=1″を足す、と書いてる人が結構いたから、です。
わからないので、?amp=1を足したurlと、足さないurl、2つのアドレスでテストしてみることにした。
結果は。。。
ははは、両方のアドレスでエラーがある、と出ました。
(赤字だらけ、は変わらず)
キャッシュ削除の効果は
キャッシュ削除は、私のエラーには効果なしでした。。
***URLの最後に”?amp=1″を足しても、足さないも、どちらも(めでたく)エラーになりました。
なので。。。
もしかしたら足す必要はないのかも、と思ってる (正解は知らない)
Cocoonフォーラムを見たら
キャッシュ削除でエラーが直らなかったので、今度はCocoonのフォーラムを探してみた。
すると。。。
タグ「style amp-custom」の CSS 構文エラー、が出た人の質問を見つけた!
おぉー、と喜んだのですが。。。
フォーラムでの話のやりとりが、読んでもわからない。
(呪文の羅列としか見えない)
ははは。ふう〜。呆
ただ、収穫もありました。
それは。。。
テーマエディター>Style.cssをコピペした後、一旦全部削除したら、エラーが出なくなった、という話。
そこから、次の手を考えてみる。
(↓に続きます)
cssエラーから、考える対処法
もう一度言いますね。
直したいAMPエラーの詳細は、タグ「style amp-custom」の CSS 構文エラー。
タグ「style amp-custom」の意味はわからないけど。。。
CSS構文エラー、とは、CSSの文が間違ってる、って意味ですよね? (そのままかぃっ)
Style.cssを一旦削除すると直った人がいる、から予想すると
1 Style.cssが間違ってる
2 Style.cssを全部削除してみる
3 それで、エラーがなくなったら、Style.cssがエラーの原因
でOK?
Style.css 触りたくないよぉ
うーむ。ここで悩む。
そう、style.cssを全部削除するか、どうか、です。
。。。。。
。。。。。
。。。。。
実は、style.css、ずーっと以前に触ったきり、なんです。
それも多分、テーマCocoonを入れた時。
(サイドバーなどを好みに表示するため、ブログからコピペして入れた、と記憶)
あの時は、記事もないから、思い切ってstyle.css触ってみたけど。
記事もある今、なるべく触りたくない。
しかも。。。
私の場合はStyle.cssが原因ではないような気もするよ。
というのも。。。
下↓につづく
css構文エラー、が出た記事は1つだけ
もし、Style.css が、今回のCSS構文エラーの原因だとすると。。。
もっと多くの記事がエラーになってるように思う。
私のエラーは、1つの記事だけ。
うーん。
ここで、詰んだか。だって他にすることが、思いつかない。
はー。
4つの選択肢から、どれを選ぶか
ない知恵を絞って考えてみる。
私ができることは4つ。
その1 放置して、見なかったことにする
気にしない。
エラーに気づかなかった、と思い込む。
見なかったことにする。
そして。。。
そのまま放置する。
→エラーが消えるわけではないので、ちょっと気持ち悪い。
その2 AMPページを生成しない、にする
Cocoonは、親切で使いやすく、初心者にも優しいテーマ。(感謝です)
そのCocoonは投稿記事1つずつ、AMPページを生成しないようにできます。
しかも、その設定変更は、投稿ページでチェックマークをするだけ)
→これで、AMPエラーは出なくなる。でも今までせっかくAMPだったのに残念だわ
その3 記事を1度削除したあと、書き直す
AMPエラーは、記事を書いた、最初は出てませんでした。
エラーが出たのは、記事を書き換えた後。(きっと)
ということは。。。
書き換えた時、エラーの原因となるような、変な書き込みを(気づかず)しちゃったんじゃないか、と予想したから。
で、そのエラーの原因となる書き込みがわからない(探せない)ので。。。
1度、記事を全部削除して、書き直せばいいんじゃないか、と考えたんです。
その4 ココナラで解決してもらう
ココナラで、CocoonまたはWordpressに詳しい人にお願いして、エラーを直してもらう。
1番早いし確実です。
金額は1番安い金額なら3,000円。
どーしても直せなくて、見ないふりをせずに直したくなった時は、お願いしよう。
選んだ記事の書き直し中、あれ? と発見したことが
↑の4つの選択肢から、選んだのは。。。
その3 記事を1度削除したあと、書き直す、でした。
入力し直すのは時間がかかるけど。。。
時間で直せるなら、いいかなぁ、と思って。
それで直るのかどうかも、興味あったし。(なんでも試したがりなので)
どーせならと、記事を少しリニューアルしながら、コツコツと書き直していきました。
すると。。。。
突然、原因、これじゃない? と思うことを発見!!!
意外! 原因は簡単だった!
Cocoonの皆さん、お待たせしました。
Cocoonの投稿画面の、1番下、ありませんか?
カスタムCSS、ってところ。
カスタムCSS
当ページ変更用のCSSコードのみを入力してください。
Styleタグは不要です。
ここにね。。。。
英記号の＂＞＂が入ってたんですよ!
見つけた時、「あっ、これが原因かも」って直感で思いました。
この、＂＞＂ が、構文エラーになってるんじゃないか、と
だって、CSSですもん。(詳しい説明はできません)
私は、入れた覚えなんてないのですが。。。
多分、記事を書き直した時に、なぜか間違えて入力されちゃっんでしょう。
カスタムCSSから不要な文字を消して、検査
カスタムCSSから、入れた覚えの全くない文字、＂＞＂を消した後。。。
Googleの【AMPテストのページ】↓でAMPテストで検査します。
すると。。。
エラーが無しになった!
やったー。
Googleの【AMPテストのページ】では、エラー無しの表示が確認できました!
祝!!!
嬉しい!
この後、google search consoleで、検証してみますね。
また結果お知らせします〜