以前は何も問題なく、緑の文字で、このページはモバイルフレンドリーですって出ていたのに、特にサイトの設定は変更していないのに、赤い文字で、このページはモバイルフレンドリーではありませんって出るようになった。
プラグインを全部オフにしてみたり、サイドバーに貼ってある画像を全部消してみたり、色々やってみたんだけど、何度やっても赤い文字でモバイルフレンドリーではないと出る。
エラーの内容は
コンテンツの幅が画面の幅を超えています
タップ要素同士が近すぎます
この二つ。そしてなぜこうなるかというと、私のスマホで自分のページを確認した時は、ちゃんとスマホ用のページになっているのに、Googleのモバイルフレンドリーテスト結果の画面に出てくるスクリーンショットでは、パソコン用の画面になっていて、パソコン用のサイトをスマホに出している状態だから当然レイアウトも崩れて、画像は全部画面からはみ出す。本来、PCの画面に合っていた画像は、スマホ版表示になった時に自動でレスポンシブ表示になって縮小されるはずなんだけど、レスポンシブ表示にならない。
モバイルフレンドリーテスト結果のスクリーンショットでなぜかスマホページがパソコン版のページで表示されてしまう
Googlebotはスマホを仮定して私のサイトのページを開いているはずなのにPC版のページが出てしまっている状態。なんでパソコン版の表示になるんだろう…。PC表示になる原因が思い当たらない、以前は問題なくモバイルフレンドリーですって表示されていた状態から、サイトの設定は何も変更していないから。
インターネットで検索すると、モバイルフレンドリーではないとか、モバイルフレンドリーテストで、スマホサイトがPC版表示で出るとか、エラーとしては同じような状況の情報が出てくるんだけど、私に起きている現象とは違うように感じました。(インターネットで見た情報は、例えば、うっかりスマホ版の幅を広くしていた等でした。)
h2タグ等、文字サイズをCSSで変えるようなことはしていない
見出しタグをCSSでカスタマイズしているとスマホ画面サイズからはみ出てモバイルフレンドリーではないというエラーが出ることもあるようなのですが(PC版ページをカスタマイズしたつもりがモバイル版ページにも反映されてしまっていた等)、私はテーマはsimplicity使用で、h2タグなどの線をCSSで消したりはしていましたが、h2やh3のような見出しタグも含めて、文字サイズをCSSで変更するようなことはしていませんでした。そしてなにより「モバイルフレンドリーに合格していた時と比べても、サイトの設定は何も変更していない」ので…。どうしようもなく。
キャッシュ関連のプラグインも使っていない
キャッシュのソフトを使っていると、スマホサイトのはずがパソコンで見た時の表示になってしまうことが起こり得るらしいのですが、私は、キャッシュを利用するようなプラグインも使っていません。
モバイルフレンドリーではなくなっているとこに気づいたのは、Google Search Consoleで
「モバイル ユーザビリティ」の問題が新たに検出されました
クリック可能な要素同士が近すぎます
というエラーが出たからです。グーグル サーチコンソールにそう言われても…、スカスカくらいリンクとかクリック出来る画像とかは離れています。
このエラーが出てしまうのは、本来スマホ版であるべきページがグーグルボットにはPC版で表示されてしまうので、SNSのアイコンとかが画像で表示されなくて、全部リンク文字になってダーッと並んでしまった結果、クリック(タップ)が近い、という警告が出てしまいました。
そして、複数やっているブログの全てが、Googlebotから見たスマホサイトのスクリーンショットが全て、パソコン版の表示になってしまっているという状態でした。
原因はサイドバーのテキストをHTMLタグを使って線で囲んだ箱を使っていたことだった
サイドバーのテキストをHTMLタグを使って線で作った箱で囲んでいたんだけど、私のサイトの場合、PC版のページでは画面右に来るサイドバーが、スマホ版になった時にインデックス(記事一覧)の下、記事個別ページでは記事の下に来るようになっているのですが
その、テキストを線で囲んでいたことが原因だったようなのです。
私は所有する全てのブログで、強調や区切り線のつもりで、サイドバーにあるテキストを線で作った四角で囲んでいました。
HTMLタグを消して線で囲んだ箱を削除すると、モバイルフレンドリーテストで出るモバイル版で見た時に想定されるスクリーンショットも、パソコン版のものが表示されてはみ出ることがなくなって、モバイル版のものが表示されるようになりました。
そういえばモバイル版の画面からはみ出てしまっている兆候は以前からあった
モバイル版で自分のページを見た時に、以前からバナーが正しく表示されず、
画面からはみ出てしまう状態で、私はそれがどうしてなのかその時はわからなくて、
バナーを外すということで対処していました。
しかし、上記に書きましたようにhtmlタグで作った線で作った枠を削除したところ、バナーも正しく表示されるようになりました。
このこともあって私のサイトの場合は、htmlタグで作ったテキストを囲んでいた枠が原因だったのだと思います。
短時間に何度もモバイルフレンドリーテストを繰り返すと、かなりしつこい画像認証を求められるようになる
目もショボショボしてきて疲れたし、何度もモバイルフレンドリーテストを繰り返していたら、やがてグーグルさんにかなりしつこい画像認証を求められるようになりました、信号機の写真をクリックしてくださいみたいなのが、一回では許してくれなくなり、一回モバイルフレンドリーテストをするにも何度も何度も画像認証を求められるようになった。まあ確かに、何度も何度も同じページをモバイルフレンドリーテストして、短時間に何度も何度も同じ動作を繰り返したら、こいつ怪しくないか?って疑われちゃうよね、相手は機械だけど。
全く同じ原因ではないかもしれないけど、モバイル版で何か、はみ出てしまう要素がサイトにないか確認してみよう
たまたまエラーでGooglebotからはPC版のページが表示されてしまうこともあると思うのですが、何度も何度もやってもPC版の表示が出てしまう場合は、モバイル版になった時に何かモバイル版の画面サイズをはみ出てしまう要素がないか確認してみると良いでしょう。
コメント