はてなブログのモバイル版の問題点。WMTに怒られたよ。少しだけSEOのお話

本日、WMT（ウェブマスターツール）をいろいろと見ていたのですが、このブログのモバイルユーザビリティでエラーが出ているじゃありませんか！

どういう事？と思って詳細を見てみました。

タップ要素同士が近すぎるって？

モバイル ユーザビリティ > タップ要素同士が近すぎます
リンクやボタン同士が十分に離れている状態にしてください。 詳細

どういう事かと思い、詳細を見てみました。

Size Tap Targets Appropriately - PageSpeed Insights — Google Developers

タップ ターゲットのサイズを適切に調整する
このルールは、特定のタップ ターゲット（ボタン、リンク、フォームのフィールドなど）が小さすぎたり、互いに近すぎたりするために、タッチスクリーンがタップしにくいことを PageSpeed Insights が検出した場合にトリガーされます。
概要
タッチスクリーンでは、リンクやボタンが小さかったり、近すぎたりすると、従来のマウス カーソルよりも正確にタップするのが難しくなります。ユーザーが間違えて誤ったターゲットをタップして困惑しないように、タップ ターゲットは十分に大きくし、他のタップ ターゲットに指を重ねずに押せるよう十分に離す必要があります。平均的な大人の指の腹のサイズは幅約 10 ミリで、Android UI のガイドラインで推奨されるタップ ターゲットの最小サイズは約 7 ミリ（モバイル ビューポートを適切に設定済みのサイトでは 48 CSS ピクセル）です。

どういう事かと言えば、aboutページでリンク同士が近すぎるから距離を保って押しやすいようにしなさいって事です。

へ？そんな事あったっけ？と思って見てみました。

モバイル（スマホ）版のAboutページ

で、実際にスマホでAboutページを見てみました。

これは確かに押せない（タップ出来ない）ね・・・・・・

おかげさまで読者登録が700人を超えており凄い一覧になっています。

1面がアイコンな状態です。

これは改善せねば！と思ったのですが、モバイル版をデフォルトで使っていると直し方がわかりません(^_^;)

誰か直し方ご存知の方は教えて下さい。

パソコン版ならデザインCSSで直せそうだけど

パソコン版ならデザインCSSに書き込めば直せそうなのですが。実際に読者アイコンを大きくしてます。

読者アイコンを大きくする方法は下記で紹介されています。こまった時のマネーさん頼み。

moneyreport.hatenablog.com

スマホ版にもデザインCSSが独立してあれば直せると思いますが、無いために直す事が出来ません。恐らくはレスポンシブデザインにチェックを入れれば可能だと思うのですが、他の兼ね合いから変更はしたく無いのでこのままスマホ用のまま使いたいのですが・・・・

スマホ用のデザインのまま直す事って出来ないんですかね？

もしくは「はてなブログ」さんに直してもらうしか無いような・・・・。

WMTでエラーを出すような設定はよくないと思うのですが。

SEOに影響？

一面がアイコンになっていて、更にすべてリンクになっています。これってリンクファームと見られてSEO的によく無いんじゃないの？っていうのは過去からずっと言われてきた事ですが、今のところほぼ影響は無いように僕は感じています。

むしろこの機能があるからこそ、SEO的にも良いような気もしています。

これについては人によって見解が違うので、この際どうでも良いです。

問題なのはWMTでエラーとして捉えられているアイコン同士が近すぎる状況は少なからずともSEOに影響はしてくると思います。というかWMTエラーが出ている項目は基本的にSEOに影響を与える事です。

ユーザビリティが悪いという事で。

という事で、はてなさん改善をお願いしますm(__)m

以上です。

ご観覧、ありがとうございましたm(__)m

解決方法

早速解決方法を書いて下さった方がいました。大抵予想で2人に絞られますよね。

池田仮名 (id:bulldra)さん or ぽけっとしすてむ (id:psne) さん あたりが書いてくれるんじゃないかな～って期待していた部分は多いにあります(^_^;)

bulldra.hatenablog.com

上記のはてぶコメントで、Proでは無い場合の解決方法をぽけっとしすてむ (id:psne) さんが書いてくれていますので、上記記事とはてブコメント、両方読まれるとほぼ解決すると思います。