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

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

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

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

viewportの記述ミス

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

<meta name="viewport" content="width=device-width,initial-scale=1.0 maximum-scale=1.0">

1	<meta name="viewport" content="width=device-width,initial-scale=1.0 maximum-scale=1.0">

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

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">

1	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">

結果：何も変わらず。

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

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

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

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

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

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

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

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

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

Search Consoleも見てみる

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

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

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

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

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

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

結果：ダメ

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

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

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

異変が起きた

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

<body>
<div id="wrapper">
<div id="">
<article class="">
<main>
<p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
</main>
</article>
</div>
</div>
</body>

<body>

<main>

<p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>

</main>

</article>

</div>

</body>

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

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

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

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

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

問題はCSSにあり

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

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

きた…！もう少しだ…！

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

body {
  min-width: auto;
  padding-top: 90px;
}

body {

min-width: auto;

padding-top: 90px;

}

min-width: auto;

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

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

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

やったぜ！！！

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

よかった…。完全勝利。

おわり

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

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

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