アンカーリンクとは
アンカーリンク（anchor link）とは、Webページ内の指定した場所に移動するためのHTMLタグを指します。
アンカーリンクをクリックすると、指定した場所にジャンプする仕組みです。
設置する目的としては、サイトの利便性を良くするためです。アンカーリンクがあれば、読者は知りたい情報をすぐに読めます。
このように、サイトの利便性を向上させるためにアンカーリンクを設置します。
ハイパーリンクとの違い
ハイパーリンクもアンカーテキストも指定した場所に移動する点では同じですが、少し意味が異なります。
ハイパーリンクはWebページだけでなく、メールやPDFファイルなどのリンクも含まれます。
一方、アンカーリンクはWebページ内のリンクのみが対象です。
アンカーリンクの使い方
ここでは、アンカーリンクの使い方を解説していきます。
アンカーリンクの使い方がわからない方は、参考にしてみてください。
href属性
href属性は、リンク先のURLを指定するために使います。この属性を設定することで、別ページへのアンカーリンクを設定できます。
記述方法は以下のとおりです。
<a href="https://〇〇.jp">表示させたいリンクの名称</a>
「https://〇〇.jp」部分にリンク先にしたいドメインを入力。そして「表示させたいリンクの名称」に移動先ページの内容を表すアンカーテキストを入力してください。
これでhref属性を設定できます。
id属性
id属性は、Webページ内の特定の場所を指定し、移動するリンクを設定する方法です。
例えば、以下のようにHTMLに記述すると「アンカーリンクの使い方」の見出しにid属性を設定できます。
【id属性の記述例】
<a href="test">テキスト
<p id="test">テキスト</p>
「test」に指定したいアンカーリンクの名称を記載します。そして「テキスト」に表示させたいテキストを入力すると、id属性を設定できます。
target属性
target属性は、新しいタブページへ移動するアンカーリンクを作成したいときに使います。
新しいタブでリンク先のページを開くことで、違うページに移動したあとも前のページを簡単に確認できます。
【target属性の記述例】
<a href="リンク先URL" target="_blank">新規タブ</a>
「リンク先URL」にリンクさせたいページのURLを入力。そして「新規タブ」にリンク名を入れると、target属性を設定できます。
アンカーリンクを設置する3つのメリット
ここでは、アンカーリンクを設置するメリットを解説していきます。
- サイトの利便性が向上する
- SEO評価の向上が期待できる
- コンバージョン率の向上が期待できる
サイトの利便性が向上する
アンカーリンクを設置することで、サイトの利便性が向上します。アンカーリンクが適切に設定されていると、読者はページ内の情報を効率よく探せるからです。
サイトの利便性が向上することで、滞在時間や回遊率の向上が期待できます。
上記の指標はSEOやコンバージョン率（CVR）にも好影響を及ぼすので、アンカーリンクを設置するメリットは大きいです。
SEO評価の向上が期待できる
アンカーリンクを設置することで、SEO評価の向上が期待できます。
アンカーリンクを設置することで、検索エンジンがページ内の情報を理解しやすくなるからです。
検索エンジンがページ内容を正確に理解し、適正な評価を得られることで、検索順位の向上につながります。
また、前述したように滞在時間や回遊率の向上により、SEO効果が上がりやすくなります。
コンバージョン率の向上が期待できる
アンカーリンクを設置するとサイトの利便性が良くなるので、コンバージョン率の向上が期待できます。
例えば、滞在時間が10秒しかないページと1分あるページでは、1分のページのほうがコンバージョンが発生するチャンスは多いです。
コンバージョン率は収益に直結するので、アンカーリンクを設置してみてください。
アンカーリンクを設置する際の注意点3つ｜失敗を防ぐ
ここでは、アンカーリンクを設置する際の注意点を解説していきます。
- パッと見てリンクだと気づいてもらえる工夫をする
- シンプルでわかりやすいテキストにする
- リンク先のページに問題がないか確認する
アンカーリンクの設置で失敗しないためにも、注意点を押さえておきましょう。
パッと見てリンクだと気づいてもらえる工夫をする
アンカーリンクを設置しても、気づいてもらえないと意味がありません。そのため、パッと見てリンクだと気づいてもらえる工夫をしてみてください。
例えば、アンカーリンクを太字で強調したり、下線を入れたりすると良いでしょう。アンカーリンクはテキストも重要ですが、デザインも重要です。
ユーザーが一目でリンクだとわかる工夫を施しましょう。
シンプルでわかりやすいテキストにする
シンプルでわかりやすいテキストにしましょう。
複雑でわかりにくいテキストだと、アンカーリンクだと気づかれずに離脱される可能性が高くなるからです。
また、シンプルであってもわかりにくいテキストもNGです。例えば「詳しくはこちら」や「ここをクリック」などのテキストでは、リンク先の内容がわかりません。
以下のように、リンク先の内容がわかるシンプルなテキストにしてみてください。
シンプルでわかりやすいテキストにすれば、クリック率の向上につながります。
リンク先のページに問題がないか確認する
リンク先のページに問題がないか確認しましょう。
【よくあるリンク先のページの問題】
- リンク切れ
- 関連性の低いリンクを張っている
- 低品質なコンテンツにリンクを張っている
リンク切れを起こしているとユーザビリティを損ねてしまうので、リンク切れは定期的にチェックする必要があります。
また、リンク元のページと関連性が低いページにリンクを張っていると、検索エンジンからの評価が下がる可能性があります。
ユーザビリティや検索エンジンからの評価を損ねないためにも、定期的にリンク先に問題がないか確認しましょう。
アンカーリンクのずれを解決する方法
アンカーリンクを設定した際に、移動してほしい場所からずれるケースがあります。ヘッダーを「position:fixed;」にしていることがよくある原因です。
アンカーリンクがずれると見出しや一部の文字などが見えなくなるので、サイトの利便性が低下します。
気づいたら直すようにしましょう。
ずれを解決する方法はいくつかありますが、ここではCSSを使った方法を解説します。
コードの記述例は以下のとおりです。
#anchor{
padding-top:100px;
margin-top:-100px;
}
仮にヘッダーの高さ（padding-top）を100pxとした場合、margin-topを-100pxにして高さを相殺します。これで、アンカーリンクのずれを直せます。
まとめ：アンカーリンク以外のSEO内部対策も実践しよう！
アンカーリンクの基礎知識や正しい使い方を解説しました。アンカーリンクを設置することで、以下のメリットがあります。
- サイトの利便性が向上する
- SEO評価の向上が期待できる
- コンバージョン率の向上が期待できる
本記事の内容を参考にして、アンカーリンクを設置してみてください。
アンカーリンク以外のSEO内部対策をしたい方は、以下の記事がおすすめです。