「テキストが小さすぎて読めません」エラーが出たら画像ファイルも疑おう

SEO検索対策

Google Search Consoleより、モバイルユーザビリティ「テキストが小さすぎて読み込めません」の警告を受けました。

原因は、文字が含まれた画像ファイルが引っかかっていた模様(*_*)

じゅんこ
じゅんこ

画像ファイル内の文字も読み込んでしまうとは、恐るべし、Google!

エラーの詳細と対策を記事に残しておきます。

モバイルユーザビリティ「テキストが小さすぎて読めません」対策

今回エラーになったのは、本サイトのこちらの記事。

2021年1月29日、下記のようなモバイルユーザビリティに関する警告を受けました。

まずは、「クリック可能な要素同士が近すぎます」を対策。

参考記事がくっつきすぎていたのが原因かと推測されたので、参考記事の間を空けるようにしました。

 

次に「コンテンツの幅が画像の幅を超えています」を対策。

幅が1000pxを超える画像が入っていたので、800pxに変更しました。

 

最後に「テキストが小さすぎて読めません」を対策。

モバイルは「16px」以上の大きさの文字が推奨のようですが、記事内に小さいテキストは見当たらず。

あえていうなら、プログラミングコードの部分は小さめですが、修正しても、「修正が検知できない」エラーが出続けます。

そこで文字がいっぱい入った画像を、下記のように、やや文字を大きめにし、画像っぽく編集し直してみました。

すると、ようやく「検証保留」状態になりました。

じゅんこ
じゅんこ

ほっ

このあと数日間検証に時間がかかります。

モバイルフレンドリーツールでも検証しておこう

ちなみにGoogleのエラーの検証は、モバイルフレンドリーテストツールでも確認可能です。

このツールは、URLを入れるだけでその場で結果がわかって便利。

じゅんこ
じゅんこ

Google Search Consoleとの併用がおすすめ。

こちらでも画像を変更前はエラーになったものの、

画像変更後は、無事、モバイルフレンドリーと認めてもらえました。

じゅんこ
じゅんこ

検証には1分ほどかかりますが、その場で結果が分かるって嬉しいですよね。

さいごに

というわけで、今回のポイントとしては

  • テキストが小さすぎると言われても該当箇所が見当たらなければ、画像が原因かも。
  • 画像内の文字を大きくしたり、画像っぽく編集すると、OKになるかもしれない。

断言はできないので申し訳ないですが。

困ったときには、物は試し。

文字が入った画像を取り除いてテストしてみてください。

SEO検索対策

【Laravelの教科書・プレゼント】

Junko
Laravelの使い方を覚えたい!と思ったら、ぜひ、役立ててほしいです。 基礎編は無料でプレゼント中です♪
ひつじプログラマ
会員制サイトをいちから作っていくよ。ボタンをクリックして詳細を見てね。
Laravelの教科書の詳細を見る

最新のLaravel10版テキストに加え、Laravel8版・Laravel9版もご用意しています♪

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中! 会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック

最新のLaravel10版テキストに加え、Laravel8版・Laravel9版もご用意しています♪

Laravelの本を書きました。


ひつじが目印♪
クリックするとamazonページへ。

Laravel10対応

Laravelの使い方を分かりやすく解説した書籍を出版しました。書店やAmazon等のオンラインショップにて販売中です。

書籍の詳細を見てみる

Laravelの本を書きました。


ひつじが目印♪
クリックするとamazonページへ。

Laravel10対応

Laravelの使い方を分かりやすく解説した書籍を出版しました。書店やAmazon等のオンラインショップにて販売中です。

書籍の詳細を見てみる


Laravelの教科書限定コミュニティ【Laravelの教科書ラボ】はじめました。
セミナーで、StripeやChatGPT連携、デバックなど実践スキルを分かりやすく学べます。

ラボの案内を見てみる

Twitter始めました。
40代からプログラミング!
タイトルとURLをコピーしました