はじめに

久しぶりにサーチコンソールを開いたら、モバイルユーザビリティに2週間位にわたり、エラーが発生していました。グーグルからのメールもなかったので気が付きませんでした。

指摘事項

こんな指摘が2つ

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

➁ コンテンツの幅が画面の幅を超えています。

細部はこんな感じです。

指摘事項

画像の取扱に混乱

ブログの画像の取扱に混乱していて、プラグイン(Media Library Assistant)を入れたり、ブラウザスケール(Page Ruler Redux、View Image Info)を拡張機能に入れたり、ブログの画像の仕組みについて、たまたま勉強していたので指摘事項がすぐにピンときました。

指摘の該当ページ

サーチコンソールの指摘で最初に気になったのが、どこのページが不具合なのか全ページなのか、答えは該当ページのURLが掲載されていました。

該当ページ

「➀ クリック可能な要素が近すぎます。」について

画像が多いページで、画像及び文章とも要素で段落を構成していましたが、見た目では画像と文章が近すぎる感じはありました。

画像と文章の要素の間に、改行を入れました。

問題は解決したのですが見た目がまだ近すぎる感がするので、改行の代わりにCSSでマージンを取り少し広めにしました。

「➁ コンテンツの幅が画面の幅を超えています。」について

あのページは写真ではなく切り抜き画像が多いので、そのまま貼り付けた記憶があり、画像と文字の間隔が近すぎることも何となく感じていました。

早速、ブラウザスケールで測定してみると、画像最大幅698Pxが数枚ありました。

最大幅が698Pxというのは、実際は698Pxより大きな画像を使用しているということになります。賢威7のテンプレートはどんな大きなサイズの画像でもそのまま設定すると最大幅698Pxに設定するようになっているようです。

View Image Infoで測定すればオリジナルの画像サイズも表示されるので、1000Px前後の画像が数枚すぐに確認できました。オリジナル画像のサイズ設定をし直した結果、問題は解決しました。

サーチコンソールで検証

作業を終了してサーチコンソールで検証してもらいました。とりあえずの返事は検証中で、2~3日後にメールで解決した旨の返事が来ました。

検証

まとめ

以前にもありましたが知識がないのと、他の不具合が重なったので解決方法が思い出せないまま日々が過ぎてしまいました。

今回は以前よりも少し知識の進歩があり、落ち着いて解決することができました。

不具合にはいろいろありますし、これと決められた解決手段があるようにも思えません。

ご参考になればうれしいです。