アンカーリンクとは何のこと？メリットや効果的な使い方、注意点を解説！
アンカーリンクという単語を耳にしたことがあっても、具体的にどういうものなのかはわからないという方は多いでしょう。アンカーリンクはWebページをはじめ、SEOにおいても重要な役割をもっているので、概要や使い方を把握しておくことは大切です。
今回はアンカーリンクの概要をはじめ、メリットや効果的な使い方および注意点について解説します。
アンカーリンクとは？
アンカーリンクとは主に、「表示しているページ内の特定の箇所に移動できるリンク」のことです。別名で「ページ内リンク」とも呼ばれています。
具体例を挙げると、よくWeb ページやブログで見かける「TOPへ戻る」などです。クリックすることでページの最上部に移動しますが、これはアンカーリンクによるものです。
アンカーリンクは記事中の必要な部分へ的確に設置することで、ユーザーへ最適な情報をスピーディーに届けられるため、ユーザビリティの向上に役立てられています。
アンカーリンクの名称の由来
アンカーとは、船が流れないよう鎖につないで沈めておく「錨（いかり）」のこと、あるいは「固定」といった意味をもっています。錨は船が流れてしまうことを防げるだけでなく、船を希望の位置にかんたんに移動させることが可能です。
アンカーリンクも、ユーザーが求めている情報や箇所にかんたんに遷移できることから錨にたとえられ、このような名称で呼ばれています。
アンカーリンクとハイパーリンクの違い
アンカーリンクとハイパーリンクともに、「クリックすれば特定の箇所に移動する」という本質は同じです。
両者の主な違いを挙げると、以下のとおりです。
- アンカーリンク…Webページ内・特定の箇所へのリンク
- ハイパーリンク…Excelなど外部データに添えられたWebページへのリンク
アンカーリンクは主にWebページ内に設置され、クリックするとそのWebページ内の特定の箇所に移動するものです。
一方のハイパーリンクは、主にExcelやWordといった外部データに設置されたWebページへのリンクのことを指します。
アンカーリンクはSEOに影響する？
アンカーリンクを設置することは、SEOに大きく影響します。アンカーリンクは、ユーザーの利便性を向上させる効果をもつためです。
具体的には、ユーザーが求める情報に関係のあるリンクを設置することで、ユーザーの引き出しや選択肢を広げられ、満足度の向上につながります。
またページ内の希望の箇所にかんたんに移動できることは、ユーザーにとってサイトの使いやすさに影響するため、回遊性アップも期待できます。
このようにアンカーリンクはSEO対策として有効なので、効果的に活用することが大切です。
アンカーリンクのメリット
アンカーリンクの主なメリットは、大きく以下のとおりです。
- ユーザビリティ向上につながる
- SEOで評価されやすくなる
ユーザビリティ向上につながる
ユーザビリティの向上につながることが、アンカーリンクのメリットです。
Webページを閲覧しているユーザーは記事全文を読むことはなく、必要な見出しや箇所のみを選んで読んでいます。
そのため、「必要な情報が載った部分にすぐに移動できる」ことは、サイトの使い勝手に大きく影響するためです。
SEOで評価されやすくなる
アンカーリンクのメリットのひとつに、SEOでの評価が上がることもあります。
適切にアンカーリンクが設置されていると、ユーザーから「使いやすいサイト」と感じてもらいやすくなるためです。
逆にアンカーリンクがまったく設置されていないサイトの場合、ユーザーはスクロールを繰り返しながら、求めている情報を探さなければなりません。これはユーザーにとっては手間であり、滞在時間の低下にもつながってしまいます。
アンカーリンクの種類と使い方
ひとえにアンカーリンクといっても、さまざまな種類があり、それぞれに使い方も異なります。
ここではアンカーリンクの代表的な種類と使い方を、以下のとおり解説します。
- ページ内の特定の箇所に移動する【id属性】
- 他ページへ遷移させる【href属性】
- リンク先を別タブで開く【target属性】
- 画像に説明の文言を加える【alt属性】
- 関連性の低いリンクからのクロールを防ぐ【nofollow属性】
他ページへ遷移させる【href属性】
閲覧しているWebページ外の、別のページへ遷移する際に用いるのが「href属性」です。
href属性を使う際、HTMLコードは次のように記載する必要があります。
<a href=”https://~~~.jp”>対象のWebページはこちら</a>
ダブルクオーテーションの中に対象のWebページのURL、<a>と</a>の間にリンクの表示名を入力します。
ページ内の特定の箇所に移動する【id属性】
Webページにある「TOPへ戻る」のような、ページ内の特定の箇所に移動させる際に用いるのが「id属性」です。
id属性を使う際のHTMLコードは、以下のようになります。
<!– クリックするボタン –>
<a href=”#example”>〇〇見出しへ戻る</a>
<!– 移動先 –>
<h2 id=”example”>〇〇見出し</p>
id属性を使う際は、クリックする箇所と移動先、両方にID名の記述が必要です。
移動先のh2見出しにID「example」を設定し、クリックする箇所にはそのID名をhrefで指定することで、移動を実現できます。
リンク先を別タブで開く【target属性】
target属性を用いれば、指定したページを別タブで開くことが可能です。
target属性の記述法は、以下のようになります。
<a href=”https://~~~.jp” target=”_blank”>別タブでWebページを開く</a>
hrefで指定したURLの後に、「target=”_blank”」という文字を追加するだけで、リンク先が別タブで開かれるようになります。
別タブで開くことでWebページの滞在時間の向上につながるため、現代ではリンクにtarget属性を用いるサイトが増えています。
画像に説明の文言を加える【alt属性】
Webページ内の画像に「説明の文言」を入れると、SEOで評価されやすくなります。検索エンジンは画像の中身を判別することが困難なため、説明を入れることで判別が容易になるためです。
画像に説明の文言を入れるには、以下のように記述します。
<a href=”https://~~~.jp”><img src=”image.png” alt=”説明の文言”>
alt属性は一般的に、imgタグ内の末尾に設置します。
なお説明の文言は、画像と関連性のある文言をなるべく簡潔に記述することが好ましいです。
関連性の低いリンクからのクロールを防ぐ【nofollow属性】
Webページに外部のリンクを貼ると、その外部リンク先のWebページがSEOで評価されるようになります。しかしこのリンク先が競合他社だったり、関連性の低いサイトであった場合、好都合とはいえません。
ここで「nofollow属性」を用いることで、他社のサイトが評価されたり、クロールおよびインデックスされることを防げます。
nofollow属性の記述法は、以下のとおりです。
<a href=”https://~~~.jp” rel=”nofollow”>対象のWebページはこちら</a>
hrefで指定したURLの後に、「rel=”nofollow”」を追加します。
アンカーリンクを効果的に使うための方法
アンカーリンクを効果的に使うための方法として、以下のようなものが挙げられます。
- リンクの文字は青系の色にする
- 信頼できるリンク先かどうかを確認する
- なるべく関連性の高いリンク先を選ぶ
- リンクの文言は簡易的にする
- 過度なリンク設置は逆効果
リンクの文字は青系の色にする
アンカーリンクの文字色は、青系の色に設定することが好ましいです。
青色の文字以外では、リンクなのかどうかの判別が困難になるためです。また通常の文字と同色だと、ユーザーからはリンクがあることにすら気付いてもらえません。
アンカーリンクの文字色はSEOにはそれほど大きな影響はないものの、よほどデザインに凝っているサイトなどでない限り、ユーザビリティを優先して青系にするのが無難です。
信頼できるリンク先かどうかを確認する
リンクを貼り付けるのはSEO対策として有効ですが、リンク先のWebページの内容や質については念入りに確認を行う必要があります。
たとえばリンク先のURLがリンク切れになっていたり、いつの間にか非公開にされてしまっている可能性もゼロではないためです。
また、安全性が高いことを証明する「SSH認証」が設定されていないサイトを設置すると、ウイルス感染のリスクから、逆にSEO評価が下がってしまう可能性が高くなります。
ユーザーを不安にさせないためにも、徹底的に確認することが大切です。
なるべく関連性の高いリンク先を選ぶ
関連性の高いリンク先を選ぶことも、アンカーリンクを効果的に使う方法として有効です。
ジャンルや業種がまったく異なるWebページへのリンクのような、関連性の低いものを設置していると、SEO評価が下がってしまう可能性があります。ユーザーが求める情報との乖離があると、「ユーザビリティが低いサイト」と判断されてしまうためです。
リンク先の記事がどれほど良質なコンテンツであっても、自身のWebページとの関連性があるのか、またユーザーが興味をもってくれそうな内容のリンクなのか、あらかじめ見極める必要があります。
やむを得ず関連性の低いサイトや、リンク評価されたくない競合サイトのリンクを設置する場合は、必ず「nofollow属性」を用いることが大切です。
リンクの文言は簡易的にする
アンカーリンクの文言は、リンク先の内容に沿った内容のものを、なるべく簡易的に記述することが大切です。簡易的でわかりやすい文言のほうがユーザーが理解しやすいことから、クリックしてもらえる可能性も上がるためです。
また検索エンジンは、リンク先の情報だけでなく、アンカーリンクのテキストとWebページの関連性も判断対象のひとつとしています。そのため、関連性が強く簡易的な文言は、SEO対策としても有効です。
具体的には、以下OK例のような文言を参考にしてください。
- OK例…「〇〇株式会社の採用サイト」「〇〇を深掘りしたページ」
- NG例…「クリック」「こちら」
文言はなるべく、10～20文字程度に留めるのが理想です。
過度なリンク設置は逆効果
アンカーリンクがいくらSEOに有効だからといって、あまりに多く設置するのは逆効果となります。
アンカーリンクは、適切な箇所に必要な分のみ設置するのが大切です。ユーザーがとくに疑問や興味を抱きそうな箇所を狙い、それらを解決してくれる関連性の高いリンクを設置するのが理想といえます。
具体的にはWebページの内容にもよりますが、一般的には5000文字の記事に2〜3個ほど設置するのが好ましいです。
適切な箇所に適切なリンクが設置されたWebページは、ユーザーにとっても満足度が高く、滞在時間や回遊率、SEO評価が大きく上がります。
アンカーリンクの遷移箇所がずれるときの対処法
アンカーリンクを使って特定の箇所に移動させる際、特定の箇所から随分下、もしくは上に移動してしまうことは珍しくありません。
この原因の多くは、移動先の該当箇所を「position:fixed;」で固定していることです。この固定方法を解除すれば解決する可能性は高いですが、コーディングの都合上それが難しい場合もあります。
この問題を解決するための、もっともかんたんで手っ取り早い方法が、以下のCSSコードを追加することです。
#example {
padding-top:100px;
margin-top:-100px;
}
padding-topの100pxを、margin-topの-100pxで帳尻合わせることで、適切な位置でストップさせることが可能になります。
アンカーリンクに関するよくある質問
ここでは、アンカーリンクについてよくある質問をとりあげ解説します。
Q:アンカーリンクを無効にすることはできる？
Answer）アンカーリンクを無効にすることは可能です。やり方はさまざまですが、もっともかんたんな方法として、「href属性を外す」という対策が挙げられます。
aタグ自体を外すという方法もありますが、「aタグは残しつつ、href属性を外す」ことこそが、HTMLの仕様に沿った方法とされているので、なるべくこの方法を用いるのがいいでしょう。
Q:name属性とは何のこと？
Answer）name属性とは、各要素に任意の名称を設定できる記述法のことです。任意でつけた名称は、CSSやスクリプトなどで要素を指定する際に使うことができます。
具体的な記述例は、以下のとおりです。
<input type=”sample” name=”example”>
任意のタグの中に「name=”example”」を入力することで、名称を指定できます。なおタグはinputでなくとも、どのタグでも利用可能です。
Q:アンカーリンクが移動しないときの対処法は？
Answer）アンカーリンクが移動しない原因は、以下が挙げられます。
- クリックするボタンと移動先が正しく記述されていない
- idのスペルが間違っている
- ボタン側の「#」が抜けている
アンカーリンクの正しい記述は、以下のとおりです。
<!– クリックするボタン –>
<a href=”#example”>〇〇見出しへ戻る</a>
<!– 移動先 –>
<h2 id=”example”>〇〇見出し</p>
移動先側にはid属性、クリックするボタン側には「#」を付けたのち、id名を入力する必要があります。
まとめ
アンカーリンクの適切な使い方を把握していると、よりユーザーの意図に沿ったWebページに仕上げることができ、結果としてSEOにおいて高い評価を得られます。アンカーリンクといっても種類や使い方はさまざまです。またリンク先の関連性や安全性、リンクの文字色なども重要なポイントですので、本記事で紹介した内容を参考に正しく効果的に設置してほしいと思います。
この記事の監修者
日本大学法学部卒業、広告代理店で12年間働いている間、SEOと出会い、SEO草創期からSEO研究を始める。SEOを独学で研究し100以上のサイトで実験と検証を繰り返しました。そのノウハウを元に起業し現在、11期目。営業、SEOコンサル、WEB解析（Googleアナリティクス個人認定資格GAIQ保持）コーディング、サイト制作となんでもこなす。会社としては今まで2000以上のサイトのSEO対策を手掛けてきました。
