サーチコンソールでインデックス登録するためURL検査で公開URLをテストしました。
するとモバイルユーザビリティに2つのエラーが表示されていた。
- クリック可能な要素が近すぎます
- コンテンツの幅が画面の幅を超えています
テーマはCocoonを利用させていただいています。
実は結構前からこのエラーは毎回出ていたのですが、問題なさそうなので放置していました。
しかし、放っておくのはやはり気持ち悪いので、今回本腰を入れて原因を調べてみたところ無事解決に至りました。
モバイルユーザビリティのエラー
サーチコンソールでURLを検査、公開URLをテストをすると「URLはGoogleに登録できますが、問題があります」と表示されます。
場所はモバイルユーザビリティで「このページはモバイルフレンドリーではありません」とのこと。
詳細を確認すると、問題の件数に2つのエラー表示されていました。
- クリック可能な要素が近すぎます
- コンテンツの幅が画面の幅を超えています
はじめは、広告とか表とか画像がはみ出ているのかと勘ぐりましたが、どれも駄目。
念の為、Googleのモバイルフレンドリーテストを実行すると「このページはモバイルフレンドリーです」と表示されます。
サーチコンソールの拡張にあるモバイルユーザビリティのエラーも0件です。しかし、URL検査でテストするとエラーが出るから不思議だ。
原因はCSS
わたしは2つのブログでCocoonのテーマを使用しています。
今回、もう片方のブログにはエラーが出ていませんでした。
そのことから2つのブログの設定を比較していくことで、原因を探りました。
結論から先に言いますと、”CSSが原因“でした。
どうやら「CSSの読み込みが遅い」らしい。
- CSSの読み込みが遅い
- CSSを読み込むタイミングに問題がある
わたしのカスタムしたCSSは400行を超えていて、無駄な改行やらが多いからこれが原因だったのかも。
で、肝心な解決方法ですが、Cocoonの場合は超簡単。
解決方法
WordPressの「Cocoon設定」から「高速化」をクリック。
「CSSを縮小化する」にチェックを入れるだけ。
これでサーチコンソールの公開URLをテストしてみてください。
今度は問題なく「このページはモバイルフレンドリーです」と表示されるはず。
試しに「CSSを縮小化する」のチェックを外して、もう一度テストしたら再びエラーが出たので、わたしの場合はCSSが原因で確定かと思います。
考察
素人考えですが、CSSを縮小化することによって、読み込みの遅さが解消したのではないかと思います。
このCocoonの高速化は、CSSの余分な改行や余白を整理することによってソースコードのサイズを減らしているらしいので、CSSを見直して整理すれば、縮小化しなくても解決するのかもしれない。
Cocoon以外のテーマでも、もしかしたらCSSの読み込みが原因の可能性があるかもしれません。CSSを大量にカスタマイズしたなど、心当たりがある方は確認してみてください。
