解決！テキストが小さすぎ・要素同士が近すぎエラー【Search Console】

Google Search Console で
「テキストが小さすぎて読めません」
「クリックできる要素同士が近すぎます」
という2つのエラーが検出されましたが、無事に解決できたので、まとめてみました。

「「モバイル ユーザビリティ」の問題が新たに 検出されました」という恐ろしいメールが届いたときの修正の記録です。

まずは モバイル フレンドリー テスト でエラーを確認する

メールの内容では具体的に何が問題なのかわからないので、エラーのヒントを得るべく、テストをしてみました。

モバイル フレンドリー テスト – Google Search Console

その結果、

「このページはモバイル フレンドリーです」と表示されてしまった…。

いいんだけど、よくない。

どこをどう修正すればいいんだか。。。

「テキストが小さすぎて読めません」対応

思い当たる節がない。
メールを読んでのファースト・インプレッションはこれでした。

テキストとして表示している文字は、サイトの他のページと変わらないので問題ないはず。

画像に含まれる文字が確かに小さいかもしれないけれど、そんなことまでチェックされている？

とりあえず、画像は表示しているのみでクリックしても拡大表示しない設定にしていたのを、クリックしたら拡大表示するように修正しました。

メールから「モバイル ユーザビリティの問題を解決する」リンクをクリックして、Google Search Console に移動します。

エラーの詳細欄で「テキストが小さすぎて読めません」をクリックして移動したページの「修正を検証」をクリックして検証しました。

「「モバイル ユーザビリティ」の問題の修正を検証しています」というメールが届いて、あとは結果待ちです。

「クリックできる要素同士が近すぎます」対応

身に覚えがない。
このエラーメッセージからの衝撃に対する感想はこれでした。

クリックできる要素のレイアウトは、サイト内の他のページと全く一緒なので、修正すべき点が思いつかない。

というわけで、上記の「テキスト小さすぎ問題」を修正した後で、「要素近すぎ問題」については特に変更なしで、

Google Search Console > モバイル ユーザビリティ > 詳細
「クリックできる要素同士が近すぎます」をクリックして移動したページの「修正を検証」をクリックして検証しました。

結果

修正の翌日、結果をチェックしました。

Google Search Console > モバイル ユーザビリティ > 詳細
各エラーの「確認」欄に「合格」と表示されていました。

「「モバイル ユーザビリティ」の問題が修正されました」というメールも届いたので、これで修正は完了です。

再度 同じエラーを指摘するメールが届いた（2019年12月24日 追記）

2019年10月18日 追記

2019年10月に、再度「モバイル ユーザビリティ◯◯◯で問題が検出されました」というメールがGoogleから届きました。

貴サイトでは、以下の問題が検出されました。
テキストが小さすぎて読めません
クリック可能な要素同士が近すぎます

複数ページが修正対象として記載されていました。

モバイルフレンドリーテストでは全ページで「このページはモバイル フレンドリーです」という結果になり、特に問題になりそうな部分もなかったので、そのまま検証しました。

翌日、「一部のページは修正が確認できましたが、残りのページでは問題が依然として修正されていないことが確認されましたと」いうメールが送られてきました。

念のため、再度モバイルフレンドリーテストを実施してOKだったので、再度検証しました。

翌日、すべてのページで修正が確認できましたというメールが届きました。

Search Console での「モバイル ユーザビリティ」と、モバイルフレンドリー・テストでの検証ロジックが異なるんでしょう。

統一してくれればいいのに…。

2019年12月24日 追記

「テキストが小さすぎて読めません」と「クリックできる要素同士が近すぎます」、この2つのエラーを指摘するメールを再度受信しました。

前回までの対応と同様に「モバイルフレンドリー・テスト」を実施すると「このページはモバイル フレンドリーです」と表示されるので、そのまま検証すると、つつがなく合格しました。

修正できるものならして何度も同じエラーを指摘されないようにしたいのですが、検証してもエラーが出ないので直しようがない。。。

クリスマス・イブにこんな記事をアップしているなんて（泣き笑い）。

最後に

腑に落ちないことだらけですが、合格だったのでOKってことで。

ネットでは「何もいじらずに更新だけして検証したら、エラーがなくなった」という記事もあり、謎は深まるばかりです。

もっと明確に「どこ」が「どのように」エラーだよって教えてもらえると、自信を持って修正できるんですが、欲しがり過ぎ？

推奨サイズより大きい画像を指定してください-警告の対応GoogleSearchConsole

SearchConsoleモバイルユーザビリティの問題を解決した方法