「コンテンツの幅が画面の幅を超えています」が直らないのと格闘したお話

「別の業者さんに作ってもらったこのサイトがモバイルフレンドリーテストに通らないんですが、見ていただけますか?」というお仕事を請けたときのお話。

見た感じ別に悪いとこなさそうやし、まぁすぐ解決するやろとたかをくくっていたのですが、まずどこが悪いのかすらわからない時点から既にバトルはスタートしていたのだった…

なんとか解決したので、役に立つ情報かはわかりませんが、何かのヒントになれば幸いです。




viewportの記述ミス

カンマがありませんでした。

いやviewportの記述が脱字っとるやんwwwwwwはい終わり楽勝wwwwwwww

結果:何も変わらず。

これで終われば平和だったのですが、世の中そううまくいかないようです。
次いってみましょう。

そもそもモバイルフレンドリーテストはページが正しく認識されるのか?

何事にも不具合はつきものなので、こういった疑問を持つことも大事です。
Page Speed InsightsがほとんどのサイトでUnavailableとなっていたのも気になっていたので…
というわけで、自分が作った他のサイトや、有名なサイトをモバイルフレンドリーテストにかけてみました。

すると、だいたい想定通りの結果となっていたので、テスト結果は信用できそうな感じです。

さらに、body内部を全部消してすぐテストしてみたところ、

このページはモバイルフレンドリーです

との結果が出ました。
この時点で、下記のようなことがわかります。

  • テストはキャッシュ関係なく、現時点でのページでリアルタイムに行われる
  • 原因はbody内のどこかにある

それでは次にいきましょう。

Search Consoleも見てみる

テスト結果だけではイマイチ全貌を把握できないので、Search Consoleの閲覧ができるようにしてもらいました。

検索トラフィック→モバイルユーザビリティから、エラーを確認することができます。

すると、問題のあるページが大量にあったので、これはおそらく共通部分が原因だろうと思いました。

原因のありそうな箇所を削除してテストする

一部分を削除した状態でテストしてOKと出れば、その削除した部分に問題がある、ということになります。

というわけで、共通部分のheader,footerを削除してテストしてみました。

結果:ダメ

ダメでした。えぇ…共通部分が悪いんじゃないの…

共通部分が原因じゃないとなると、つまりサイト全体的に何かがおかしいということになってきます。

もう一度原因を探るべく、部分的に削除してはテストを繰り返しました。



異変が起きた

もう何を消してもダメで、何も書かれていない状態でないとOKにならないという絶望的状況のなか、半ばヤケクソでbody内を以下のようにしてやりました。

だいぶ精神が崩壊気味です。いろいろ削除して枠だけにしてあるので、記述がおかしいのはちょっと気にしないでもらいたいのですが、
問題は、この状態でもNGだったということです。

これはいったいどういうことなんだ…普通に考えてそんなわけがない…

ちなみに、<p>あああ</p>だけだとエラーになりませんでした。

ただ、逆に「これだけしか書いてないのにNGになる」というのは、原因が絞りやすくなったということに他なりません。

さっぱりわかりませんが、もう少しで解決する。そう確信しました。

問題はCSSにあり

ここまで中身のない状態でもエラーが出るということは、cssに問題があるという可能性が高いです。
というわけで、上の状態で全てのcssの読み込みをはずしてみたところ…

このページはモバイルフレンドリーです

きた…!もう少しだ…!

cssを元に戻し、上記に使われている要素のスタイルを眺めてみました。
すると、怪しい記述を発見。

min-width: auto;

おそらく、PCでの表示でmin-widthを設定していたのを、メディアクエリで打ち消したかったんだと思いますが、min-widthにautoは誤りです。

min-width:1px;となおしてテストにかけました(initialのほうが正しいかもしれないです)。

このページはモバイルフレンドリーです

やったぜ!!!

もちろんほとんど中身がない状態での通過だったので、本番環境でもcssをなおしてテストしました。
無事、通過。

よかった…。完全勝利。

おわり

モバイルフレンドリーテストは、SEOを行うにあたって避けては通れない部分ですが、これは数ある対策のうちの一つにすぎません。

更なる対策として、【集客職人 RankingCoach】などのSEOツールを使い、ホームページの集客力をアップしていくのも手段の一つです。SEOコンサルを行う際に使用するのも有効ですよね。

それでは、エレガントなSEOライフを。

イチオシ!書籍

シェアしてくだちい

フォローしてくだちい