どうも！ほのぱぱです。
先日、モバイルユーザビリティの新たな問題がでたというメールが「Google Search Console」から来ました。
しかも、3件の問題が検出されたようです。
問題となった3件は
- クリック可能な要素同士が近すぎる
- コンテンツの幅が画面の幅を超えている
- テキストが小さくて読めない
エラーを確認して、問題となったサイトを訂正して更新しました。
最終的には解決できたので、同じようなメールが来て困っている方の参考になれば嬉しいです。
目次
サーチコンソールでモバイルユーザビリティの問題をを確認
モバイルユーザビリティって？
良くわからなかったので、いろいろなサイトで調べてみました。私のようにあまり分からない方もいるかもしれないので、簡単に説明しますと。
要するに
スマホや携帯端末のような小さい画面でも見やすいページを作ってね
ってことのようです。
【モバイルフレンドリーテスト】ってご存じですか？
Google Search Consoleで、スマホなどでの端末で見やすいサイトと承認されているかのテストができるんです。
やり方は簡単です。モバイルフレンドリーテストのサイトに行き、自分のサイトのページをコピペしてクリックするだけでした。
問題を修正してくださいっていうメールが届いてから、モバイルフレンドリーテストを行ってみました。
その結果、「このページはモバイルフレンドリーです」でした。
話を戻します。
モバイルユーサビリティには、色々な基準があるそうですが、問題になりやすいものはこの２つのようです。
- 端末の画面サイズに合わせたページサイズ、画像サイズ、文字サイズになっている
- リンクや広告が誤クリックしてしまわないように配置されている
近年はPCよりスマホでネットを閲覧することが多いので、Google先生はスマホ等でも見やすいページを推奨していて、そのページに不具合があると「問題を修正してね」という内容のメールが送られてくるようです。
修正すべき問題とそのページを確認をする
まずは、Google Search Consoleからのメールにある「モバイルユーザビリティの問題を解決する」をクリックしてみました。
そしたらエラー表示がありました。
エラーの内容をクリックすると、問題があるページのURLが分かります。
とりあえず、そのページのURLが確認できたのでひとまずよかったです。
問題があるページに飛んで、上から下まで細部まで確認してみました。
３つのエラーの解決例
今回は３つの問題がありましたので、１つずつ私なりに解説します！
クリック可能な要素同士が近すぎます
何の事でしょう？
リンク等が密集していて誤クリックを招きやすいってこと？
リンクか広告しか思い当たらないです。
でも問題となったページは、アフィリページではなくて、ほとんどリンクもないページでした。
修正が必要とされたページの中で疑わしいと考えれるものはこの２つでした。
- リンク
- CTAで設置したアフィリ広告
そのページで設置したリンクは、内部リンクの「合わせて読みたい記事」が２つだけで、それが問題なら他の記事でも問題になるはずです。
一応その２つのリンクを間隔を１つあけてみました。リンク同士が繋がっていて、スマホ等で誤クリックに繋がらないようにするためです。
CTAで設定した広告も怪しい気がしましたが、これもCTAが原因なら、他の記事もエラーになりはずです。
もう解らないので、これ以上は何もしなかったです( ;∀;)
コンテンツの幅が画面の幅を超えています
はみ出しているってこと？？
画像か何かかな？って思いましたが、その記事では広告以外の画像の使用はアイキャッチのみ。
そのアイキャッチ画像はPCやスマホで確認してもはみ出ていない。。一応、アイキャッチの画像の大きさの確認もしましたが特に問題ない。
でも、記事をスクロールして確認していたらあったのです！
なんとGoogleアドセンスの広告が、なぜがズレていて画面からはみ出していた( ;∀;)
とりあえず、広告管理を見てみたのですが特に問題は見つけられなかったです。アドセンスの広告コードの張り直しもしてみましたが、変わりません。。
よくわからなかったのですが、こんなことも聞いたことがあります。
「ブログのエラー系はプラグインの不具合もある」と。なので、プラグインを見てみました。
そしたら未更新のものが１つありました。
しかも画像を自動で縮小してくれるタイプのプラグインです。
画像系のプラグイン。。これはもしや？？
EWWW lmage Optimizerというプラグインを使用していました。Wordpress内の画像ファイルサイズを自動で縮小してくれる便利プラグインです。
とりあえず怪しいのですぐに「更新」しました。
そしたら広告の画像のはみ出しが直ったのです！
テキストが小さくて読めません
これもどういうことか分かりません(笑)
記事の文字サイズはすべて「１６px」に設定しています。見出しの文字サイズはもっと大きいですし。
ページを上から下まで見てみましたが、まったく分かりません。。
最終的には、「テキストが小さくて読めない」問題については何もしていません。
問題個所を直せたら「修正を検証」をクリック
「修正を検証」をしてみよう
問題を解決できたら、SearchConsoleでエラーが表示されている部分をクリックします。
するとこのようなページに飛びます。
「修正を検証」をクリックします。
検証が始まります。
私の場合は３つの問題があったので、それぞれ修正を検証しました。
検証が始まったら、「修正を検証しています」のようなメールが来ますので、そこからは気長に検証結果を待つことになります。
そして次の日にGoogle先生からメールが届きました。
「テキストが小さい」問題については、記事の更新以外は何もしていません。
いまだになぞですが、とりあえず「問題が修正された」となりましたので一安心です。
今回のまとめ
私の場合は３つの問題の修正が必要となりました。
結果的には、ほとんどの問題の解決に、技術的に難しいことはなかったです。
下手にCSSを触ったりする前でよかったです( ;∀;)
しかも「テキストが小さい」問題についてはほんとに何もしていません。
以上で、モバイルユーサビリティから問題を修正するメールが来た話でした！
最後まで読んでいただきありがとうございました。同じことで悩んでいる方に参考になれば嬉しいです。
もしもアフィリエイト
アクセストレード
A8.net
