-->

Click

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

2020/10/24

SEO WebDesign

はじめに 

久しぶりにサチコ(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は不要だと思い、自分で削除していたのです。😅

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


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


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


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


気軽に足跡残してね!

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

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

Advertisements

Author

自分の写真
このブログのヒーローヘッダーは「きれいなお姉さん」がブラウザのアクセプト比に合わせてランダムに表示されます。
\ Follow me! /

Follower

Labels

Blog (6) PC (6) Repair (5) Blogger (4) WebDesign (4) Windows10 (4) YouTube (4) hatenablog (4) Cooking (3) Internet (3) SEO (3) GitHub (2) HTTPS (2) JavaScript (2) MFI (2) Anime (1) Beer (1) Browsersync (1) CSS (1) Editor (1) Git (1) Google (1) Monitor (1) New Year (1) Node.js (1) Nomad Code (1) Review (1) Smart Watch (1) iPhone (1) nodist (1)

Sponsored Links

QooQ