aタグはSEO対策を考えるなら省略せず非表示しない

2022/04/05 update

以前はSEO対策を考えて、メニューバーの中に重要なページへのリンクのaタグを詰め込んでいました。

<html>
<body>
<div>メニューバー</div>
<header>ヘッダー</header>
<main>メイン</main>
<aside>サイドバー</aside>
<footer>フッター</footer>
</body>
</html>

結果的に、SEO効果は全くありませんでした。メニューバーのaタグはGoogleにインデックスされず、サイドバーやフッターだけにあるaタグの方が、Googleにインデックスされていました。

原因として考えられるのは、以下の2つです。
スマートフォンの場合は幅が狭いので、aタグを非表示にして、ボタンを押したら表示されるようにしていた。
メニューバーは幅が限られているので、キーワードだけの省略した内容にしてaタグで囲んでいた。

サイドバーやフッターのaタグは常に表示され、省略せずにタイトル全てを表示してaタグで囲んでいました。Googleはaタグをソースの上から順番に読み込んで、同じリンク先の場合、1つ目だけしか評価しません。
以下のように変更しました。

<html>
<body>
<header>ヘッダー</header>
<main>メイン</main>
<aside>サイドバー</aside>
<footer>フッター</footer>
<div>メニューバー</div>
</body>
</html>

メニューバーはcssで一番上に表示されるようにしました。

position:fixed;
top:0;
z-index:10;

これなら、メニューバーの内容は最後に読み込まれるので、Googleはそれより前にある同じリンク先のaタグを評価します。メニューバーのaタグは評価されず、ブログを読む人にはメニューバーが一番最初に表示されるので、便利です。

この記事のタイトルとURLをコピーする seo

seo