アンカーリンクとは?属性の種類や使い方、注意点を解説のアイキャッチ画像

SEO

更新日: 2024/3/19

アンカーリンクとは?属性の種類や使い方、注意点を解説

character_balloon

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

なあに?

character_balloon
character_balloon

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

character_balloon

教えてほしいな。

いいよ、じゃあ今日はアンカーリンクについて解説するね。

character_balloon

アンカーリンクとは

アンカーリンクとは?属性の種類や使い方、注意点を解説の画像_2枚目
character_balloon

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

character_balloon

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

テキストや画像をクリックしたら、他のページに飛ぶやつのことか!

character_balloon
character_balloon

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

character_balloon

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

character_balloon

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

アンカーリンクとリンクの違いについて

アンカーリンクとは?属性の種類や使い方、注意点を解説の画像_4枚目

アンカーリンクと普通のリンクって、何が違うの?

character_balloon

どっちもページ移動するならリンクでいいと思うんだけど。

character_balloon
character_balloon

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

character_balloon

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

character_balloon

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

character_balloon

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

うーん、、難しくてよく分からないや。

character_balloon
character_balloon

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

なるほど!

character_balloon

アンカーリンクの使い方は?3つの属性ごとに解説!

アンカーリンクとは?属性の種類や使い方、注意点を解説の画像_6枚目

アンカーリンクってめっちゃ便利じゃん!どうやって使うの??

character_balloon
character_balloon

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

character_balloon

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

HTMLのコードにおけるリンクの指定方法

href属性:リンク先のURLを指定する


target属性:指定したリンク先を別のタブで開く


id属性:ページ内の特定の位置を指定する

character_balloon

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

character_balloon

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

character_balloon

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

href属性:リンク先のURLを指定する

character_balloon

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

具体的にはどんなコードを書くの?

character_balloon
character_balloon

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

character_balloon

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

target属性:指定したリンク先を別のタブで開く

character_balloon

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

character_balloon

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

別タブで開かれるのがhref属性との違いなのね!

character_balloon
character_balloon

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

character_balloon

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

character_balloon

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

id属性:ページ内の特定の位置を指定する

character_balloon

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

character_balloon

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

character_balloon

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

character_balloon

<p id="aaa">id属性のリンク先</p>

どっちが何の役割になっているの?

character_balloon
character_balloon

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

character_balloon

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

アンカーリンクに関連するnofollow属性を解説!

アンカーリンクとは?属性の種類や使い方、注意点を解説の画像_14枚目
character_balloon

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

どんな属性?

character_balloon
character_balloon

nofollow属性って言うんだ。

character_balloon

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

character_balloon

詳しく解説するね。

nofollow属性:リンク先を検索エンジンに認識させたくないときに使う

character_balloon

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

リンクを辿ってもらった方が良いと思うんだけど、何か理由があるの?

character_balloon
character_balloon

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

nofollow属性を使う理由

でもさ、そんなサイトへリンクを貼ること自体がおかしくない?

character_balloon

貼らなければいいだけだと思うんだけど!

character_balloon
character_balloon

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

character_balloon

例えばGoogle AdSense。

character_balloon

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

ちなみに、低品質なサイトに飛ぶリンクを貼るとどんなメリットがあるの?

character_balloon
character_balloon

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

character_balloon

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

私のサイトのせいでみんなが犯罪に巻き込まれるってこと?私に責任がきそうで嫌だなあ。

character_balloon
character_balloon

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

character_balloon

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

character_balloon

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

character_balloon

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

nofollow属性を多用してもSEOへの効果はない

外部サイトへリンクさせるとき、全部nofollow属性をつければいいんじゃない!?

character_balloon

そうすれば、自分のサイトが検索上位になれるかも!

character_balloon
character_balloon

そうでもないんだ。

character_balloon

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

character_balloon

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

character_balloon

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

character_balloon

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

アンカーリンクを使用する際の注意点

アンカーリンクとは?属性の種類や使い方、注意点を解説の画像_22枚目

アンカーリンクを使うときに気をつけた方が良いことってある?

character_balloon
character_balloon

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

アンカーリンク使用時の注意点

1.リンクに色をつける


2.リンクであると分かりやすいものにする


3.id属性でリンクを作るときは重複がないか確認する


4.リンク先のページが切れてないか、内容がおかしくないか確認する

character_balloon

順番に解説するね。

アンカーリンクの注意点1.リンクに色をつける

character_balloon

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

character_balloon

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

character_balloon

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

character_balloon

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

アンカーリンクの注意点2.リンクであると分かりやすいものにする

character_balloon

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

character_balloon

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

リンクが分かりやすいメリット

1.ユーザーがリンクをクリックしやすくなる


2.リンク先の内容とテキストの整合性が取れてるから、SEO検索で上位に上がりやすくなる

character_balloon

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

character_balloon

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

character_balloon

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

アンカーリンクの注意点3.id属性でリンクを作るときは重複がないか確認する

character_balloon

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

character_balloon

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

例を挙げてほしいなあ。

character_balloon
character_balloon

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

character_balloon

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

character_balloon

<p id="aaa">id属性のリンク先A</p>

character_balloon

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

character_balloon

<p id="aaa">id属性のリンク先B</p>

これだと<p id="aaa">が2文あるね?

character_balloon
character_balloon

そうだね。

character_balloon

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

character_balloon

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

character_balloon

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

アンカーリンクの注意点4.リンク先のページが切れてないか、内容がおかしくないか確認する

character_balloon

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

character_balloon

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

character_balloon

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

そんな!

character_balloon
character_balloon

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

一度作ったアンカーリンクは定期的に確認することが大切なんだね!

character_balloon
character_balloon

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

まとめ

character_balloon

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

まとめ

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


◆主にhref属性、target属性、id属性を使ってアンカーリンクを作成する


◆アンカーリンクを作成する際は、閲覧者にリンクがあると分かりやすく表示することがとても重要


character_balloon

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

うん!見やすいサイトを作るために、ちょうどいいところにアンカーリンクを貼るよ!

character_balloon
character_balloon

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

character_balloon

ブルー

SEO
マーケティングオートメーション(MA)
アフィリエイト
wordpress

SEOやエンジニアリングマーケティングが得意。非常にめんどくさがりで、動きたくないがために自分でコードを書いて自作のMAを組んだりする。自動化のためなら努力は惜しまない。

最新の記事一覧
最新の記事一覧