ホームページ制作をご検討の方向け『オンライン無料個別相談』のご予約はこちら

【原因と解決方法】見た目も問題ないのにSearch Consoleで「ページはモバイルで利用できません」

フリーランスママデザイナーのEmikaです。
中小企業・小規模事業者のWeb担当者向けにホームページ制作やホームページリニューアルに役立つ情報を発信しています。

問題

Search Consoleでインデックス登録をしようと思い、URL検査をしたら

  • URLはGoogleに登録できますが、問題があります
  • ページはモバイルで利用できません

と表示された。

モバイルユーザビリティにて「コンテンツの幅が画面の幅を超えています」というのが利用できない理由。

しかし、サイトはレスポンシブ対応で作成しており、現在ページを確認しても、はみ出ているコンテンツは見つからない。
スマホでの見た目にも問題ないが、モバイルフレンドリーテスト上でのみ、エラーが出ているという状態。

モバイルフレンドリーテストを開き、URLを入力すると、詳細の結果を見ることができます。

明らかにページ内でコンテンツがはみ出ている(画面で横にスクロールしてしまう)場合は、はみ出ているコンテンツを画面の幅におさまるように修正すればOKです!

原因

原因はコンテンツの幅に問題があるのではなく、CSSの読み込みが遅れるなどのタイミングが問題だったよう。

モバイルフレンドリーテストで、「テスト済みのページを表示」というところをクリックすると、

  • HTML
  • スクリーンショット
  • その他の情報

というのが表示される。

このその他の情報というところを見ると、「◯/◯件のリソースを読み込めませんでした」と表示が出る場合がある。

ここに「style.css」などのCSSファイルが表示されているのであれば、クロール時にCSSを読み込むのが遅くて、そのままクロールされてしまった結果、CSSが正しく読み込まれていないという判断をされてしまったということになる。

つまり、Search Consoleでは、CSSのタイミングによっては、正しく判断されない場合もあるということ。

解決方法

解決方法としては、3日ほど様子を見てから再度インデックスのリクエストを行う。

最後まで読んでいただき、ありがとうございます。

ホームページ制作のお問い合わせはこちら

ホームページ制作に関するご相談、ご質問、お見積もりなどを承っております。
お気軽にお問い合わせください。

お問い合わせをする
この記事を書いた人
Emika

独学でデザインとコーディングを学んで起業。
フリーランスママデザイナーとして仕事と育児と家事に奮闘中。
デザインオフィスEmika Designでは小規模事業・個人事業主向け 事業拡大のためのホームページ制作を中心に、Webデザインとグラフィックデザインの制作をおこなっております。

Follow Emika
ホームページ制作
Share this article
Follow Emika
ホームページ制作・運用に役立つブログ|Emika Design Blog
タイトルとURLをコピーしました