[web]リンクはクロールできません対策方法

単純だけど、手を入れられるかは状況次第。

どういうアレか
対策
1. aを使うのをやめる
2. hrefは入れるけど遷移させない

どういうアレか

PageSpeed Insightsの「SEO」内で出るやつ。PC、スマホ両方にある。

要するに<a>を使うならhref属性をちゃんとつけろよってやつ。

何を当たり前なことをって感じだけど、実は守られていないケースが多い。

例えばアコーディオンメニューを作る際。

<ul>
	<li><a href="">aaaaa</a></li>
	<li class="sub">
		<a>aaaaaa</a>
		<ul>
			<li><a href="">aaaaaaa</a></li>
			<li><a href="">aaaaaaa</a></li>
			<li><a href="">aaaaaaa</a></li>
			<li><a href="">aaaaaaa</a></li>
		</ul>
	</li>
	<li><a href="">aaaaa</a></li>
	<li><a href="">aaaaa</a></li>
	<li><a href="">aaaaa</a></li>
	<li><a href="">aaaaa</a></li>
</ul>

ダメですね。

対策

まあ、ざっくり２つ。

aを使うのをやめる

要はクリックできたらいいので<a>である必要がない。

jsで発火するためのものでしかないので何を使っても良い。

とはいえ<div>とかでやるとよくわかんない事になっちゃうので、採用すべきは<button>あたりになる。

<button type="button">aaaaaaaaa</button>

type=”button”を忘れると遷移が発生するので注意。

hrefは入れるけど遷移させない

aタグの使用は続行したい場合、hrefを入れるしか無い。だけど遷移させたくない。ということは実現できる。

「aタグ　遷移させない」とかで検索すれば出てくる。

jQueryだとこう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
    <script>
$(function(){
    $('a').on('click',function(event){
        event.preventDefault();
        alert('clicked');
    })
})
    </script>
</head>
<body>
    <a href="https://www.google.co.jp">aaaaaaaaaaaaaa</a>
</body>
</html>

.preventDefault()で本来の処理をキャンセルして、任意の動作を追記する。