リンクの中にリンクを入れたいレイアウト

こんなレイアウ見たことありますよね？

業務でこんなレイアウトで実装しなきゃいけなくて、どうやるか色々と調べたので、まとめようと思います。

aタグの中にaタグを設置して見る

sample.html

<a>
<p>
   <a>リンク</a>
</p>
</a>

にしてみると

とレイアウトが、崩れてしまいました。

対策1:Objectタグで囲む

sample.html

<a>
<p>
   <object><a>リンク</a></object>
</p>
</a>

objectタグとは？

HTML の要素は、画像、内部の閲覧コンテキスト、プラグインによって扱われるリソースなどのように扱われる外部リソースを表現します。
リファレンス

属性は、HTML5で廃止されたものも多いので注意です。
主要なブラウザには対応しているので、使えそうですね、、、。

対策2:JavaScriptのclickイベントを使う

sample.html

<a>
<p>
   <span data-url="/link" class="js-click">リンク</span>
</p>
</a>

$('.js-click').on('click', function(event){
  //伝播をストップ
  e.stopPropagation();
  e.preventDefault();

  //リンクを取得して飛ばす
  location.href = $(this).attr('data-url');
})

引用
ここの実装は、実装環境にもよるので、引用させてもらいました。
location.href を使うって感じです。

SEOは大丈夫？

googleサイトをみる限り、jsを読んでくれますが、イベントで生成されるリンクまでを読んでくれるかは不確かです。
調べてみると

https://www.suzukikenichi.com/blog/content-and-link-generated-by-javascript-are-treated-just-same-as-static-content-and-link/
https://www.suzukikenichi.com/blog/google-can-read-javascript-and-pass-pagerank-and-anchor-text/
https://webtan.impress.co.jp/e/2019/10/07/34043#moz16
という記事もあり、レンダリングされるようなリンクであれば読み取ってくれそうですが、、、。
「local.href」はわからないです。

aタグの中にaタグを書くのはNG×

リファレンスを読むと許可されている親要素に

記述コンテンツを受け入れるすべての要素、フローコンテンツを受け入れるすべての要素。ただし要素を除く。

と書いてあります。
aタグ内でaタグを書くのはよくなさそうですね、、、

結局リンクの中にリンクを入れたい時は？

最初にレイアウトの変更を考える

のがいいかなーって思います。

リンクの中にリンクをいれると、ユーザが間違ってクリックしてしまう、間違ってタップしてしまう可能性も高いですしね。