cocoonのAMPの設置をして3日目、GoogleからAMPエラーのメールが毎日のように届くようになりました。PC素人の私ですが、cocoonAMPの設置方法と、なんとかAMPエラーをコツコツ修正、解決した事の覚書きです。
↓今回修正したampエラーはこちら
・タグ ‘style amp-custom’のCSS構文エラー
・許可されていない属性または属性値が HMTL タグにあります。
・属性「scope」はタグ「td」で使用できません。
・タグ「a」の属性「href」に不正な形式のURLが見つかりました。
などなど
cocoonのAMP設置と、サーチコンソールAMPエラーの解決法★初心者向け
cocoonのAMPを設置
これまでの経緯
既にcocoonにAMPを設置済みの方は飛ばして読んでください。
前からAMP導入を検討していましたが、初心者の私には難しそうでパスしていました。でも、アドセンスの最適化でGoogleがAMPの導入を何度も勧めてくるので重い腰を上げて調べてみると・・・
Google推奨してくるAMPプラグインは、画面が真っ白になったりエラーになったり、表示画面が変わりボコられる方が続出している記事を読み逃げ腰に(笑)でも、頑張らねば・・・
Google推奨のAMPプラグインを扱うのは私には無理だと判断し、多くの人が絶賛する簡単cocoonのAMP導入を決意しました。cocoonを使っていたのに、もっと早く導入すればよかった。
したことは、cocoon設定のAMP機能を有効化するにレ点+いろいろ
わいひら様のHPを見て設定をしました。PCに詳しくない私でも簡単にできたので未導入の方はぜひ。
cocoon AMP設定とAMPエラー対策
cocoonのAMP設置は、下記参考サイトを見ながら順番に行うと簡単に出来ます。
cocoon AMP機能を有効化する
cocoon設定→amp→AMP機能を有効化するにレ点をつける。
参考サイト cocoonわいひらさん
https://wp-cocoon.com/amp/
レ点をつけるだけという書き込みが多かったですが、その後にもする事がいっぱいあります。
AMPエラー事前対策 Contact form７
レ点をつけた後は、cocoonのAMPと相性が悪いプラグインContact form７の対策をします。
Contact Form 7の「お問い合わせフォーム」でAMPエラー／不具合が出るそうなので、ワードプレスの固定ページ→「お問い合わせフォーム」のページを開き、右側の下の方にある「AMPページを生成しない」にレ点を付けます。
詳しくはこちらの参考サイト
https://gobgoblog.com/2018/10/cocoon-amp-google-bokoboko.html
Google XML Sitemap
Google XML Sitemapのプラグインが入っている場合は、プラグイン→Google XML Sitemap→設定→HTML形式でのサイトマップを含めるのチェックを外します。これはAMPでは不必要でエラーの原因になるそうです。レ点を外したら更新を押すのを忘れないように。
Googleタグマネージャーの設定
次は、「Googleタグマネージャー」の設置です。
AMP化するとAnalyticsが計測してくれないので、「Googleタグマネージャー」の設定を行ってAnalyticsと連携させなければなりません。
初心者の私は、「Googleタグマネージャー?????」という状態でしたが、cocoonわいひらさんのHPどおりに設定したら、比較的簡単に設定できました。
Googleタグマネージャーはこちら
Googleタグマネージャーは、Googleから提供されているタグマネジメントツールで、計測タグや広告タグなどが簡単に作成できるようです。Googleタグマネージャー画面右上のログインをするとすぐに使えます。
グーグルタグマネージャーにログイン、通常トラッキングID設定を設定。コクーン設定→「アクセス解析・認証」 で、タグマネージャIDをocoonにも設定入力します。
参考
https://wp-cocoon.com/google-tag-manager-id/
次に、グーググマネージャーのAMP用を同じように設定したら、コクーン設定→「アクセス解析・認証」 で「AMP用 タグマネージャID」欄に入力します。
ダブルカウントを防ぐ
お疲れさま、もう一息です。
次に、ダブルカウントにならないようcocoonの「Google AnalyticsトラッキングID」を削除します。
コクーン設定→「アクセス解析・認証」→ 「Google AnalyticsトラッキングID」欄に、以前にAnalyticsとさせたときに入力した AnalyticsのトラッキングIDが入力されているはずです。
ここを入れたままにしておくと、Googleタグマネージャーの計測に加え、ここでもPVがカウントされて2倍のPVになってしまうようです。
コクーン設定→「アクセス解析・認証」→ 「Google AnalyticsトラッキングID」欄を空白に戻して出来上がり。
アナリティクスのアクティブリアルタイムユーザーのグラフを見て、ちゃんと1人でカウントされているか確認しようと書いてあったので凝視(笑)、よくわからんが、1人カウントや3人カウントなど奇数カウントがあったから大丈夫の様です。
cocoonのAMP設置 直後の変化
cocoonのAMPを設置直後の変化は、自分のサイトのURL＋「?amp=1」を加えて確認できます。Google推奨AMPで聞いたような不具合はなく胸をなでおろしました。
ただ、AMPを入れたら、H3.H4の見出しのデザインが変わりました（笑）前は、H3.H4がデフォルトとされているものと違うので不思議だったのですが、皆さんと同じような見出しデザインに変わりました。それ以外には特に変化はありませんでした。
cocoonのAMP設置 3日後からのエラー
プラグインContact form７のエラーなど、事前にエラーが出ないように設定したから大丈夫と思っていたら、3日後くらいから、グーグルからAMPエラーメッセージがきました。あわわ・・・
cocoon AMPエラーの直し方
エラーメールが来たら、どの場所がエラーなのか調べて直さなければなりません。
◆どうやってエラーの場所を見つけるのか |
を、事例事に詳しく説明していきますね。
素人なので、専門用語や、言い回しの間違いはご容赦ください。
タグ ‘style amp-custom’のCSS構文エラー
１．問題の修正をクリックし、サーチコンソール画面を開く
まず、googleから来たエラーメールの「AMPの問題の修正」をクリックします。
２．サーサーチコンソールでエラーページを確認
メールの「AMPの問題を修正」部分をクリックすると、サーチコンソール画面に飛びます。すると下のような画面になります。
２つもエラー記事があったんだ・・・と凹む(笑)
Googleメールによると、この２つの記事で私が何かを間違って入力しているのでAMPエラーになり、スマホでAMP高速表示されないよということらしいです。
３．GoogleAMPテストを使って悪い部分を探す
GoogleのAMPテストというツールを使います。こんな↓画面。このツールはAMPエラーを修正するのに必須です。
サーチコンソールでエラーが出ている①のURLを入力して、「URLをテスト」をクリックします。
ここのURLにふつうのURLを入れてしまい失敗。/?amp=1を追加してテストをクリック。
やはりAMPエラーのマークが出ました。そこで、下の方の赤枠の部分をクリックします。
↓するとこんな画面です。
どうやら、ページのソース80行目が悪い箇所の様です。(ページのソースとは、普通に表示して右クリック→「ページのソース」で出てくるあれです)
次に、1つ目のエラーをクリックします。すると右側にページのソースか表示され、悪い箇所が赤くマーキングされます。
読んでみると、よくわからないけれど赤い部分は
h3{border-bottom:double・・・・・・・・・・・・・
とあります。
h3というのは、「見出し」の事だ・・・・
「見出し」の書き方が悪いのかな・・・・
みたいに見当をつけます。
その下のエラーも同じようなエラー内容でした。
そこで、実際のページを表示してみると「見出し」がいつも使っているのと違います。
そういえば、このページだけh3の「見出しのスタイル」を２重線にカスタマイズしたくて、色々悩みながらページ編集画面の一番下にある「カスタムCSS」欄に入力していたのを思い出しました。きっと、このカスタマイズ方法が間違っていたのですね。
そこで「カスタムCSS」欄の入力をすべて消しました。
見出しはデフォルトに戻っちゃったけど、仕方ないですよね。
それから再びAMPテストを行うと、２つのエラーがいっぺんに解消されていました。おお～やった～
この後、サーチコンソールに訂正したよと報告します。
報告の仕方はこちら
cocoonのAMPを設置タグ ‘style [amp-keyframes]’の親タグは ‘body’でなければなりません
「 ‘style [amp-keyframes]’の親タグは ‘body’でなければなりません」をcocoonフォーラムでも検索してみるとフォーラムに相談した方が２人いました。
相談者2人は</div>が原因で、</div>の書き間違い</divだったり、変なところに</div>を入れたりしていたようです。これを訂正したら改善されたと書いてありました。
</div>は囲った部分をブロックレベル要素としてグループ化することができるタグのようです。
それでは、直していきましょう。
今回も、上記の１～３までは同じに進めます。
１．問題の修正をクリックし、サーチコンソール画面を開く
２．サーサーチコンソールでエラーページを確認
３．Google AMPテストツールを使って悪い部分(赤いライン部分)を探す
すると私の場合も、</div>の書き間違いと、変なCSSをページ下部の「カスタムCSS」欄に入力していたことが原因でした。
赤いラインの</div>の書き間違い部分は、cocoonで作ったスタイルボックスが原因でした。
この赤く囲んだ部分が、なぜか3重にもなっていたんです。これを訂正したら、エラーがなくなりました。
また、ページ下部の「カスタムCSS」欄を消したらエラーがなくなりました。
よく知らないのに、こざかしく「カスタムCSS」なんて入力して装飾しようとするから駄目なんですね～(笑)
正しく入力しないとAMPは作動してくれないようで、AMPエラーになってしまうようです。
訂正後はサーチコンソールに訂正したよと報告し、クロールしてもらい合格をもらいましょう。
報告の仕方はこちら
許可されていない属性または属性値が HMTL タグにあります。
またきたー!!!
前記の amp訂正後、深夜に再び6件のエラーメールが届いていました。前回のエラーは有効・合格となっていたから、これを直せばOKなのかな。諦めずに頑張ろう。
属性「scope」はタグ「td」で使用できません。
上と同じようにエラーの出ていると報告があったURLで、Google ampテストをしました。
「scope」という単語で３つもエラーが出ています。
調べてみると、どうやら表の作り方のエラーのようです。テーブルのセル（th、td）に使える属性に、「scope」属性というものがあるらしく、AMPでは「scope」はエラーになるということらしいです。
私の作った表のソースを見ると「scope」だらけ。
これが、実際にエラーが出た私のブログの表です↓ 少し複雑な表です。
他の表は問題なかったので、複雑な表を作る時は気を付けなければなりません。といっても、どう気を付けるのか解らんが、複雑な表は作らないほうが良いと言う事ですね。
「scope」を除いた表を新たに作るなんて、素人の私には無理なので表を全部削除しました。せっかく表を作ったのにもったいないですよね。でも仕方ない。。。とほほ
削除後は、コクーン設定→キャッシュ削除をしてから、再びAMPエラーテストをすると有効となり解決。３つのエラーが一気に解決です。やった～
消してしまった表の代わりに、上のように画像にしたものを貼り付けて対処しました。
対処後は、サーチコンソールで直したよと、報告しなければなりません。
修正を検証を押すと、下の画面になり1分ほど待ちます。
詳細を表示を押します。
すると、保留になります。
少し経つと、「Googleから修正したのを確認するよ～」というメールが届きます。
次のクロールが回ってきて検証してくれるまで待ちます。
このページが、合格になったのは翌日くらいでした。
タグ「style amp-custom」の CSS 構文エラー – 宣言が無効です。
サーチコンソールで次のエラーを開けてみると、なんと4ページも。
タグ「style amp-custom」の CSS 構文エラー – 宣言が無効です。
とありますからCSS 構文エラーなのでしょう。
同じエラーが出ている４つのページを表示してみると、またまた、すべての見出しをカスタマイズしていました。
見出しが地味だったので、二重線にしてみたり、茶色くしたり、自分なりにカスタマイズしたページばかりでした。
投稿ページ下部のカスタムCSSに、↓のように入力してありました。
良く解らずぐぐってコピペ、試行錯誤してとりあえず成功したんでしょうね。
padding: 0.6em;/*余白*/
: none;/*背景色をリセット*/
}
.article h3 {background
background: none;/*背景色をリセット*/
}
.article h2{ border-bottom: double; 3px solid black;
1px solid black;
}.article h3{border-bottom: solid 1px #deb887;
}
さっそく4ページとも、この入力を削除。削除後は、コクーン設定→キャッシュ削除をしてから、再びAMPエラーテストをすると4ページとも有効となり解決。４つのエラーが解決しました。先ほどのようにサーチコンソールで報告して終わりです。
タグ「a」の属性「href」に不正な形式のURLが見つかりました。
こちらも前記と同じ、ampテストで同じように検証できます。
エラーが出ているURLを入力し間違っている行を探します。
私の場合、電話番号のリンクがエラーになっていました。
改行して、電話番号とリンクを設定し直し、もう一度ampテストを行うと有効。前記したようにサーチコンソールで報告して終わりです。
その他のエラー
◆アドセンス広告でエラー
エラー訂正から半年。急にまたGoogleからメール。この覚書ブログが役に立ちました(笑)
エラー箇所を上記と同じように探ってみると・・・
cocoonの便利機能「ショートコード」のアドセンス広告が原因の様です。
長文の記事のみH４の上あたりに<ad>を入れたら、ことごとくAMPエラーを食らいました。広告が多すぎるってこと?
アドセンス広告は、文頭・H２上・文末に入れてもエラーにならないのに、なぜダメなのか不明。H４上の「ショートコード」を消したらすべて合格になりました。
まとめ
たてつづけにAMPエラーがあったので、根気よく訂正する必要がありそうと思っていましたが、その後はぷつんとエラーが出なくなりました。
記事作成時にも意識して書くようになったからだと思います。
再びエラー訂正があるようでしたら、その都度またUPしていきたいと思います。
関連記事