【イラスト付き】アンカーリンクとは？属性の種類や使い方、注意点を解説

ブルーちゃん、ブルーちゃん。

アンカーリンクって何か分かる？

教えてほしいな。

アンカーリンクはWebサイトを作る際に使うものだよ。

Webページ内で、他のページや指定した場所にジャンプさせたいときに使うリンクのことなんだ。

うん。Webページを作ると、どうしても1ページが長くなることがあるんだ。

そこでアンカーリンクを使うと、すぐにジャンプできるから便利だね。

アンカーリンクをちょうどいい場所に配置すると、Webサイトを閲覧するユーザーのストレスが軽減されるから、快適なWebサイトだと思ってもらえるよ。

アンカーリンクとリンクは基本的には同じなんだけど、厳密には少しだけ違うんだ。

アンカーリンクはクリックすると別のWebページに遷移することを指すよ。

一方で、通常のリンクはクリックすると別のページに遷移することを指すんだ。

アンカーリンクはWebページの遷移だけを指すんだけど、通常のリンクはWeb以外も遷移の対象になるよ。

例えばExcelでリンクの仕組みを作っても、アンカーリンクとは呼ばないんだ。

じゃあ、次は使い方を説明するね。

そもそも、HTMLのコードにおけるリンクの指定方法は3種類に分かれているんだ。

3つの属性によって、使い方が違うんだ。

使いたい場面に応じて適切な属性を選ぶことが大切だよ。

それぞれのアンカーリンクについて解説するね。

別ページに遷移したいときは、href属性を使うんだ。

＜a href="https://○○○.jp"＞リンク先のURLはこちらから＜/a＞

こんな感じ。「リンク先のURLはこちらから」をクリックすると、指定したURLに遷移するよ。

別タブを使って別ページに遷移したいときは、target属性を使ってね。

target属性は、別のタブで新しいページを開くから、元のページを見返せるところが便利だよ。

うん。コードはこんな感じだよ。

＜a href="リンク先のURL" target="_blank"＞リンク先のURLを新規タブで開く＜/a＞

「リンク先のURLを新規タブで開く」をクリックすると、リンク先のURLに遷移するよ。

id属性は、ページ内の特定の位置を指定するときに使うんだ。

id属性を使って指定するときは次の2文を書いてね。

＜a href="#aaa"＞ここをクリックしてid属性のリンクを行う＜/a＞

＜p id="aaa"＞id属性のリンク先＜/p＞

「＜a href="#aaa"＞ここをクリックしてid属性のリンクを行う＜/a＞」がリンク元。

「＜p id="aaa"＞id属性のリンク先＜/p＞」がリンク先になるんだ。

せっかくだし、アンカーリンクに関連するnofollow属性についても教えるよ。

nofollow属性って言うんだ。

リンク先を検索エンジンに認識させたくないときに使うよ。

詳しく解説するね。

nofollow属性は検索エンジンにリンクを辿ってほしくないときに使うんだ。

世の中は信頼できないサイトや無関係なページがたくさんあって、低品質なページにリンクを貼らせたくないからだよ。

Webサイト管理者の意志とは無関係なリンクが作れるサービスがあるんだ。

例えばGoogle AdSense。

ブログの収益を得るためによく貼られる広告だけど、Google AdSenseの中には信頼できないサイトへのリンクが混じることがあるんだ。

検索エンジンは設置されたリンクを見て関連性や信頼性、サイトの価値を判断しているんだよ。

例えば、自分のサイトを見ていた人が、リンク先のサイトにみんな流れて、リンク先のサイトがフィッシングサイトだったらどう思う？

そうだよね。自分のサイトの人気を悪用されたくないから、nofollow属性を使うんだ。

nofollow属性を使うと、自分が貼ったリンク先に価値を渡さないようになるよ。

リンク先から見たら、リンク元の関連性や信頼性、サイトの価値を手に入れられなくなる。

リンク先は、リンク元の力を借りずに、自力で検索上位に上げるしかなくなるんだ。

そうでもないんだ。

まず、全部の外部サイトにnofollow属性をつけるのは大変でしょ。

それに、昔はnofollow属性をつけたサイトがSEOの関連サイトとして認められず、他のサイトに流れていたんだけど、2009年時点で既に機能としてなくなったんだ。

nofollow属性をつけてたサイトがSEOの関連サイトとして認められないのはそのままだけど、他のサイトに流れなくなった。

自分のサイトを検索上位に上げる目的で、リンク先にnofollow属性をつけてても意味がなくなったってことだね。

アンカーリンクを使うときは、次の4点に注意するといいよ。

順番に解説するね。

アンカーリンクを使うときは、リンクに色をつけると良いよ。

文章は黒で書くと思うんだけど、リンクも黒だと見づらくなってしまうんだ。

せっかくアンカーリンクをつけても、リンクに気づかないユーザーは多いよ。

分かりやすいリンクにするためにも、文章とは違う色をつけることがおすすめだよ。

アンカーリンクを使うときはリンク先が分かりやすいものにすることも大切だよ。

リンクが分かりやすいとメリットが多いよ。

リンクの文章が長すぎると、ユーザーがリンクの内容を読むときに負担がかかるから、1行ぐらいに収めるのがおすすめだよ。

あとは、太字にしたり、下線を入れたりして、一目でリンクだと分かると良いね。

ボタンの色や形、大きさを変えるのも手だよ。

id属性は同じページ内で位置を指定するときに使う属性だったね。

id属性でリンクを作るときは重複なく正しく登録されているか確認することが大切なんだ。

OK、例えば次の4文は破綻しちゃうんだよ。

＜a href="#aaa"＞ここをクリックしてid属性のリンクAを行う＜/a＞

＜p id="aaa"＞id属性のリンク先A＜/p＞

＜a href="#bbb"＞ここをクリックしてid属性のリンクBを行う＜/a＞

＜p id="aaa"＞id属性のリンク先B＜/p＞

そうだね。

「＜a href="#aaa"＞ここをクリックしてid属性のリンクAを行う＜/a＞」をクリックしたときに、これだと遷移先が「id属性のリンク先A」か「id属性のリンク先B」か分からないんだ。

Webサイトの不具合にもつながるから、id属性を使うときは、重複しないように注意しよう。

ページを作ったら、実際にリンクをクリックして想定通りに遷移するか確かめるのも有効だよ。

アンカーリンクを設定しても、リンク先のページが切れていたり、思っていたページと違う場所に遷移したりするときがあるんだ。

特にURLの記載ミスには注意が必要だね。

アンカーリンク先のWebサイトの品質が悪いサイトだと、アンカーリンク元のSEO評価を下げる可能性があるよ。

id属性の設定と同様に、ページを作ったら、実際にアンカーリンクをクリックして想定通りに遷移するか確かめると良いよ。

うん。最初作ったアンカーリンクを数年後にクリックしたときに、リンク切れを起こしている可能性もあるからね。

今回はアンカーリンクについて解説したけど、まとめるとこうだね

しっかりと理解できたかな？

見やすいサイトが作れれば閲覧者が増えるから、検索の上位にもなれるかもね。