![アンカーリンクとは?属性の種類や使い方、注意点を解説のアイキャッチ画像](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/2fe6ac9b383d4cacbbf0fad7d2c76cf2/Group%20594.png?w=1200&fm=webp)
SEO
更新日: 2024/3/19
アンカーリンクとは?属性の種類や使い方、注意点を解説
![character_balloon](/media/character/yellow_normal_left.png)
ブルーちゃん、ブルーちゃん。
なあに?
![character_balloon](/media/character/blue_normal_right.png)
![character_balloon](/media/character/yellow_question_left.png)
アンカーリンクって何か分かる?
![character_balloon](/media/character/yellow_sad_left.png)
教えてほしいな。
いいよ、じゃあ今日はアンカーリンクについて解説するね。
![character_balloon](/media/character/blue_normal_right.png)
目次
- 1. アンカーリンクとは
- 2. アンカーリンクとリンクの違いについて
- 3. アンカーリンクの使い方は?3つの属性ごとに解説!
- 3-1. href属性:リンク先のURLを指定する
- 3-2. target属性:指定したリンク先を別のタブで開く
- 3-3. id属性:ページ内の特定の位置を指定する
- 4. アンカーリンクに関連するnofollow属性を解説!
- 4-1. nofollow属性:リンク先を検索エンジンに認識させたくないときに使う
- 4-2. nofollow属性を使う理由
- 4-3. nofollow属性を多用してもSEOへの効果はない
- 5. アンカーリンクを使用する際の注意点
- 5-1. アンカーリンクの注意点1.リンクに色をつける
- 5-2. アンカーリンクの注意点2.リンクであると分かりやすいものにする
- 5-3. アンカーリンクの注意点3.id属性でリンクを作るときは重複がないか確認する
- 5-4. アンカーリンクの注意点4.リンク先のページが切れてないか、内容がおかしくないか確認する
- 6. まとめ
アンカーリンクとは
![アンカーリンクとは?属性の種類や使い方、注意点を解説の画像_2枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/da5cd3301866474c93ffe4875cefbdee/01%20%E3%82%A2%E3%83%B3%E3%82%AB%E3%83%BC%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%A8%E3%81%AF.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_happy_left.png)
アンカーリンクはWebサイトを作る際に使うものだよ。
![character_balloon](/media/character/blue_happy_left.png)
Webページ内で、他のページや指定した場所にジャンプさせたいときに使うリンクのことなんだ。
テキストや画像をクリックしたら、他のページに飛ぶやつのことか!
![character_balloon](/media/character/yellow_question_right.png)
![character_balloon](/media/character/blue_normal_left.png)
うん。Webページを作ると、どうしても1ページが長くなることがあるんだ。
![character_balloon](/media/character/blue_down_left.png)
そこでアンカーリンクを使うと、すぐにジャンプできるから便利だね。
![character_balloon](/media/character/blue_down_left.png)
アンカーリンクをちょうどいい場所に配置すると、Webサイトを閲覧するユーザーのストレスが軽減されるから、快適なWebサイトだと思ってもらえるよ。
アンカーリンクとリンクの違いについて
![アンカーリンクとは?属性の種類や使い方、注意点を解説の画像_4枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/fb983acf81df4e7d83082f573907e348/02%20%E3%82%A2%E3%83%B3%E3%82%AB%E3%83%BC%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%A8%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%AE%E9%81%95%E3%81%84%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6.png?w=1200&fm=webp)
アンカーリンクと普通のリンクって、何が違うの?
![character_balloon](/media/character/yellow_question_right.png)
どっちもページ移動するならリンクでいいと思うんだけど。
![character_balloon](/media/character/yellow_troublesome_right.png)
![character_balloon](/media/character/blue_painful_left.png)
アンカーリンクとリンクは基本的には同じなんだけど、厳密には少しだけ違うんだ。
![character_balloon](/media/character/blue_normal_left.png)
アンカーリンクはクリックすると別のWebページに遷移することを指すよ。
![character_balloon](/media/character/blue_up_left.png)
一方で、通常のリンクはクリックすると別のページに遷移することを指すんだ。
![character_balloon](/media/character/blue_down_left.png)
アンカーリンクはWebページの遷移だけを指すんだけど、通常のリンクはWeb以外も遷移の対象になるよ。
うーん、、難しくてよく分からないや。
![character_balloon](/media/character/yellow_panic_right.png)
![character_balloon](/media/character/blue_down_left.png)
例えばExcelでリンクの仕組みを作っても、アンカーリンクとは呼ばないんだ。
なるほど!
![character_balloon](/media/character/yellow_inspiration_right.png)
アンカーリンクの使い方は?3つの属性ごとに解説!
![アンカーリンクとは?属性の種類や使い方、注意点を解説の画像_6枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/4ca7a7a1443b4d14bc56db6dcbffdc7a/03%20%E3%82%A2%E3%83%B3%E3%82%AB%E3%83%BC%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9%E3%81%AF.png?w=1200&fm=webp)
アンカーリンクってめっちゃ便利じゃん!どうやって使うの??
![character_balloon](/media/character/yellow_happy_right.png)
![character_balloon](/media/character/blue_smile_left.png)
じゃあ、次は使い方を説明するね。
![character_balloon](/media/character/blue_normal_left.png)
そもそも、HTMLのコードにおけるリンクの指定方法は3種類に分かれているんだ。
href属性:リンク先のURLを指定する
target属性:指定したリンク先を別のタブで開く
id属性:ページ内の特定の位置を指定する
![character_balloon](/media/character/blue_happy_left.png)
3つの属性によって、使い方が違うんだ。
![character_balloon](/media/character/blue_normal_left.png)
使いたい場面に応じて適切な属性を選ぶことが大切だよ。
![character_balloon](/media/character/blue_smile_left.png)
それぞれのアンカーリンクについて解説するね。
href属性:リンク先のURLを指定する
![character_balloon](/media/character/blue_normal_left.png)
別ページに遷移したいときは、href属性を使うんだ。
具体的にはどんなコードを書くの?
![character_balloon](/media/character/yellow_question_right.png)
![character_balloon](/media/character/blue_normal_left.png)
<a href="https://○○○.jp">リンク先のURLはこちらから</a>
![character_balloon](/media/character/blue_confidence_left.png)
こんな感じ。「リンク先のURLはこちらから」をクリックすると、指定したURLに遷移するよ。
target属性:指定したリンク先を別のタブで開く
![character_balloon](/media/character/blue_normal_left.png)
別タブを使って別ページに遷移したいときは、target属性を使ってね。
![character_balloon](/media/character/blue_normal_left.png)
target属性は、別のタブで新しいページを開くから、元のページを見返せるところが便利だよ。
別タブで開かれるのがhref属性との違いなのね!
![character_balloon](/media/character/yellow_smile_right.png)
![character_balloon](/media/character/blue_confidence_left.png)
うん。コードはこんな感じだよ。
![character_balloon](/media/character/blue_confidence_left.png)
<a href="リンク先のURL" target="_blank">リンク先のURLを新規タブで開く</a>
![character_balloon](/media/character/blue_down_left.png)
「リンク先のURLを新規タブで開く」をクリックすると、リンク先のURLに遷移するよ。
id属性:ページ内の特定の位置を指定する
![character_balloon](/media/character/blue_normal_left.png)
id属性は、ページ内の特定の位置を指定するときに使うんだ。
![character_balloon](/media/character/blue_confidence_left.png)
id属性を使って指定するときは次の2文を書いてね。
![character_balloon](/media/character/blue_normal_left.png)
<a href="#aaa">ここをクリックしてid属性のリンクを行う</a>
![character_balloon](/media/character/blue_normal_left.png)
<p id="aaa">id属性のリンク先</p>
どっちが何の役割になっているの?
![character_balloon](/media/character/yellow_question_right.png)
![character_balloon](/media/character/blue_down_left.png)
「<a href="#aaa">ここをクリックしてid属性のリンクを行う</a>」がリンク元。
![character_balloon](/media/character/blue_up_left.png)
「<p id="aaa">id属性のリンク先</p>」がリンク先になるんだ。
アンカーリンクに関連するnofollow属性を解説!
![アンカーリンクとは?属性の種類や使い方、注意点を解説の画像_14枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/08f58ab189974ba0ad7a76fd51bcd4b9/04%20nofollow%E5%B1%9E%E6%80%A7%E3%82%92%E8%A7%A3%E8%AA%AC.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_confidence_left.png)
せっかくだし、アンカーリンクに関連するnofollow属性についても教えるよ。
どんな属性?
![character_balloon](/media/character/yellow_question_right.png)
![character_balloon](/media/character/blue_normal_left.png)
nofollow属性って言うんだ。
![character_balloon](/media/character/blue_normal_left.png)
リンク先を検索エンジンに認識させたくないときに使うよ。
![character_balloon](/media/character/blue_smile_left.png)
詳しく解説するね。
nofollow属性:リンク先を検索エンジンに認識させたくないときに使う
![character_balloon](/media/character/blue_normal_left.png)
nofollow属性は検索エンジンにリンクを辿ってほしくないときに使うんだ。
リンクを辿ってもらった方が良いと思うんだけど、何か理由があるの?
![character_balloon](/media/character/yellow_question_right.png)
![character_balloon](/media/character/blue_painful_left.png)
世の中は信頼できないサイトや無関係なページがたくさんあって、低品質なページにリンクを貼らせたくないからだよ。
nofollow属性を使う理由
でもさ、そんなサイトへリンクを貼ること自体がおかしくない?
![character_balloon](/media/character/yellow_painful_right.png)
貼らなければいいだけだと思うんだけど!
![character_balloon](/media/character/yellow_angry_right.png)
![character_balloon](/media/character/blue_normal_left.png)
Webサイト管理者の意志とは無関係なリンクが作れるサービスがあるんだ。
![character_balloon](/media/character/blue_normal_left.png)
例えばGoogle AdSense。
![character_balloon](/media/character/blue_up_left.png)
ブログの収益を得るためによく貼られる広告だけど、Google AdSenseの中には信頼できないサイトへのリンクが混じることがあるんだ。
ちなみに、低品質なサイトに飛ぶリンクを貼るとどんなメリットがあるの?
![character_balloon](/media/character/yellow_question_right.png)
![character_balloon](/media/character/blue_sigh_left.png)
検索エンジンは設置されたリンクを見て関連性や信頼性、サイトの価値を判断しているんだよ。
![character_balloon](/media/character/blue_normal_left.png)
例えば、自分のサイトを見ていた人が、リンク先のサイトにみんな流れて、リンク先のサイトがフィッシングサイトだったらどう思う?
私のサイトのせいでみんなが犯罪に巻き込まれるってこと?私に責任がきそうで嫌だなあ。
![character_balloon](/media/character/yellow_scared_right.png)
![character_balloon](/media/character/blue_panic_left.png)
そうだよね。自分のサイトの人気を悪用されたくないから、nofollow属性を使うんだ。
![character_balloon](/media/character/blue_smile_left.png)
nofollow属性を使うと、自分が貼ったリンク先に価値を渡さないようになるよ。
![character_balloon](/media/character/blue_smile_left.png)
リンク先から見たら、リンク元の関連性や信頼性、サイトの価値を手に入れられなくなる。
![character_balloon](/media/character/blue_normal_left.png)
リンク先は、リンク元の力を借りずに、自力で検索上位に上げるしかなくなるんだ。
nofollow属性を多用してもSEOへの効果はない
外部サイトへリンクさせるとき、全部nofollow属性をつければいいんじゃない!?
![character_balloon](/media/character/yellow_confidence_right.png)
そうすれば、自分のサイトが検索上位になれるかも!
![character_balloon](/media/character/yellow_confidence_right.png)
![character_balloon](/media/character/blue_sigh_left.png)
そうでもないんだ。
![character_balloon](/media/character/blue_surprised_left.png)
まず、全部の外部サイトにnofollow属性をつけるのは大変でしょ。
![character_balloon](/media/character/blue_normal_left.png)
それに、昔はnofollow属性をつけたサイトがSEOの関連サイトとして認められず、他のサイトに流れていたんだけど、2009年時点で既に機能としてなくなったんだ。
![character_balloon](/media/character/blue_smile_left.png)
nofollow属性をつけてたサイトがSEOの関連サイトとして認められないのはそのままだけど、他のサイトに流れなくなった。
![character_balloon](/media/character/blue_sigh_left.png)
自分のサイトを検索上位に上げる目的で、リンク先にnofollow属性をつけてても意味がなくなったってことだね。
アンカーリンクを使用する際の注意点
![アンカーリンクとは?属性の種類や使い方、注意点を解説の画像_22枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/214a4216b03a4dae9b60b340ab210ae8/05%20%E3%82%A2%E3%83%B3%E3%82%AB%E3%83%BC%E3%83%AA%E3%83%B3%E3%82%AF%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B%E9%9A%9B%E3%81%AE%E6%B3%A8%E6%84%8F%E7%82%B9.png?w=1200&fm=webp)
アンカーリンクを使うときに気をつけた方が良いことってある?
![character_balloon](/media/character/yellow_question_right.png)
![character_balloon](/media/character/blue_happy_left.png)
アンカーリンクを使うときは、次の4点に注意するといいよ。
1.リンクに色をつける
2.リンクであると分かりやすいものにする
3.id属性でリンクを作るときは重複がないか確認する
4.リンク先のページが切れてないか、内容がおかしくないか確認する
![character_balloon](/media/character/blue_happy_left.png)
順番に解説するね。
アンカーリンクの注意点1.リンクに色をつける
![character_balloon](/media/character/blue_normal_left.png)
アンカーリンクを使うときは、リンクに色をつけると良いよ。
![character_balloon](/media/character/blue_normal_left.png)
文章は黒で書くと思うんだけど、リンクも黒だと見づらくなってしまうんだ。
![character_balloon](/media/character/blue_up_left.png)
せっかくアンカーリンクをつけても、リンクに気づかないユーザーは多いよ。
![character_balloon](/media/character/blue_up_left.png)
分かりやすいリンクにするためにも、文章とは違う色をつけることがおすすめだよ。
アンカーリンクの注意点2.リンクであると分かりやすいものにする
![character_balloon](/media/character/blue_normal_left.png)
アンカーリンクを使うときはリンク先が分かりやすいものにすることも大切だよ。
![character_balloon](/media/character/blue_happy_left.png)
リンクが分かりやすいとメリットが多いよ。
1.ユーザーがリンクをクリックしやすくなる
2.リンク先の内容とテキストの整合性が取れてるから、SEO検索で上位に上がりやすくなる
![character_balloon](/media/character/blue_sad_left.png)
リンクの文章が長すぎると、ユーザーがリンクの内容を読むときに負担がかかるから、1行ぐらいに収めるのがおすすめだよ。
![character_balloon](/media/character/blue_normal_left.png)
あとは、太字にしたり、下線を入れたりして、一目でリンクだと分かると良いね。
![character_balloon](/media/character/blue_happy_left.png)
ボタンの色や形、大きさを変えるのも手だよ。
アンカーリンクの注意点3.id属性でリンクを作るときは重複がないか確認する
![character_balloon](/media/character/blue_normal_left.png)
id属性は同じページ内で位置を指定するときに使う属性だったね。
![character_balloon](/media/character/blue_normal_left.png)
id属性でリンクを作るときは重複なく正しく登録されているか確認することが大切なんだ。
例を挙げてほしいなあ。
![character_balloon](/media/character/yellow_scared_right.png)
![character_balloon](/media/character/blue_happy_left.png)
OK、例えば次の4文は破綻しちゃうんだよ。
![character_balloon](/media/character/blue_normal_left.png)
<a href="#aaa">ここをクリックしてid属性のリンクAを行う</a>
![character_balloon](/media/character/blue_normal_left.png)
<p id="aaa">id属性のリンク先A</p>
![character_balloon](/media/character/blue_up_left.png)
<a href="#bbb">ここをクリックしてid属性のリンクBを行う</a>
![character_balloon](/media/character/blue_up_left.png)
<p id="aaa">id属性のリンク先B</p>
これだと<p id="aaa">が2文あるね?
![character_balloon](/media/character/yellow_question_right.png)
![character_balloon](/media/character/blue_normal_left.png)
そうだね。
![character_balloon](/media/character/blue_normal_left.png)
「<a href="#aaa">ここをクリックしてid属性のリンクAを行う</a>」をクリックしたときに、これだと遷移先が「id属性のリンク先A」か「id属性のリンク先B」か分からないんだ。
![character_balloon](/media/character/blue_sigh_left.png)
Webサイトの不具合にもつながるから、id属性を使うときは、重複しないように注意しよう。
![character_balloon](/media/character/blue_down_left.png)
ページを作ったら、実際にリンクをクリックして想定通りに遷移するか確かめるのも有効だよ。
アンカーリンクの注意点4.リンク先のページが切れてないか、内容がおかしくないか確認する
![character_balloon](/media/character/blue_normal_left.png)
アンカーリンクを設定しても、リンク先のページが切れていたり、思っていたページと違う場所に遷移したりするときがあるんだ。
![character_balloon](/media/character/blue_normal_left.png)
特にURLの記載ミスには注意が必要だね。
![character_balloon](/media/character/blue_down_left.png)
アンカーリンク先のWebサイトの品質が悪いサイトだと、アンカーリンク元のSEO評価を下げる可能性があるよ。
そんな!
![character_balloon](/media/character/yellow_panic_right.png)
![character_balloon](/media/character/blue_down_left.png)
id属性の設定と同様に、ページを作ったら、実際にアンカーリンクをクリックして想定通りに遷移するか確かめると良いよ。
一度作ったアンカーリンクは定期的に確認することが大切なんだね!
![character_balloon](/media/character/yellow_inspiration_right.png)
![character_balloon](/media/character/blue_smile_left.png)
うん。最初作ったアンカーリンクを数年後にクリックしたときに、リンク切れを起こしている可能性もあるからね。
![character_balloon](/media/character/blue_normal_left.png)
今回はアンカーリンクについて解説したけど、まとめるとこうだね
まとめ
◆Webページ内で、他のページや指定した場所にジャンプさせたいときに使うリンクのこと
◆主にhref属性、target属性、id属性を使ってアンカーリンクを作成する
◆アンカーリンクを作成する際は、閲覧者にリンクがあると分かりやすく表示することがとても重要
![character_balloon](/media/character/blue_smile_left.png)
しっかりと理解できたかな?
うん!見やすいサイトを作るために、ちょうどいいところにアンカーリンクを貼るよ!
![character_balloon](/media/character/yellow_smile_right.png)
![character_balloon](/media/character/blue_smile_left.png)
見やすいサイトが作れれば閲覧者が増えるから、検索の上位にもなれるかもね。
![character_balloon](/media/character/blue_writer.png)
ブルー
SEOやエンジニアリングマーケティングが得意。非常にめんどくさがりで、動きたくないがために自分でコードを書いて自作のMAを組んだりする。自動化のためなら努力は惜しまない。
最新の記事一覧
7割の人にとって味が最も重要!?エナジードリンクのアンケート調査結果をご紹介!
アンケート・調査結果
副業で5万円以上稼ぐ人は15%しかいない?副業の実態について調査しました!
アンケート・調査結果
53%の人は最後に浴衣を着てから5年以上経った?!浴衣の実態を徹底調査!
アンケート・調査結果
約82%の人が部屋着のズボンを履いてテレワークをしている!テレワークの現状を調査しました!
アンケート・調査結果
「1杯目はビール!」は約6割しかいない!?お酒についてアンケート調査しました!
アンケート・調査結果
企画書とは?目的や作り方、おすすめのテンプレートを紹介
マーケティング
取引や計算で使われるグロスとは?使用例や注意点を徹底解説!
マーケティング
「スーパーフレックス制度」とは?導入に向けて注意する点を解説!
マーケティング
ペルソナ設定とは?目的と作り方、注意点について徹底解説!
マーケティング
視聴者を魅了し続ける冠番組とは?成功している冠番組の特徴を解説
ビジネス
有名企業のペルソナマーケティング事例5選!何に活用できるか解説
マーケティング
破ると法律違反になるステマとは?過去のステマ事件や対策を紹介
マーケティング
多くの市場で危惧されるコモディティ化とは?コモディティ化対策5選
マーケティング
社会に影響を与えるマスメディアとは?影響力やリスクについて解説
マーケティング
カーボンニュートラルとは?実現のための取り組みや課題も解説
ビジネス
ネゴシエーションとは?ビジネスにおける意味と成功のポイントを解説
ビジネス
音声SNSとは?注目される理由やメリットを解説【アプリも紹介】
ディスプレイ広告
オーガニックサーチとは?広告なしで質の高い集客を実現できる!
SEO
問題解決フレームワークの活用法は?使用するメリットや注意点も解説
ビジネス
ブランドロイヤリティとは?顧客ロイヤリティとの違いを解説
広報・PR
最新の記事一覧
7割の人にとって味が最も重要!?エナジードリンクのアンケート調査結果をご紹介!
アンケート・調査結果
副業で5万円以上稼ぐ人は15%しかいない?副業の実態について調査しました!
アンケート・調査結果
53%の人は最後に浴衣を着てから5年以上経った?!浴衣の実態を徹底調査!
アンケート・調査結果
約82%の人が部屋着のズボンを履いてテレワークをしている!テレワークの現状を調査しました!
アンケート・調査結果
「1杯目はビール!」は約6割しかいない!?お酒についてアンケート調査しました!
アンケート・調査結果
企画書とは?目的や作り方、おすすめのテンプレートを紹介
マーケティング
取引や計算で使われるグロスとは?使用例や注意点を徹底解説!
マーケティング
「スーパーフレックス制度」とは?導入に向けて注意する点を解説!
マーケティング
ペルソナ設定とは?目的と作り方、注意点について徹底解説!
マーケティング
視聴者を魅了し続ける冠番組とは?成功している冠番組の特徴を解説
ビジネス
有名企業のペルソナマーケティング事例5選!何に活用できるか解説
マーケティング
破ると法律違反になるステマとは?過去のステマ事件や対策を紹介
マーケティング
多くの市場で危惧されるコモディティ化とは?コモディティ化対策5選
マーケティング
社会に影響を与えるマスメディアとは?影響力やリスクについて解説
マーケティング
カーボンニュートラルとは?実現のための取り組みや課題も解説
ビジネス
ネゴシエーションとは?ビジネスにおける意味と成功のポイントを解説
ビジネス
音声SNSとは?注目される理由やメリットを解説【アプリも紹介】
ディスプレイ広告
オーガニックサーチとは?広告なしで質の高い集客を実現できる!
SEO
問題解決フレームワークの活用法は?使用するメリットや注意点も解説
ビジネス
ブランドロイヤリティとは?顧客ロイヤリティとの違いを解説
広報・PR