リンクはaタグで実装しましょう

他のページへ遷移させるための要素に<a>タグを利用するのは周知の事だと思いますが、たまにbuttonタグを使用したり、aタグやaタグ以外のタグとJavaScriptを利用してページ遷移させる事例を見ます。

何か意図があっての事だとは思いますが、Googleのクローラーにクローリンクさせたいのであれば、aタグを使用しましょう。

何故なら、適切なaタグ以外は、Googleのクローラーは辿る事ができないためです。

公式ドキュメントには、次のように記載されています。

Google のクローラがたどれるリンクは、解決可能な URL が指定された適切な タグが使用されているリンクのみです。

(一部省略)

Google のクローラがたどれるリンクは、href 属性が指定された
タグのみです。その他の形式のリンクはたどれません。 タグでも href 属性がないものや、スクリプトのクリック イベントによりリンクとして機能するその他のタグをたどることはできません。以下に、Google がたどることができるリンクと、たどることができないリンクの例を示します。 出典 : クローラーが処理できるリンク形式 | Google検索セントラル  |  ドキュメント  |  Google Developers

上記のページで紹介されていますが、次のような記述ではクローラーは辿る事ができません。

  • <a routerLink="some/path">
  • <span href="https://example.com">
  • <a onclick="goto('https://example.com')">

また、解決可能ではないURLの例に次のような、JavaScriptやアンカーリンクが挙げられます。

  • javascript:goTo('products')
  • javascript:window.location.href='/products'
  • #

参考ページ

以下のフォーラムも参考にしてみてください。

BUTTONタグでリンクを作成した場合、rel="nofollow"をつけたらどうなりますか? - Google 検索セントラル コミュニティ


執筆者情報
Profile Icon

ウェブ&マーケティングディレクター

清水公太

Web、映像、雑誌などの制作現場で、企画、デザイン、撮影、コーディング、マーケティング、業務改善などを経験してきました。 守備範囲は広めの雑食性のディレクターです。