vier

Let's be more curious.

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

はじめに 

久しぶりにサチコ(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となり解消され一安心です。



まとめ

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

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

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

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

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

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


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


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


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


気軽に足跡残してね!

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

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

New Post Old Post
No Comment
Add Comment
comment url