【解決方法】このページはモバイル フレンドリーではありません

はじめに

久しぶりにサチコ（Search Console）を見たらモバイル ユーザビリティでエラーが出てました。

エラーの型は

「テキストが小さすぎて読めません」
「クリック可能な要素同士が近すぎます」
「コンテンツの幅が画面の幅を超えています」

となってました。

そんなはずはないと、エラーが発生しているページをスマホで見たのですが、特に異常はありません。

Chromeの拡張機能でモバイルデバイスを表示させても問題ありません。

一方、Googleの検索結果画面をChromeの拡張機能で表示すると、何故かテキストは小さすぎて読めません。

何だよー、自分で作ったルールを自分は守ってないのに、よく人に言えるなー。

意地悪な上司が有利な立場を利用し、一方的に正論を言っているようで、少し腹が立ちました。

これはGoogleからモバイル フレンドリー ハラスメントと受けていると言っても過言ではありません。

丁度2020年10月20日にGoogleは米司法省から反トラスト法（独占禁止法）違反で提訴されているので、ザマー見ろと思いました。😁

正直、サチコって嫌らしいところがあります。

今まで何もなかったのに、ある日突然、後出しジャンケンでエラーを通知して来ることがあるのです。

一生懸命真面目にエラーの原因を調べてもよく分からない場合があります。

自然放置で直っていることもあり、何度も無駄骨を折ったことがありました。

今回のエラーは嫌味サチコの誤検知かなと思い無視することにしました。

モバイル フレンドリーテスト

その後、少し気になったので、エラーが発生しているページをモバイル フレンドリーテストで確認してみました。

するとスクリーンショットにとんでもない表示が現れました。

ギョエー！何じゃコラー！何でこうなるの？

こんな小さい表示になっていたら、そりゃテキストは小さすぎて読めません。

要素同士も近すぎてクリックできないし、コンテンツの幅が画面の幅を超えてます。

現物のスマホではこのような表示は出ないので、正直モバイル フレンドリーテストがおかしいんじゃないの？と思いました。

やっぱり「言いがかりだー。」「モバイル フレンドリー ハラスメントだー。」とお酒を飲みながら愚痴をつぶやき、再び無視することにしました。

しかし、5日後もエラーが消える気配がありません。

マズイことにインデックスにも問題が発生してます。

モバイル ファースト インデックスへの移行

当初Googleは2020年9月にモバイル ファースト インデックスへ強制移行する予定でしたが、2021年3月に延期されました。

2021年3月から、モバイル フレンドリーでないページはインデックスの順位が下がったり、最悪インデックスされなくなる可能性があるのです。

一生懸命記事を書いても検索で表示されなければ、存在してないのと同じです。😱

今Googleは米司法省から提訴されているので、2021年3月のモバイル ファースト インデックスへ強制移行は、さらに延期される可能性はあるものの、Googleの意思として、予定通り実施するかも知れません。

どちらにしても、エラーの放置は意味がないので、あきらめて原因を調査することにしました。😂

エラーの原因

表示画面が小さくなっていると言うことは、モバイルで正しくレンダリングされてない可能性があります。

当ブログがモバイルファーストのレスポンシブデザインになっているか点検して見ました。

CSSの記述

一般的にはPCファーストでCSSを記述し、必要に応じてモバイルのデバイスサイズに対応したブレークポイントでmedia query（メディアクエリ）を定義していると思います。

モバイルファーストはこの逆で、スマホ画面サイズで100％表示されるようCSSを記述し、スマホより大きい画面サイズを必要に応じてブレークポイントを設定し、メディアクエリを定義します。

当ブログは後者のようにQooQのCSSをカスタマイズしてます。

CSSのメディアクエリを確認しましたが問題は見当たらないので、viewportの表示領域を設定するメタタグを確認します。

viewportの設定

当ブログはGoogle推奨のviewportを設定してます。

<meta content='width=device-width,initial-scale=1.0' name='viewport'/>

なぜこの設定ではダメなのでしょうか。

エラーのページは画面が縮小されてしまうのが問題なので、minimum-scale=1.0という属性を追加し、最小倍率を1に指定することで、画面が縮小されないようにしてみました。

<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0' name='viewport'/>

メタタグを修正し、エラーページをモバイル フレンドリーテストを再度実施したところ、無事モバイル フレンドリーに変わりました。😄

エラーも0となり解消され一安心です。

2022年7月10日追記

2022年7月時点では、エラーは無く、全ページモバイル フレンドリーとなってます。

まとめ

「テキストが小さすぎて読めません」
「クリック可能な要素同士が近すぎます」
「コンテンツの幅が画面の幅を超えています」

のエラーはviewportに属性を追加することで無事解決できました。

実は最後に分かったことなのですが、本来はこのエラーは出ないはずでした。

その理由は、QooQのテーマのviewportには最初からminimum-scale=1.0が設定されていたのです。

管理人はQooQをカスタマイズした際、minimum-scale=1.0は不要だと思い、自分で削除していたのです。😅

サチコに指摘されなかったら、このエラーは永久に分からなかったかも知れません。

サチコ、酷いことを言ってしまい、ごめんなさい。🙏

訴訟がんばって下さいね。

応援はできないけど・・・。

気軽に足跡残してね！

この記事が「気になった・参考になった」と感じた方は、リアクションボタンか、ツイッターで♡いいねを押して、足跡を残して頂けると嬉しいです。

 ツイッターで♡いいねする

https://t.co/9ywJANvB0F

モバイル ユーザビリティでエラーが出た時の解決方法を記事に書いてみました。

同様のエラーに遭遇された方は参考にご覧下さい。#SEO #blogger #モバイルユーザビリティ #モバイルフレンドリー

— heavy-peat (@AfterWork_Lab) July 10, 2022

それでは今回の記事はこれでおしまい。