アンカーリンクとは、別のページへ遷移させるためのHTMLタグの一つです。アンカーリンクを正しく設置することで、ユーザーの利便性やSEO評価の向上につながるため、Webサイト運営者やマーケティング担当者は理解しておく必要があります。
今回は、アンカーリンクの概要や使い方、設置するメリットについてみていきましょう。併せて、アンカーリンクを設置する際の注意点やポイント、ずれるときの対処法にもふれていきます。
アンカーリンク（aタグ）とは？
アンカーリンク（aタグ）とは、指定したURLに移動するリンクを意味する言葉で、次の2つのパターンがあります。
- ページ内のあらかじめ指定した場所へ移動できる
- 別ページに移動する
HTMLタグの一つで、「ページ内リンク」や「記事内リンク」と呼ばれるケースもあります。
アンカーリンクを設置すれば、ページの離脱率を低下させ、必要な情報にたどり着きやすくなるため、ユーザーのストレスを軽減できます。たとえば、「ページトップに戻る」「目次」などの機能が代表的です。
アンカーリンクの重要性
スマホによる情報検索が主流であるため、アンカーリンクを適切に設置できれば、ユーザーのUX向上につながります。たとえば、非常に文章量のある記事をスマホで表示した場合、アンカーリンクの設置がなければ、離脱率が高まってしまう可能性があります。
必要な情報に任意のタイミングでアクセスできる仕組みとして、アンカーリンクの重要性は高まっているといえるでしょう。
ハイパーリンクとの違い
「アンカーリンク」と混同されやすいものとして「ハイパーリンク」が挙げられます。次のような違いがある点を把握しておきましょう。
- アンカーリンク：Webページ内の指定箇所や同じWebサイトの指定Webページに遷移できるリンクを指す
- ハイパーリンク：Webページ外の指定ファイルやエクセルともリンクできる
いずれもクリックひとつでユーザーが必要な情報を効率よく得られるため、SEO対策において欠かせない要素だといえるでしょう。
【HTMLの例】アンカーリンクの使い方
アンカーリンクには、ページ内の特定の箇所へ移動させる「id属性」やほかのページに飛ぶ「href属性」、リンク先を別タブで開く「target属性」などがあります。
ここでは、アンカーリンクの種類ごとに、HTMLの使い方をみていきましょう。
href属性
href属性（エイチレフ属性）とは、リンク先のURLを指定する属性を意味します。HTML5より以前は、<a>要素に必ず付けなければなりませんでした。しかし、HTML5以降は必須ではなくなっています。
【記述方法の例】
id属性
id属性とは、固有の名前を指定する属性のことです。おもにページ内の特定の場所に移動する際に使用するものであり、たとえば「目次」や「見出し」が該当します。
【記述方法の例】
target属性
target属性とは、リンクを開く際の表示領域を指定する属性のことです。リンクを新しいブラウザウィンドウやタブで開くように設定できます。
【記述方法の例】
nofollow属性
nofollow属性は、リンク先を検索エンジンのクローラーに認識させたくないときに設置します。nofollow属性を設置することで、「リンク先をクロールさせない」という指示を検索エンジンに伝えられます。
【記述方法の例】
alt属性
alt属性（オルト属性）とは、画像の代わりとなるテキスト情報のことです。
画像の意味や内容を記述するもので、画像が反映されないときの代替テキストとして表示したり、検索エンジンのクローラーに画像内容を伝えたりする役目を果たします。
画像の内容に即したキーワードを用いて記述しましょう。
【記述方法の例】
アンカーリンクを利用する3つのメリット
ここでは、アンカーリンクを設置するメリットについてみていきましょう。ユーザーが必要な情報を瞬時に得られる、サイト全体の評価アップにつながるといった効果が期待できます。
以下3つのメリットについて詳しく解説します。
- ユーザーの満足度につながる
- サイト評価が上がる
- インデックスにつながる
ユーザーの満足度につながる
アンカーリンクによって短い時間での情報収集が可能となり、ユーザビリティーの向上につながります。ユーザビリティーとは、日本語で「使いやすさ」「使い勝手」を意味します。
ユーザーは、より短い時間で「自分の疑問や悩みを解消したい」「知識を得たい」と思っている傾向にあるため、必要な情報だけを網羅的に読み進められる仕組み作りが大切です。
アンカーリンクを挿入することで、ユーザーが求める情報をストレスなく提示できるため、ユーザビリティーの向上につながるでしょう。
サイト評価が上がる
アンカーリンクを設置しユーザビリティーが向上することで、離脱率が低くなる効果が見込めます。その理由は、「ユーザーの滞在時間が長い＝快適なサイト」と見なされ、Googleからの評価が高まる傾向にあるためです。
また、各ページをリンクでつなぐことで「関連記事が多い＝専門性の高いサイト」と認識されるため、Googleから高い評価を得られる可能性もあります。
インデックスにつながる
Googleのクローラーは、内部リンクをたどって巡回し、新たなページをインデックスします。アンカーリンクを設置すると、Googleのクローラーが円滑に巡回できるため、新規ページを発見しやすくなる点もメリットです。
また、サイト運営の目的となるページに多くのリンクを集めれば、リンク構造の強化につながり、"もっとも上位に表示させたいページ"の評価を高められます。
【作り方】アンカーリンクを使うときの3つの注意点
アンカーリンクは、ユーザー満足度とSEO評価の向上に役立つものです。しかし、設置方法を誤ると、双方に悪影響を及ぼす可能性があります。
ここでは、アンカーリンクを使うときの以下の注意点をみていきましょう。
- ヘッダーをposition:fixed;で固定するとずれる、または隠れる
- リンク先の状態や関連性を定期的にチェックする
- id属性は重複を避ける
ヘッダーをposition:fixed;で固定するとずれる、または隠れる
アンカーリンクを設置した時に、スクロールすると位置がずれてしまう場合があります。その多くは、ヘッダーを「position:fixed;」で固定しているために発生します。
このような場合は、CSSでリンクの位置を調整すれば簡単に解決できるため、スクロール地点がずれる際には下記のコードをCSSに記述しましょう。
【固定ヘッダーの高さ（縦幅）が100pxの場合】
#id-name{
padding-top:100px;
margin-top:-100px;
}
【固定ヘッダーの高さ（縦幅）が60pxの場合】
#id-name{
padding-top: 60px;
margin-top: -60px
}
なお、id-nameはアンカーポイント(ページ内の特定位置)に指定したid名を記述します。
リンク先の状態や関連性を定期的にチェックする
リンク先の低品質ペナルティーを防ぐためのアンカーテキスト設置には注意が必要です。とくに、外部リンクを挿入する場合は、リンク先ページの品質はよく確認しましょう。
「検索エンジン最適化（SEO）スターター ガイド」によれば、ほかのサイトにリンクした場合には、自分のサイトに対する評価の一部を別のサイトに与えることになる旨が記述されています。
リンク先に注意する
他のサイトにリンクすると、自分のサイトに対する評判の一部を別のサイトに与えることになります。
たとえば、リンク先ページの情報が古い・信ぴょう性が低いなど品質に問題がある場合は、サイト全体の評価が下がってしまうため、定期的にリンク先ページの見直しを行いましょう。
なお、自社サイトへの評判をほかのサイトに分け与えたくない場合は、nofollow属性を使用することを推奨します。
id属性は重複を避ける
ページ内の特定の位置へ遷移する「id属性」を使用する場合は、id名を重複させないようにしましょう。
たとえば、同一記事内に「<p id=”list”>3.id属性は重複を避ける</p>」というid名を複数設置してしまった場合、正常にリンク先へ飛ばない、意図しない場所へ遷移するなどの不具合が生じる可能性があります。
具体的には、下記のように番号による区分を付加すれば、重複を避けられるでしょう。
<div id="list-1"></div>
<div id="list-2"></div>
アンカーリンクを設置する際のポイント
アンカーリンクを設置する際には、いくつか押さえておくべきポイントがあります。ここでは、アンカーリンクを設置する際のポイントを以下の3つに分けて解説します。
- リンクの色を青色にする
- リンク評価を与えたくない場合はnofollow属性を使う
- ゆっくりスクロールしたい場合はCSSにコードを追加する
リンクの色を青色にする
テキストでリンクを挿入する場合は、青色に設定しましょう。ユーザーは、この形式に慣れており、「青色の文字をクリックすると、ほかのページにアクセスできる」と直感的に理解できるためです。
色はやや明るめの青色を選択すると良いでしょう。Webページは、文字色が異なるだけで可読性や印象が大きく変わります。
自社サイトに適したカラーを選んで、クリック率の向上を図りましょう。
リンク評価を与えたくない場合はnofollow属性を使う
リンク先のページの品質に問題があれば、サイト全体の評価が下がる可能性があります。
また、リンク先のサイトが競合にあたる場合、自社サイトの評価を与えることで、特定キーワードでの上位表示を勝ち抜けないといった恐れもあるでしょう。
こうした状況下でリンクの設置が必要な場合は、「nofollow属性」の使用を推奨します。
nofollow属性でアンカーリンクを設置すると、Googleのクローラーによるリンク先への遷移が行われず、評価に影響を及ぼすことがなくなります。
ゆっくりスクロールしたい場合はCSSにコードを追加する
アンカーリンクをクリックした場合、通常は瞬時に別のサイトやページに移動します。「html{scroll-behavior: smooth;}」をCSSに追加すれば、スムーズスクロールを実装可能です。
scroll-behaviorは、文書の:rootに一行追加するだけですので、必要に応じて活用しましょう。
まとめ：適切にアンカーリンクを付けてSEO対策を講じよう
アンカーリンクとは、Webページのテキストやボタン、画像をクリックし、指定の場所や別のWebページへ移動できるリンクを意味する言葉です。
アンカーリンクを設置することで、下記のようなメリットが期待されます。
- ユーザビリティーが向上する
- クローラーによる円滑な巡回が行われる
- サイトの評価が向上する
正しくアンカーリンクを設置すれば、Webサイトおよびコンテンツの質が向上し、サイト全体の評価を高められるでしょう。
SEデザインでは、SEO記事制作やオウンドメディアの構築、導入事例制作などのコンテンツマーケティング支援を行っております。前身である出版社・翔泳社時代から培ってきた編集力・企画力で、良質なコンテンツを制作いたします。集客やリード育成にお悩みの方は、お気軽にお問い合わせください。
