『テキストが小さすぎて読めません』のエラー。モバイルフレンドリーテストしても変わらなかったら?

『テキストが小さすぎて読めません』のエラー。モバイルフレンドリーテストしても変わらなかったら?

Googleサーチコンソールのモバイルユーザービリティにエラーが出てしまいました。

ブログ始めて1年間くらい、特になーんにも起こらなかったのになぜか最近は色々問題が…

なんとか解決できたので、今後のために書いておきたいと思います。

Googleサーチコンソールでモバイルユーザービリティに問題が…

Googleサーチコンソールのメッセージ通知で「モバイル ユーザビリティ」関連の問題が 2 件検出されました。

とお知らせが来ていました。

確認方法は、サーチコンソールのトップ画面の左上の三本線のメニューを開き、モバイルユーザービリティを開くと詳細が表示されます。

私に出ていたエラーは

①テキストが小さすぎて読めません

②クリック可能な要素同士が近すぎます

でした。

クリックすると問題のページのURLが表示されるので確認して下さい。

②つ目のエラーに関しては思い当たる所があったので先に修正しました。

 

エラー①テキストが小さすぎて読めません

一つ目の『テキストが小さすぎて読めません』ですが…

????…

テキストって?文字のこと?文字の大きさ?

小さすぎるって言われても…

私はほとんどの記事をスマホを使って書いています。

WordPressのビジュアル入力の方で書いているので、文字の大きさを変更するのは『見出し』を使っているところぐらいです。

でもそれだと小さいというより、逆に大きくしているので…まったく心当たりがありません。

解決方法を検索して見つけたのが

『モバイルフレンドリーテスト』でテストをしてみると特に問題がなく、数日後には正常に戻っていた。

とゆうもので、私もやってみようと思い、サーチコンソール内を色々探してみました。

でも、『モバイルフレンドリーテスト』というのがが見つからなかったので、あきらめて、そのうちなおるのかなーなんて数日放置してみました。

ですが、やっぱりなにも変わらずダメでした。

とりあえずテストしてみたいけど、テストする場所が分からない。

そのテストはどこにあるんだーと悩んで、なんとなくGoogle検索に『モバイルフレンドリーテスト』って入力したらすぐ出てきました(^^;;

で、対象のURLを入力してみたところ、『モバイルフレンドリーではありません』とでて、サーチコンソールに書いてあったのと同じ理由で『問題あり』でした。

残念。自力で直すしかないと思い調べました。

 

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

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

Google検索するとすぐ出ます。

そこに問題のURLを入力し、問題点を再確認。

モバイルフレンドリーではありません。

とゆうメッセージと共にサーチコンソールと同じ理由が2つ書かれていました。

『テキストが小さすぎて読めない』という事と、問題ページは分かったけど、どこが悪いかもっと特定できればなーと思いながらながめていると、

上の方に『ページの読み込みに関する問題』

とゆうのがあり、開いてみると

『ページが部分的に読み込まれました。』(一部読み込めない部分がある)

と書かれていてその下に

『3個のページリソースが読み込めませんでした』

とあり、詳細理由と特定URLが表示されていました。

2つは、なんかrobots.txtによってブラックされたみたいな事が書いてあって…そこは私の手に負えないのでとりあえず置いておいて、

3つ目にその他のエラーとして…wp-content/uploads/2020/11/EE34…1023×728jpegのようなURLが書かれていたので添付画像に問題があるのかなと、少し解決の糸口が見えてきました。

 

投稿のテキスト入力画面で問題のURLを探す

問題のURLが添付画像っぽいことがわかったので、画像を特定するためにアップロードした月などを頼りにメディア内を探しました。

でも一致するURLがありませんでした。

もしかすると、すでに『完全に削除』をして消してしまっていたからかもしれません。

結局見つけられずに困ってしまいました。

それで投稿のテキスト入力画面の方で探してみるとすぐに見つかりました。

ビジュアル入力の方で削除していた画像が、テキスト入力では削除されず残っている。

という状態になっていました。

それが原因で画像が表示出来ずエラーになっていたようです

画像挿入のhtmlタグは

< img src = “画像ファイル名” >

記事を書くときに画像の差し替えをしたりしていたので、表示されている画像と削除済の画像の挿入タグが連なって書かれていました。

ビジュアル入力で表示されている画像を一度削除してみると、テキスト入力画面では不要な挿入タグだけが残っている状態になりました。

なので、不要な部分を削除しました。

 

改めてビジュアル入力で必要な画像を挿入し直して修正は完了です。

 

エラー②クリック可能な要素同士が近すぎます

クリック可能ということは『リンク』を貼っている部分のことになります。

私の場合、そのページで使っているのは『内部リンク』だけでした。

なので、内部リンクを貼っているところを見直しました。

内部リンクを貼る時はだいたい、そのリンクに関係する説明をリンクの前に書いているのですが、たまたま文章を入れず、2つのリンクを続けて貼っているところがありました。

そこがエラーの原因っぽかったので、間に文章を付け加えリンク同士の間隔をあけたところ、問題は解消されました。

 

修正が終わったら再テストと検証依頼

修正ができたらまず『モバイルフレンドリーテスト』で再テストをします。

そして結果が『モバイルフレンドリーです』

になればOKです。

 

次に、サーチコンソールのエラーの所から『修正の検証』をクリックして、検証依頼をします。

修正の検証には数日かかるので待ちましょう。

数日後に修正を確認しました。

のメッセージが届くとエラー表示が改善されます。

さやペン
さやペン
お疲れ様でした。

ブログ関係カテゴリの最新記事