このページの目次
「モバイルユーザビリティ」に関する問題が新たに検出されました
新規に立ちあげたブログを1か月くらい順調に運営していたところ、Google Search Console からこんな通知がメールで届きました。
「サイト(https://〇〇〇.com)で「モバイルユーザビリティ」に関する問が題が新たに検出ました。」ということなんです。
ちなみにその問題が「クリック可能な要素同士が近すぎます」という内容の表示のものなのですが何のことなのかサッパリ・・・
初めてこの通知がきたので
・クリック可能な要素とはなにか
・近すぎるとはどういうことなのか
・どこのページに問題が潜んでいるのか
・どうやって対応したらよいのか
などなど正直対応方法が分からないまま感覚的に修正作業をしてみましたのでちょっと記録方々書き留めておきたいと思います。
サイトの環境
ちなみにですが、この通知が来たブログのサイトの状況は以下のとおり
・CMS:ワードプレス
・テーマ:cocoon(スキン利用無し)
・記事数:15記事
・広告、写真、外部リンク多数あり
こんな感じです。
特に対処法としてサイトの環境はあまり関係ないのかもしれませんが、(警告の出やすいテーマとかサイトの特徴とかがあるかもしれないので)一応書いておきました。
対処したこと
対処したことをまとめておきます。
問題がどこにあるのかを確認する
「クリック可能な要素同士が近すぎます」という表現からクリックできるリンクなどが近いところに設置されているものがないかを探しました。
Google Search Consoleの中にページのリンクがあるのでそのページ自体は簡単に特定できます。
問題はそのページの中の場所がどこなのかということですが、「近すぎます」というふうに怒られているので、リンクが隣合っていたりしている場所をさがすと画像の下にURLリンクを設置してある場所が2カ所ありました。
こんな感じのどこにでもあるパターンなのですが、ほかに「クリック可能な要素」というものにあたるものがほかにありませんでしたので、問題の所在はほぼ特定できたことになります。
対処方法
画像に仕込んでおいたリンクを解除してテキスト部分に仕込んだリンクのみを残すようにしました。
これによってクリックできる要素で、近すぎる状況にあるものはなくなりました。
それ以外にも外部リンク、内部リンクはありますが、隣り合った位置関係にあるようなリンクはなかったので、ぞれ以外の対処はしていません。
問題の修正を検証
対処のための作業が終わったら、[検証]ボタンがあるのでそれをクリックして問題を検証してもらいましょう。
自分の場合には2日後に以下のような通知がきました。
クリック可能な要素同士が近すぎますの対処法まとめ
結局のところ大したことはしていないまま問題が修正されました。
問題の箇所が特定できれば、近すぎるクリック可能な要素を削除(解除)して近すぎる状況を解消してあげればよいだけでした。
ほかのブログでも同じようなリンクの設置をしているので何にも考えずに同じようにリンクを設置していましたが、今回このサイトにだけ通知がきたので特定のテーマやプラグインに問題があったのかもしれませんが、ほかの方にはそういった感じは伺えません。
これについての分析はもう少し詳細がわかったところで記事にしていきたいと思います。
以上「クリック可能な要素同士が近すぎます 「モバイルユーザビリティ」に関する問題が新たに検出されました。 で対処したこと」でした。
→ モバイルユーザビリティに関する問題「コンテンツ幅が画面の幅を超えています」と「テキストが小さすぎて読めません」 で対処したこと
→ 「 送信された URL はソフト 404 エラーのようです 」の問題が検出(通知)された時に対処したこと