してみるテストロゴ
Apache 2.4系でHTTP/2サーバを構築してみるテスト。

Google Search Consoleに「クリック可能な要素同士が近すぎます」と言われたときの対応

[2019年8月31日版]

先日、「User-Agent暗号プロトコル辞典」を公開したのですが、 Google Search Consoleの「モバイル ユーザビリティ」で「クリック可能な要素同士が近すぎます」と言われてしまいました。

このテストに合格するまでに苦労したので、私が試した対処方法を紹介しておこうと思います。

問題となったHTML

Google Search Consoleが、エラーの場所をなんとなく教えてくれると助かるのですが、そのような情報はなさそうです。

以下のような、<a>タグを、ハイフン("-")で区切った羅列を並べていたものが怪しそうでした。

これ以外の部分は、いままでも問題なかったことから、ここを重点的にいじることにしました。

原因の目星は、自分の勘にたよることになります。

<a href="/crypt/DSA+SHA1.html">DSA+SHA1</a>-<a href="/crypt/DSA+SHA224.html">DSA+SHA224</a>-<a href="/crypt/DSA+SHA256.html">DSA+SHA256</a>

原因をわかりにくくする要因がもう一つあります。

実は、このままでも、Google Search Consoleの「URL検査」の「公開URLをテスト」の「ライブテスト」では、「合格」します。

つまり、Google Search Consoleの、「URL検査」の「公開URLをテスト」の「ライブテスト」と、インデックス登録されたページの「モバイル ユーザビリティ」は、異なった評価基準で、「合格」を判定しているようです。

ぶっちゃけると、「URL検査」の「公開URLをテスト」の「ライブテスト」の判定は、甘めです。

当然、厳しめの、インデックス登録されたページの「モバイル ユーザビリティ」で合格したくなります。

対処方法

そこで、対策になりますが、当然ながらリンク文字列の左右の行方向と、上下の桁方向の間隔を空けることが必要です。

左右の行方向の対策として、<a>タグと<a>タグの間に、ハイフン("-")に加え、その前後に空白を入れました。

変更前
<a href="/crypt/DSA+SHA1.html">DSA+SHA1</a>-<a href="/crypt/DSA+SHA224.html">DSA+SHA224</a>-<a href="/crypt/DSA+SHA256.html">DSA+SHA256</a>
変更後
<a href="/crypt/DSA+SHA1.html">DSA+SHA1</a> - <a href="/crypt/DSA+SHA224.html">DSA+SHA224</a> - <a href="/crypt/DSA+SHA256.html">DSA+SHA256</a>

また、上下の桁方向の対策として、行間を調整します。CSSで、

line-height: 150%;

としました。

次に、Google側に検証を行ってもらうため、Google Search Consoleの「モバイルユーザビリティ」のエラーレポートから、「新しい検証を開始」をクリックします。結果が出るまで、1日ほどかかるようです。

しかし、先ほどの対策では、合格しませんでした。

自分の勘で場所を決めたので、まずは自分を疑いたくなりますが、やはりここしかないので、さらに対策をすすめてみました。

まず、フォントを大きめにしました。フォントが大きくなれば、<a>タグの間の非クリック要素(この場合," - ")のサイズも大きくなることを狙いました。これは行間を稼ぐ意味合いもあります。

さらに、上下の桁方向の対策として、行間を調整します。CSSで、

font-size:large;
line-height: 250%;

としました。

これで、再度、Google Search Consoleの「モバイルユーザビリティ」のエラーレポートから、「新しい検証を開始」をクリックし、一日後に、やっと「合格」とでました。

ということで、文字列のリンク(クリック可能な要素)を並べる場合に、「クリック可能な要素同士が近すぎます」と言われたら、

  • リンク(クリック可能な要素)文字列と、リンク(クリック可能な要素)文字列の間に、クリックできない文字を、少なくとも3文字ほど入れる。
  • 行間を250%くらいに設定する。
  • 文字列の文字を大きめにする。

といった調整をお試しください。

>> トップページに戻る

©Copyrights 2015-2019, non-standard programmer

このサイトは、あくまでも私の個人的体験を、綴ったものです。 軽く参考程度にご利用ください。