【10秒で解決】Cocoonで「このページはモバイルフレンドリーではありません」の対処法

Google Search Console（サチコ）で「公開URLをテスト」を実行したさいに、上記のように表示されたときの解決方法をお伝えします。

使用テーマは「Cocoon」です。

解決策：このページはモバイルフレンドリーではありません

さくっと解決策をまとめると下記の通りです。

実際の画面はこちら▼

これでもう一度、公開URLテストをしてみてください。

「このページはモバイルフレンドリーです」となると思います。

私の場合大丈夫でしたが、CSS縮小化によって画像が表示されなくなることがあるようです。

調べてみるとCocoonフォーラムに解決方法があったので参考にしてください。

参考記事

かんたんにまとめると下記が原因の可能性があります。

私が「このページはモバイルフレンドリーではありません」に遭遇したのは、新記事がインデックスされなくなったときです。

今までは「インデックス登録をリクエスト」した翌日にはインデックスされていたのですが、ある日をさかいに全くインデックスされなくなりました。

そこで原因を探ろうと色々やっている中で「公開URLをテスト」を実行したときに「このページはモバイルフレンドリーではありません」と表示されました。

問題の詳細は2つ。

スマホで自分のページを開いても正常に表示されています。

それなのに「公開URLをテスト」→「テスト済みのページを表示」→「スクリーンショット」を見るとページが適切に表示されていません。

調べてみると、どうやらユーザーが見ている表示とGooglebot（クローラー）が見ている表示が違うらしい。ユーザーに表示されるページは適切に表示されるけど、Googlebotがモバイルフレンドリーになる前の状態を見ているために、インデックス要件を満たしていないと判断されているのかもしれません。

リソースの読み込みに時間がかかりすぎて、レンダリングが完了していないようです。
そのため CSS や JS が完全に適用されず、モバイルフレンドリーになる前の状態を Googlebot が見ていると思われます。
Search Consoleヘルプ

GooglebotがCSSを適切に読み込めていないことが原因のようです。

これは思い当たるふしがあって、モバイルフレンドリーエラーが出るようになる前に見出しのカスタマイズなどを「追加CSS」に記入していました。これによりCSSが長くなったり、不要な改行ができてしましました。

前記した「CSS縮小化」を実行することで解決することができます。

解決してからはインデックスされるようになりました。