CSS構文エラーとの戦い | Cocoon利用者 | 初心者向け

はじまりは突然に。

「タグ「style amp-custom」のCSS構文エラーです」

Google Search Consoleを使い始めてから早々に洗礼を受けました。

なんとかエラーが取り除けるまでに4日間・・・。

AMP対応にしようとした時にぶつかった問題です。
私のようにCSS等の知識がない方も同じような問題にぶつかる可能性がありますので、備忘録も兼ねて残しておきます。突貫で作っていますので、画像やリンクは少な目です。ご了承ください。

AMPとは、簡単に言えばモバイル（スマホやタブレット）での高速化対応の事ですが、
AMP？なにそれ？という方には全然関係のない記事になりますのでスルーしてください。

まず、簡単な利用環境ですが、
テーマ：Cocoon
スキン：なし
です。

エラーと格闘している間に色々なものをいじったり調べたりしましたが、いざ解決してみると、想像以上に簡単な手順で出来ました。

では、順に記載していきます。

ロゴをチェックする

AMPエラー「必須属性「src」がタグ「amp-img」にありません。」
というエラーが出ている方はここの可能性があります。

私の場合は、以前よくわからずにアップした画像がサイズオーバーしていたので、ロゴをクリアしていました。

 

ロゴのサイズが幅600px、高さ60pxを超えていたり、ロゴの設定がされていないと、
「必須属性「src」がタグ「amp-img」にありません。」と言われることになります。
すぐに直しましょう。

併せて、少し下にスクロールして頂くと

「スキンのスタイルを有効にする」というチェックボックスがありますが、
スキンの設定を”なし”にされている方はチェックを外さないとエラーになります。

こちらも外し忘れにご注意ください。

テーマエディターをチェックする

こちらも同じように「必須属性「src」がタグ「amp-img」にありません。」言われた部分です。

外観→テーマエディター

で確認できます。

私は目次をカスタムするためにCSSをコピペして入れていたのですが、
当然Cocoon設定→AMP→AMP有効化に対応しておらず、そこがエラーの原因になっていました。

わかる方は修正して頂ければ良いと思います。
私の場合、色々調べましたがわからなかったため、こちらはエディターに追加したCSS部分を削除することで解決しました。

キャッシュを削除する

一通り作業が終わりましたら、
Cocoon設定→キャッシュ削除→AMPキャッシュの削除

をクリックして頂いてキャッシュを削除してください。

これをやらないとうまくエラーが解消されません。

ＡＭＰサイトをチェックする

AMPテスト

こちらのサイトでご自身のサイトアドレスの後ろに　/?amp=1　を追加してチェックをしてみてください。

このような画面が出れば成功です。

あらためてGoogle Search Consoleへ行き、修正の報告を行えば完了です！

その他の設定として、

Cocoon設定→目次→見出し内タグ→H見出し内のタグを有効にする
のチェックを外しています。

おまけ | Google タグマネージャーの設定

AMP化をされる際にGoogle タグマネージャーの設定をされる方も多いと思います。

こちらは

Cocoon設定→アクセス解析・認証→Googleタグマネージャー設定

から確認できます。

細かい設定等は、ご自身で検索頂ければと思いますが、Google Analyticsとの連携でかなり苦戦しましたのでこちらも対処法を載せておきます。

私もそうだったのですが、先にGoogle Analytics設定をされている方はダブルカウントになってしまうため、トラッキングIDを消して頂く作業が必要になります。

ただ注意していただきたいのが、タグマネージャー設定が終わるまで消してはいけません！

私は早まってIDを消してしまっていたので、調べ方を検索してGoogle Analyticsに見に行ったのですが・・・トラッキングIDがどこにもない！？

どうやら2020年の途中からGoogleが推奨するWebとアプリ両対応を選ぶと

おそらくこんな画面が表示されていると思います。

かなり途方に暮れる状況なのですが、安心してください！大丈夫です！

Google Analyticsの仕様が変わった事で、Googleタグマネージャーの方で調べなくても設定できるようになっていました。

タグマネージャーのコンテナ作成途中、タグの設定の際にこんな画面が出てきます。

 

ここのGoogleアナリティクス設定のところのプルダウンを「Googleアナリティクス設定」に変更して頂ければ、トラッキングIDがわからなくても自動で設定してくれるようになります。

通常のGoogleタグマネージャーIDおよびAMP用のコンテナの設定もできたら、忘れずにCocoon設定からGoogle AnalyticsのトラッキングIDは消しておきましょう。

 

いかがだったでしょうか、少しでも解決のお手伝いが出来たのならうれしいです。