当サイトの記事をインデックス登録しようとしたのですが、モバイルフレンドリーテストでエラーが出てしまいました。
ネットで探してもなかなか答えにたどり着けなかったので、解決に至るまでの経緯をまとめました。
結論としては表示速度が原因
最初に結論を言ってしまうと、Cocoon設定の高速化を行うと解消しました。
モバイルフレンドリーテストとは？
スマートフォンなどの端末でWebページを表示した際に、閲覧に問題がないか確認できるテストです。
モバイルフレンドリーかどうかはモバイルフレンドリーテストやGoogle Search Consoleなどで確認できます。
モバイルフレンドリーテストが通ったり通らなかったりする
Google Search Consoleでインデックス登録をしようとURL検査を行ったところ、「インデックス登録できますが、問題があります」のようなメッセージが出ました。
確認してみると、「モバイルフレンドリーではありません」とのこと。
しかし、実際にモバイル用の画面で確認してみても表示の崩れは見られませんでした。
その後、モバイルフレンドリーテストのほうで確認したところ、「モバイルフレンドリーです」と表示されました。
Cocoonは完全レスポンシブだし、このページがダメならほかのページもダメなはずだろうと思い、別のページも試したところ、合格したりしなかったりまちまち。
挙句の果てには、原因がわからないまま不合格のページを複数回テストしていると、何も修正していないのに「モバイルフレンドリーです」と表示される始末。
もう訳が分かりません。
真面目にデバッグしようとした
ネットの情報だけでは解決できないと考え、真面目にデバッグを試みました。
Google Search Consoleの[テスト済みのページを表示]で[その他の情報]タブを見ると、「
ページが部分的に読み込まれました 」との情報が。
多少cssをいじった覚えがあったので、デフォルトの状態に戻して確認するも結果は変わらず。
高速化によって解決へ
Cocoonではないテーマに変えると問題は解消されるのですが、そんな問題があるのにCocoonが何も修正されていないはずはないと思い、再びネットの海に潜ることに。
すると、気になるやり取りを発見。
リソースの読み込みに時間がかかりすぎて、
https://productforums.google.com/forum/#!msg/webmaster-ja/bjUqoRwVwMY/CbvCIJ0HDAAJ
レンダリングが完了していないようです。そのため CSS や JS が完全に適用されず、モバイルフレンドリーになる前の状態を Googlebot が見ていると思われます。
そこで、[Cocoon設定]-[高速化]を見てみると、いろいろとチェックが外れていました。
全部付けたつもりで、[変更を保存]せずに別のことをやってしまったようでした。
高速化のチェックをすべてつけて再度Google Search ConsoleのURL検査を行うと、「
URL は Google に登録できます」との結果に。やったね！
まとめ
自分でスタイルシートをいじってからモバイルフレンドリーテストをしたこともあり、調査に余計な時間をかけてしまいました。
高速化は大事です。
コメント