「テキストが小さくて読めません」 search console モバイルユーザビリティのエラーを解決した

1.モバイルユーザビリティのエラー

search console の拡張には、4つのチェックがあります。この中の、モバイルユーザビリティで問題が発生しています。

6/10 から、2つのエラーが発生したまま改善していません。

そのエラーは以下の通りです。

  • テキストが小さすぎて読めません
  • クリック可能な要素同士が近すぎます

ひとつ目のエラーは、スマホにおいて、ブログの記事の文字が小さいと言っているようです。二つ目のエラーは、クリックできる要素が、画面上で近すぎるということです。

言っていることはわかるんですが、60爺の場合、wordpressで執筆しているので、何故、この記事だけという疑問がありました。

2.原因は?

具体的な問題を探ってみます。

まず、上記のエラーのひとつ目の数字の部分をクリックします。

次に、URLが出ている部分の「ライブページをテスト」をクリックします。

すると、テスト結果が表示されます。

左側に、「このページはモバイル フレンドリーではありません」と出て、その下に上記2件のエラーが表示され、さらに、右側のページにスマホ上の表示イメージが出されました。

この、レンダリングされたページの画像を見ると何かおかしいです!?

そうです。表示されたブログのページが、何故かスマホ画面の半分位になっちゃているんです。

なるほど、この画面イメージであれば、「テキストが小さすぎて読めません」のエラーも納得できます。

どうやら、htmlをレスポンシブ対応※する必要があるみたいです。

※htmlをレスポンシブ対応
viewportというhtmlの機能を使ってスマホに対応させる方法
こんな感じでmetaタグに記述させるだけで、簡単に導入することができます。width=device-width のように、スクリーンサイズに合わせて設定します。

しかし、上述しましたが、他にいくつも記事があるのに、何故、この記事だけエラーとなるのかという疑問がありました。

ページの中身を見比べていった結果、原因がわかりました。

挿入されているYouTubeの幅が画面幅よりも大きくなっていることです!

動画を入れていたんですが、この記事の動画だけ幅が大きかったんです。

<figure><iframe src="https://www.youtube.com/xxxxx/xxxxxxxxxxx" allowfullscreen="" width="724" height="543"></iframe></figure>

ちなみに、他記事のものは、こうなっていました。

<figure><iframe src="https://www.youtube.com/xxxxx/yyyyyyyy" allowfullscreen="allowfullscreen" width="560" height="315"></iframe></figure>

ご覧のように、他記事は width=560 に対して、エラーの発生した記事はwidth=724 となっています。

そのため、画面が圧縮されていたんですね。

3.対応後

そこで、問題ない記事の HTML をコピーし、動画の名称を設定し直しました。

更新後、Google 宛てに検証を依頼しました。

翌日、Google から検証が終わり、エラーが解決されたとの連絡を受けました。

60爺の場合、動画の width 指定が問題でしたが、画像の width が問題になっている方もいらっしゃるようです。

本記事が参考になれば。