親要素のDIVボックス全体にリンク範囲を広げる方法（改良版）
親要素全体をリンクのクリック範囲とするのはタイルデザインなどのウェブサイトでは多用する技術です。しかしタイルデザイン全体のどこをクリックしてもリンクにつながるようにするには一工夫が必要で、ネットを見てもいくつかの方法があるようです。
方法1
当サイトで始めに使っていたのは下記の方法でした。ネット上でも一番よく見られる方法ではないかと思います。子要素にposition: absolute;を指定し、幅と高さとも100%にすることで親要素全体と同じ範囲を子要素のリンク範囲に設定できます。
CSS
.box{
position: relative;
z-index: 1;
}
.overlink{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-indent: -999px;
z-index: 2;
}
HTML
<div class="box"> <div>AAA</div> <div>BBB</div> <a class="overlink" href="https://www.google.com"> </a> </div>
しかしこの方法はSEO的には問題があるようです。もともとGoogleなどの検索エンジンは<a>タグの中に入っているテキストまで解読してリンク先との関係を判定しています。リンク先の内容は<a>と</a>に挟まれたタイトルに合致したものになっているだろうということでリンクの品質を判断しているのです。
すると、上記の方法の場合は<a></a>の中身が空ですのでリンク元とリンク先が合致していないということになるのです。これはHTML5が目指すセマンティックなWEBの理念にも反していることにもなります。
ところで、HTML5では<a>タグは<div>を挟むことができるようになりました。というかブロック要素かどうかで<a>タグで挟めるかどうかという区別がなくなったのです。そこで、divをまるごと<a>で囲んでしまうことができるようになります。
<a href="https://www.google.com"> <div> <div>AAA</div> <div>BBB</div> </div> </a>
しかしこれではAAAとBBBなど子div要素の中身がちょうど親div要素のなかにぴったり収まっていないときは親divの枠の端っこをクリックしてもリンクが作動しなかったりします。
方法2
そこで、下記のような書き方をしてみました。
<div class="box"> <a href="https://www.google.com"> <span class="overlink"></span> <div>AAA</div> <div>BBB</div> </a> </div>
この<span class="overlink"></span>は、もちろん<div class="overlink"></div>でもかまいません。これを挟んでおくことで<div class="box">と同じサイズの<span class="overlink"></span>のどこをクリックしてもリンクが作動することになるのです。
ちなみに、この方法を採用する場合は.overlinkのz-indexは必要なさそうです。上に重ねていなくてもリンクは作動します。
もっとも、これも難点が全て解決されたわけではないようです。Google pagespeed insightsで確認するとCLSスコアも0と非常に良好なのですが、Google search consoleではなぜかCLSが0.25以上で不良と判定されてしまっており、この原因ははっきり特定したわけではないがどうやらz-indexで要素を重ねすぎていることがマイナス判定されているように思います（現時点で証拠をつかめておらず推定です）。
したがって、よりよい方法を求めてもう少し何か工夫できないか考えてみようかと思います。
方法2改（2021/2/21追記）
上記の方法2ではどうもGooglebotがうまくリンク先タイトルのテキストを拾ってくれていないようだったので、さらに改良してみました。
<div class="box"> <div> <a href="https://www.google.com">AAA<span class="overlink"></span></a> </div> <div>BBB</div> </div>
この場合は、class=overlinkのz-indexは2ではなく0など全体のboxより低い数値でもかまいません。当サイトではz-indexは0にしてみました。つまりリンクエリアは文字の背後に隠れていることになります。AAAのところにリンク先ページのタイトルを入れて、<A>がより狭くピンポイントにリンク先の内容を指示しています。これで、先ほどの記事の表現で言えば「よりセマンティックなWEB」であると言えそうです。
この記事に対するコメント
このページには、まだコメントはありません。
更新日：2021-01-13 閲覧数：4515 views.