CocoonでGoogleのモバイルユーザビリティでエラーが出たら親テーマのアップデートを確認しようというお話

こんにちは！うるま市にあります学習塾ベンガルです！

ここ数日頭を悩ませていたのが、このウェブサイトのモバイルユーザビリティイイイイイイイイイイでえええええええっす！

ウェブサイトというのは基本的にパソコンで作りますし、パソコン画面での表示をベースに組み立てていきます。このサイトだってそう。

でも、パソコンでウェブサイト見る人より、スマホの方が多いのが今のご時世。

このベンガルブログだって訪問者の7割はスマホでの閲覧です。

そこで大切なのが「スマホでも見やすいか＝モバイルユーザビリティ」ってやつ。

パソコンだとうまく表示されるものもスマホだとすこしちがってくるもので。ぼくが見るには何の問題もなく、良好だと思っていましたが…

Googleからなんか警告きてるううううう！

なんだなんだなんだ⁈

おそるおそるチェックしてみると、うわ！40件近くのページで「貴様のサイト、スマホで見づらいんだが」という通知がきてました。

はあ？これで文字が小さすぎるってGoogleさんよ、あんた「たまごっち」でページ見てるんですか？

あ、アメリカっすか？シリコンバレーから見てるからっすか？そりゃ遠いですもんね？ハズキルーペ送りましょうか？

てことでGoogleのデベロッパーツールで見てみると…

いやいやいやいや！何だこれ⁈

どゆこと？

もはやラフプレーじゃないですか。ちょっと困りますよ。

こんなにスッカスカに表示されたら、そりゃ文字も小さいっす。ハズキルーペでも小さすぎて読めないっす。

右側のちょっとしたアパート経営のできそうなみたいな土地は何？

iPhone12、iPhone8、iPhoneSE（旧）、iPad（10.2インチ）で実際に表示してもこうはなりません。

でもGoogleのデベロッパーツールで見てみると、たしかにこうなる。てことはGoogle botはたぶんこう見えてる。

実際に表示されなくてもGoogle先生の目にこう見えてたら、そりゃエラー出ますよね。

う〜ん、ヘッダーがなんでこんなに長いのか謎ε-(´∀｀; )

CSSいじくり回しても直らないし。cocoonのフォーラム片っ端から読んでもちょっと違う気がするし。同じようにエラーで引っかかった人のブログでの対処法読んでもちょっと違うし。

そもそも何の挙動がおかしいのかさえわからん。メロスには政治がわからないらしいですが、僕にはコードがわからん。ついでに政治もわからん。

放っておこうとも思ったんですけど、実は半年ぐらい前から同じこと起きてまして。笑

放っておいたら増えてきてたんですねε-(´∀｀; )

てことで粘りづよくcocoonのフォーラムを見てると、それっぽいエラーの人のとこにこんなことが書かれていました。

さらに天啓が。

Cocoon

サーチコンソールのモバイルユーザビリティエラーが解決できない お世話になります 今回サーチコンソールからメールが来て確認すると ・テキストが小さすぎて読めません ・コンテンツの幅が画面の幅を超えています ・クリック可能な要素同...

WordPress自体はアップデートしていたんですが…アップデート…アップデート…

もしかして親テーマ（cocoon）のアップデート？

たしかに今まで子テーマで動かしていたので親テーマのことを気にしたことはなかったし、アップデートなんて自動的にされるものだと思っていた。

これは、やってみる価値がありそうじゃないか。いいじゃないか、サイトがぶっ壊れても（悪魔のささやき）

てことで親テーマの方をアップデート！

すると……？

直っとるやんけ！

なぜか1件だけ直っていませんが、ほぼほぼ解決(´∀｀)

cocoonを使っていて「ヘッダーが異常に長い」「スマホで見ても普通だけど、Googleのデベロッパーツールで見るとおかしくなってる」という僕みたいなケースの人はいけるはずです。

そもそも40件近くまで放置していたアホンダラは僕だけかもしれませんが…(´∀｀)

てことで、同じようなエラーでここに来た方、cocoonの親テーマのアップデートを確認してみてください。

もしかしたら、もしかするかもしれませんよ。

あ、もちろんcocoonのアップデートしたら表示が崩れる部分はでてきました。でも直せる範囲にとどまっていますので、ぜひご確認ください！