ホームページに情報を追加していくうちに、ページが縦に長くなってしまった——そんな経験はありませんか？訪問者が必要な情報を探してページをスクロールし続けるのは、思いのほかストレスがかかります。そこで役立つのがアンカーリンクを使ったページ内ナビゲーションです。
アンカーリンクとは、クリックするとページ内の特定の場所にジャンプできるリンクのこと。うまく活用すれば、訪問者の利便性を高めながら、SEOにもよい影響を与えることができます。
この記事では、アンカーリンクの基本的な仕組みから設置方法、SEO効果を引き出すための使い方までわかりやすく解説します。
→プロ級Webサイトが自分で作れるノーコードCMSのBiNDupを30日間無料体験
アンカーリンクとは何か
アンカーリンクとは、同じページ内の特定の場所にジャンプできるリンクのことです。クリックすると、ページの先頭や別のURLに移動するのではなく、そのページの中の指定した位置まで画面がスクロールします。
特に縦に長いページや情報量の多いページで、訪問者が必要な箇所にすぐたどり着けるようにするために使われます。
アンカーテキスト・ページ内リンクとの違い
アンカーリンクと似た言葉に、アンカーテキストとページ内リンクがあります。まずはそれぞれの意味を整理しておきましょう。
アンカーテキストとは、リンクが設定されたテキストそのもののことです。たとえば「詳しくはこちら」や「料金プランを見る」といったクリックできる文字がアンカーテキストにあたります。アンカーリンクはリンクの仕組み全体を指し、アンカーテキストはその中のリンク文字の部分を指します。
ページ内リンクはアンカーリンクとほぼ同じ意味で使われることが多く、同じページ内の特定箇所に飛ぶリンクという機能を指す呼び方です。厳密な使い分けはなく、どちらの呼び方も一般的に使われています。
よく見かけるアンカーリンクの使用例
アンカーリンクは、さまざまなWebページで活用されています。
もっともよく見かけるのが、記事や解説ページの冒頭に設置された目次です。目次の各項目をクリックすると、対応する見出しの位置まで画面がジャンプします。訪問者が読みたいセクションに迷わずアクセスできるため、長文コンテンツには特に効果的です。
また、FAQページでの活用も一般的です。質問の一覧を上部に並べておき、各質問をクリックすると対応する回答箇所に移動する構成は、訪問者が知りたい答えをすぐに見つけられる使いやすいUIです。
さらに、サービス紹介ページや料金ページでも活用されています。機能・料金・導入事例など複数の情報をひとつのページにまとめる場合、アンカーリンクを使ったナビゲーションを設けることで、訪問者が必要な情報にスムーズにたどり着けます。
→プロ級Webサイトが自分で作れるノーコードCMSのBiNDupを30日間無料体験
アンカーリンクの設置方法
アンカーリンクは、HTMLの基本的な知識があれば自分で設置できます。仕組みはシンプルで、ジャンプ先となる要素にidを付け、そのidをリンクのhref属性で指定するという2ステップで成り立っています。
ここでは、HTMLで直接記述する方法と、CMSやノーコードツールを使って設置する方法をそれぞれ解説します。
HTMLで設置する基本的な手順
アンカーリンクをHTMLで設置するには、2つの記述が必要です。
まず、ジャンプ先となる要素にid属性を付けます。id属性は、ページ内の特定の場所に名前をつけるためのものです。たとえば料金セクションの見出しにidをつける場合、以下のように記述します。
<h2 id="price">料金プラン</h2>次に、リンク側のhref属性に「#」とid名を組み合わせて指定します。
<a href="#price">料金プランを見る</a>このリンクをクリックすると、id=”price”が付いた要素の位置まで画面がスクロールします。id名は半角英数字で付けるのが一般的で、同じページ内に同じid名を複数使うことはできない点に注意してください。
目次（ページ内ジャンプ）を作る具体的なコード例
先ほどの基本手順を応用すると、ページ上部に目次を設置できます。以下は、3つの見出しに対応した目次のコード例です。
<!-- 目次 -->
<ul>
<li><a href="#about">アンカーリンクとは</a></li>
<li><a href="#how-to">設置方法</a></li>
<li><a href="#seo">SEOへの効果</a></li>
</ul>
<!-- 各セクション -->
<h2 id="about">アンカーリンクとは</h2>
<h2 id="how-to">設置方法</h2>
<h2 id="seo">SEOへの効果</h2>目次のリンクとジャンプ先のidが対応していれば、項目をいくつ追加しても同じ仕組みで動作します。ページの内容が増えてきたタイミングで、目次を設置することを検討してみてください。
コードを書かずにアンカーリンクを設置する方法
HTMLの知識がなくても、CMSやノーコードツールを使えばコードを書かずにアンカーリンクを実装できます。
ホームページ作成ツールのBiNDupでは、編集画面のフォームからアンカー名（属性id）を入力するだけで完了するため、初めてホームページを作る方にもおすすめです。
→プロ級Webサイトが自分で作れるノーコードCMSのBiNDupを30日間無料体験
アンカーリンクがSEOに与える影響
アンカーリンクはページの使いやすさを高めるだけでなく、SEOにもよい影響を与える要素のひとつです。直接的な順位上昇の要因というよりも、訪問者の行動やGoogleのページ評価に間接的に作用します。
UXの向上が評価につながる理由
Googleは、訪問者にとって使いやすいページを高く評価するという方針を明確にしています。アンカーリンクによって訪問者が必要な情報にすぐたどり着けるようになると、ページ全体の使いやすさ、いわゆるUXが向上します。
UXの改善は、滞在時間の増加や直帰率の低下といった訪問者の行動データにあらわれます。こうした訪問者の行動は、Googleがページの品質を判断する際の参考情報になると考えられています。
アンカーリンクそのものが順位を直接上げるわけではありませんが、訪問者が快適に情報を探せる環境を整えることが、結果としてSEO評価につながるという流れを意識しておくとよいでしょう。
滞在時間・直帰率への効果
訪問者がページを訪れたとき、目的の情報がすぐに見つからないと、そのままページを離れてしまいます。すぐに離脱するという行動が積み重なると、直帰率が高くなり、Googleのページ評価を下げる要因になりえます。
アンカーリンクで目次やナビゲーションを設置しておくと、訪問者が必要な箇所に迷わずジャンプできるため、離脱を防ぐ効果が期待できます。また、ページ内を行き来しやすくなることで、複数のセクションに目を通してもらいやすくなり、結果として滞在時間の向上にもつながります。
特に情報量の多いページでは、アンカーリンクの有無が訪問者の行動に大きく影響するため、積極的に活用することをおすすめします。
Googleのクローラーとサイト構造の関係
Googleはクローラーと呼ばれるプログラムを使って、Web上のページを巡回し内容を解析しています。アンカーリンクを設置すると、ページ内のどこにどんな情報があるかをクローラーが把握しやすくなります。
特に、アンカーリンクのhref属性に含まれるid名やアンカーテキストは、そのページの構造や内容を示すヒントになります。わかりやすいid名と適切なアンカーテキストを使うことで、Googleがページの内容を正確に理解しやすい構造を作ることができます。
クローラーへの配慮は、検索結果での適切な評価につながります。訪問者にとっての使いやすさと、クローラーにとってのわかりやすさを同時に意識してアンカーリンクを設置することが、SEO対策としての効果を高めるポイントです。
→プロ級Webサイトが自分で作れるノーコードCMSのBiNDupを30日間無料体験
アンカーリンクを設置するときの注意点
アンカーリンクは手軽に設置できる一方で、いくつかの落とし穴があります。設置後に不具合が起きないよう、事前に知っておきたい注意点をまとめました。
「こちら」はNG。キーワードを含めた具体的な表現にする
アンカーリンクのSEO効果を引き出すには、リンクに使うアンカーテキストの書き方が重要です。同じアンカーリンクでも、アンカーテキストの内容によってGoogleのクローラーへの伝わり方や訪問者のクリック率が変わります。
アンカーテキストでよく見かけるのが、「こちら」「詳細はこちら」「もっと見る」といった表現ですが、これらはリンク先に何が書かれているかをGoogleにも訪問者にも伝えられないため、SEOの観点からは避けるべき書き方です。
Googleはアンカーテキストの内容を参考にして、リンク先のページが何についての情報かを判断します。そのため、リンク先の内容を具体的に示すキーワードをアンカーテキストに含めることが重要です。
たとえば、料金ページへのリンクであれば「こちら」ではなく「料金プランを確認する」のように書くと、訪問者にもGoogleにも内容が伝わりやすくなります。アンカーテキストは短すぎず長すぎず、リンク先の内容を過不足なく伝える長さが理想です。目安として10〜20文字程度を意識すると書きやすくなります。
id名のミス・リンク切れがないか細かく確認する
アンカーテキストに具体的なキーワードを入れるだけでなく、リンク先のページや箇所の内容と一致していることも重要です。たとえば「料金プランを確認する」というアンカーテキストをクリックしたのに、飛んだ先が会社概要のセクションだったとしたら、訪問者は混乱してすぐにページを離れてしまいます。
アンカーリンクが正しく動作しない原因として、もっとも多いのがid名の記述ミスです。リンク側のhref属性に指定したid名と、ジャンプ先のid属性の名前が1文字でも違うと、クリックしても正しい場所に移動しません。訪問者の離脱を招くだけでなく、Googleがページの内容を正しく評価できなくなる原因にもなります。
設置後は必ず実際にクリックして動作を確認しましょう。また、ページの構成を変更したときにアンカーリンクの設定を更新し忘れるケースも多いため、ページを編集した際はアンカーリンクの動作もあわせてチェックする習慣をつけることが大切です。
スマホ表示でのズレ対策
アンカーリンクをクリックしたとき、パソコンでは正しい位置に移動できていても、スマホで表示するとジャンプ先がずれてしまうことがあります。原因のひとつとして多いのが、スマホ表示時に固定表示されるヘッダーです。ヘッダーの高さ分だけ見出しが隠れてしまい、意図した位置より上にジャンプしているように見えます。
対策としては、CSSでジャンプ先の要素に上部の余白（padding-top）を設定する方法が一般的です。設置後はスマートフォンでも実際に動作を確認することを忘れずに行いましょう。
BiNDupのテンプレートはあらかじめPC・スマホ両方の表示に最適化しているのでCSSを調整する必要はない
リンクの数が多すぎると訪問者が混乱する
アンカーリンクは便利な機能ですが、ページ内に設置するリンクの数が多すぎると、どこに移動すればよいか迷ってしまいます。特に目次に項目を詰め込みすぎると、一覧を見ただけで読む気が失せてしまうこともあります。
アンカーリンクはあくまで訪問者の閲覧導線を補助するものです。リンクを設置する箇所は、訪問者が本当に必要とする場所に絞ることを意識しましょう。目安として、目次に並べる項目は5〜7個程度までにとどめると、すっきりとした見た目と使いやすさを両立できます。
→プロ級Webサイトが自分で作れるノーコードCMSのBiNDupを30日間無料体験
アンカーリンクが特に活きるページの種類
アンカーリンクはあらゆるページに設置できますが、特に効果を発揮しやすいページの種類があります。自社のホームページで該当するページがあれば、優先的に設置を検討してみましょう。
サービス紹介ページ・料金ページ
サービス紹介ページや料金ページは、機能・価格・導入事例・よくある質問など、多くの情報を1ページにまとめるケースが多いです。情報量が増えるほどページが縦に長くなるため、アンカーリンクによるナビゲーションが訪問者の利便性に直結します。
特に料金ページでは、訪問者が自分に合ったプランをすぐに確認できるよう、プランごとにアンカーリンクで直接ジャンプできる構成にしておくと、問い合わせや申し込みへの導線がスムーズになります。
FAQページ
FAQページは、アンカーリンクとの相性がもっともよいページのひとつです。質問の一覧をページ上部に並べ、各質問にアンカーリンクを設定しておくことで、訪問者が知りたい回答に一直線でたどり着ける構成を作れます。
質問数が増えてページが長くなるほど、アンカーリンクの効果は大きくなります。また、回答箇所から質問一覧に戻るリンクをあわせて設置すると、ページ内の回遊性がさらに高まります。
FAQの作り方について、下記の記事も併せてご覧ください。
採用ページ・会社概要ページ
採用ページや会社概要ページも、アンカーリンクが活きる場面が多いページです。採用ページでは、募集職種・仕事内容・待遇・応募方法など複数の情報を1ページにまとめることが多く、各セクションにアンカーリンクでジャンプできる構成にしておくと、求職者が必要な情報をすぐに確認できます。
会社概要ページでも、企業理念・事業内容・会社情報・アクセスといった情報が縦に並ぶ構成が一般的です。ページ上部にナビゲーションを設けることで、訪問者が目的の情報に迷わずたどり着けるページになります。
採用サイトの作り方について、下記の記事も併せてご覧ください。
まとめ：アンカーリンクはUXとSEOを同時に改善できる施策
アンカーリンクは、設置するだけで訪問者の使いやすさを大きく改善できるシンプルな施策です。目次やFAQへの活用、アンカーテキストの書き方を工夫することで、訪問者の離脱を防ぎながらGoogleからの評価も高められる効果が期待できます。
まずは自社のホームページの中で、縦に長くなっているページや情報量の多いページを見直すところから始めてみましょう。アンカーリンクを1ページに設置するだけでも、訪問者の体験は大きく変わります。
HTMLに慣れていない方や、コードを書かずに設置したい方には、ノーコードでホームページを作成・運用できるBiNDupがおすすめです。直感的な操作でアンカーリンクを設定できるため、ホームページ作成が初めてでも無理なく対応できます。
POINT
- アンカーリンクはページ内の特定箇所にジャンプできるリンクで、訪問者の利便性を高められる
- HTMLのid属性とhref属性を書くか、CMSやノーコードツールならコードを書かずに実装できる
- 訪問者の離脱防止や滞在時間の向上を通じてSEO評価に間接的に作用する