【あなたのブログは大丈夫?】「モバイルユーザービリティエラーの2つ」の修正方法とは?

ヨナン
ヨナン

この記事は、「モバイルユーザービリティエラー」について、修正方法をご紹介しています!

ヨナンの経験をもとに修正方法を記事にしました!

0.突然の問題メール

 先日、Google先生より、ヨナンブログにおいて、

「モバイル ユーザビリティ」関連の問題が 2 件検出されました。】

 と書かれたメールが送られてきました!

ヨナン
ヨナン

突然の問題メールにアタフタしました( ;∀;)

 そのメール内容は、ヨナンブログにおいて、下記の問題があるとのことでした。

ヨナンブログの問題点

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

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

ヨナン
ヨナン

問題なのは、わかったけど

それで、このメールなに?

ということで、調べて見ました!


1.モバイルユーザービリティってなに?

 「モバイルユーザービリティティ」とは、「スマホやタブレットなど、小さい画面でもwebページが、快適に見えるようになっているか」を監視しているツールです!

 また、メールが来なくとも、

 サーチコンソールのメニュー → 「拡張」「モバイルユーザビリティ」で問題の有無を確認することができます。

画像は修正後のものです・・・。

2.エラーを修正しないとダメ?

ヨナン
ヨナン

ん〜、修正めんどいなぁ!

やらなきゃダメかなァ?

 Google先生には、「Googleが掲げる10の真実」というものを策定しています。

 その中の1番目に、

ユーザーに焦点を絞れば、他のものはみな後からついてくる。

引用:「Googleが掲げる10の真実」より

 これは、Google先生は、何よりもユーザーの利便性を一番に考えている」ということです。

 よって、エラーが出ている時点でユーザーにとって、見にくい記事であるということです。

 そのため、ランキングにも影響していると思います。

 無難に、修正しましょう!!


3.ヨナンブログでのエラー事例

ヨナン
ヨナン

ヨナンブログの2つのエラーを紹介するよ!

3-1クリックできる要素同士が近すぎます!

 ボタンやリンクなど、タップできるものについて、それぞれの間が狭すぎる場合にエラーとして判定されます。


3-2テキストが小さすぎて読めません!

 文字が小さすぎで読めず、ユーザーが拡大操作をしなければならない場合にエラーとして判定されます。


4.修正方法は?

4-1 シェアボタンの変更!

 ヨナンブログでは、「シェアボタン 」「スポンサーリンク」の間を修正しました!

4-2画像を大きくする!?

 「テキストの文字が小さすぎる」というエラーでしたが、文字の大きさは、どの記事でも同じですm(_ _)m

 よって、「スマホで画像が見えないのでは?」と考え、画像をクリックすると大きくなるプラグインを追加しました!

 プラグインの名前は「Easy FancyBox」

 追加の仕方は、割愛します( ;∀;)

 この記事でも使用してます!画像をクリックしてみてね!


5.その後どうなった?

 修正が完了したら、「モバイルユーザービリティ」による、検証を行います!

 数日後には、検証結果が表示されると思います!

 ちなみに、ヨナンブログは”合格”の判定をもらいました!

6.まとめ

 ヨナンブログの事例を下記にまとめました!

 エラーは、ユーザー目線で考えるとなるべく早く対処したほうがいいと思います!

 先延ばしにすると、修正するのが面倒になってしまいますからね!

モバイルユーザービリティエラー対処

①エラー内容の確認(エラー内容は全部で6項目あります。)

「クリックできる要素同士が近い」もしくは「テキストが小さすぎて読めない」の場合

「シェアボタンの変更を行う」もしくは「画像の拡大表示をする」