リンクの中にリンクがある場合の実装方法

リンクの中にリンクを入れるようなデザインをたまに見かけるので、実装方法を考えてみました。

サンプルコード

まず最初に試してみたパターンです。
リンクの中にあるリンクをaタグ以外にして、JavaScriptでページ遷移させるようにしてみます。

<div class="article">
	<a href="https://www.youtube.com/channel/UCZ1xuCK1kNmn5RzPYIZop3w">
		<h2 class="article-ttl">リゼ・ヘルエスタ</h2>
		<p class="article-description">ヘルエスタ王国の第二皇女。文武両道学園主席、真面目で誰にでも優しくかなりの人望がある。</p>
		<ul class="article-tags">
			<li data-url-in-link="https://twitter.com/Lize_Helesta">Twitter</li>
			<li data-url-in-link="https://space.bilibili.com/436596841">bilibili</li>
		</ul>
	</a>
</div>

<div class="article">
	<a href="https://www.youtube.com/channel/UC7fk0CB07ly8oSl0aqKkqFg">
		<h2 class="article-ttl">百鬼あやめ</h2>
		<p class="article-description">説明文テキスト説明文テキスト説明文テキスト</p>
		<ul class="article-tags">
			<li data-url-in-link="https://twitter.com/nakiriayame">Twitter</li>
			<li data-url-in-link="https://space.bilibili.com/389858027">bilibili</li>
		</ul>
	</a>
</div>

.article-tags内のliがリンク想定で、data-url-in-linkでリンク先を設定しています。

次にJavaScriptです。

$(function() {
	$('[data-url-in-link]').on('click', function(e) {
		e.preventDefault();
		var url = $(this).data('url-in-link');
		location.href = url;
	});
});

data-url-in-linkをクリックした際にaタグでのページ遷移をキャンセルして、設定したリンク先にページ遷移するようにしています。
リンク内のリンクを設定するデモページ
設定はシンプルで使いやすいですが、リンク内のリンクをaタグ以外にしているので、検索エンジンのクローラーがリンクを認識できなそうです。

次の方法ですが、全体を囲うaタグをなくして、その要素のタイトルなどにあたる部分にaタグを設定するようにします。

<div class="article js-parent">
	<h2 class="article-ttl"><a class="js-parent-link" href="https://www.youtube.com/channel/UCZ1xuCK1kNmn5RzPYIZop3w">リゼ・ヘルエスタ</a></h2>
	<p class="article-description">ヘルエスタ王国の第二皇女。文武両道学園主席、真面目で誰にでも優しくかなりの人望がある。</p>
	<ul class="article-tags">
		<li><a href="https://twitter.com/Lize_Helesta">Twitter</a></li>
		<li><a href="https://space.bilibili.com/436596841">bilibili</a></li>
	</ul>
</div>

<div class="article js-parent">
	<h2 class="article-ttl"><a class="js-parent-link" href="https://www.youtube.com/channel/UC7fk0CB07ly8oSl0aqKkqFg">百鬼あやめ</a></h2>
	<p class="article-description">魔界学校所属の和装鬼娘。いたずら好きで、よく鬼火を飛ばして他人をからかって遊んでいる。こう見えて実は生徒会長。</p>
	<ul class="article-tags">
		<li><a href="https://twitter.com/nakiriayame">Twitter</a></li>
		<li><a href="https://space.bilibili.com/389858027">bilibili</a></li>
	</ul>
</div>

これで要素全体にリンクは設定されていませんが、構造的には検索エンジンのクローラーがリンクを認識できるようになりました。

次にJavaScriptで、全体をクリックしたときにタイトルのリンク先に遷移するように設定します。
全体の要素に.js-parent、タイトルの要素に.js-parent-linkを付与しているので、こちらを使います。

$(function() {
	$('.js-parent').on('click', function(e) {
		var url = $(this).find('.js-parent-link').attr('href');
		location.href = url;
	});
	// リンク部分をクリックした場合は通常のページ遷移
	$('.js-parent a').on('click', function(e) {
		e.stopPropagation();
	});
});

2〜5行目が全体をクリックした時の処理ですが、これだけだとaタグをクリックしたときにaタグのページ遷移も発生してしまうので、7〜9行目でaタグクリック時は.js-parentクリック時の処理を行わないように設定しています。
リンク内のリンクを設定するデモページ2