【HTML5】aタグ - ハイパーリンクを作成

ハイパーリンクを作成するにはaタグを使用します。Webデザイン入門のURLを指定したサンプルです。

Webデザイン入門

<a href="https://webdesign.perlzemi.com/">Webデザイン入門</a>

リンクされているテキストを、リンクテキストと呼びます。

絶対パスでページを指定する

「/」で始まる絶対パスを使用すると、同一サイト内のページにリンクを張ることができます。

htmlタグ

<a href="/blog/20200204092826.html">htmlタグ</a>

相対パスでページを指定する

「/」で始まらない相対パスを使用すると、同一サイト内のページに相対パスで、リンクを張ることができます。

htmlタグ

<a href="20200204092826.html">htmlタグ</a>

相対パスでリンクすることもできますが、常に絶対パスでリンクするのがお勧めです。

リンクをクリックしたときに、新しいウインドウを開く

リンクをクリックしたときに、新しいウインドウを開くには「target="_blank"」を指定します。

Webデザイン入門

<a href="https://webdesign.perlzemi.com/" target="_blank">Webデザイン入門</a>

ページの力をリンク先のページに渡すハイパーリンク

SEO対策において、aタグによるハイパーリンクは、極めて重要なものです。

たとえば「焼肉のおいしい食べ方」というリンクを張るとします。

焼肉のおいしい食べ方

すると、リンク先のページは「焼肉」「おいしい」「食べ方」というキーワードで強くなります。

現在のページが持っている、「焼肉」「おいしい」「食べ方」という力を、リンク先のページに渡すイメージです。

ページの力をリンク先のページに渡したくない場合

ページの力をリンク先のページに渡したくない場合は「rel="nofollow"」を使用します。

現在のページの「焼肉」という力を強くしたい場合は、リンク先に「焼肉」の力を渡したくありません。

このような場合に「rel="nofollow"」を使用すると、現在のページの「焼肉」の力をリンク先のページに渡すのを防ぐことができます。

焼肉のおいしい食べ方

<a rel="nofollow" href="/">焼肉のおいしい食べ方</a>
コンテンツ