「クリック可能な要素同士が近すぎます」を解決した方法

2019/12/25

web

t f B! P L


このサイトではありませんが、他のblogger(blogspot)を運営して5ヶ月ほど経ったある日、メールにてGoogle Search Consoleから問題検出の通知が来ました。


そのメールには以下のように書かれていました。

モバイル ユーザビリティ ●●●.blogspot.comで問題が検出されました

●●●.blogspot.com の所有者様

Search Console により、貴サイトに影響する「モバイル ユーザビリティ」関連の問題が 1 件検出されました。

主な問題

貴サイトでは、以下の問題が検出されました。

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

上記の問題をできる限り解決されることをおすすめいたします。こうした問題を解消することで、サイトのエクスペリエンスや Google 検索結果での表示を最適化できます。

「クリック可能な要素同士が近すぎます」とのことで、その通知のリンクをクリックして、Google Search Consoleをのぞいてみました。

問題を起こしているページ

Google Search Consoleの、問題指摘ページ「モバイル ユーザビリティ」の項目をのぞいてみると、原因を起こしているページは、固定ページのサイトマップでした。

このサイトマップは、こちらのサイト

Googleアドセンス対策!サイトマップの作り方【1分で解説】
https://happypapasan.blogspot.com/2019/02/google.html

を参考にさせていただき、

blogger.toc
https://garafu.github.io/blogger.toc/demo/en/index.html

で作ったものなのですが、どうやら、それが原因のようでした。

推察するに、このblogger.tocで作ったサイトマップは、これまで投稿したすべてのページをjavascript で1ページに表示してくれるのですが、記事が200ページを超えてくると、表示するべきものが多くなりすぎて、モバイルでの表示がすごく遅くなるか、「表示されていない」と検索エンジンが認識するようでした。


そのため、そのページにて、コンテンツをサンドイッチ状態ではさみこんである、上下にあるアドセンスが接近しすぎている、とgoogleに捉えられてしまったか、もしくはアドセンスとサイトマップのjavascriptのリンクがうまく分別できないと認識されてしまったのか?と考えられました。

まず試してみたこと

そこで、まず試してみたことは、「クリック可能な要素同士が近すぎます」なら、まずそれぞれの要素を離してみよう、ということで、アドセンスとサイトマップのHTML(japascript)の間にスペースを入れたり、画像を入れたりしてみました。

その上で、Search Consoleから修正申告をしてみましたが、ダメでした。引き続き「クリック可能な要素同士が近すぎます」とのご認識をgoogle様はお持ちのようです。

解決した方法

そこで、いっそのこと、この blogger.toc で作ったサイトマップを撤去し、自分でULタグ(Unordered List)を手書きで挿入し、個別投稿ページは表示させないで、カテゴリー(タグ)だけ「サイトマップ」として表示させることにしました。

こんな感じです。

  • カテゴリー1
  • カテゴリー2
  • カテゴリー3

そうした上で、改めてGoogle Search Consoleから修正申告をしてみたところ、約1日経過後に、検証: 合格となり、「クリック可能な要素同士が近すぎます」問題は解決しました。



アドセンス表示のほうはそのままにしておいたので、やはり blogger.toc で作ったjavascript のサイトマップ自体に問題があったようです。

QooQ