「アンカーリンクを付けておいてください」。制作会社やCMSのマニュアルでこう書かれていると、クリックする文字やボタンの側に何か特別な設定をするものと考えがちです。名前に「リンク」と付いているので、リンクを作る画面で完結する作業に見えるからです。
しかし、記事の制作とリライトで目次や見出しへのリンクを日々扱ってきた弊社の立場から言えるのは、アンカーリンクは飛び先に付けた「id」で動くということです。リンクが飛ばない・位置がずれるといった不具合も、リンクではなく飛び先の側で起きている場合がほとんどだと見ています。
本記事では、アンカーリンクの意味と仕組みから、HTMLとWordPressでの付け方、ずれる・飛ばないときの直し方まで、記事を作り直す現場の視点で順を追ってお伝えします。
- アンカーリンクは、URLの「#」の後ろに飛び先の名前（id）を書き、ページの決めた位置へ移動させるリンク
- 付け方は、飛び先の要素にidを付け、リンクのhrefに「#」とidを書くだけ
- 固定ヘッダーに見出しが隠れるときはCSSのscroll-margin-topで止まる位置を下げ、飛ばないときはidの綴り・重複・全角文字を確かめる
- 見出しの文字からidを自動で作るCMSでは、見出しを書き直すと、他のページやSNSから貼られたリンクがエラーを出さずに切れる
アンカーリンクの意味とページ内リンクとの違い
アンカーリンクとは、クリックすると同じページや別のページの決めた位置へ移動するリンクです。長い記事の目次から見出しへ飛ぶリンクや、ページ下部にある「ページ上部へ戻る」ボタンが、アンカーリンクにあたります。
「アンカー」は、HTMLでリンクを作るa要素の名前（anchor＝錨）から来ています。HTMLの解説では、ほかのページへのリンクも含めてa要素のリンク全般をアンカーと呼ぶことがあります。一方、日本のWeb制作の現場で「アンカーリンク」と言えば、位置を指定して飛ぶリンクを指すのが普通です。
呼び方 | 指す範囲 | 例 |
|---|---|---|
ハイパーリンク | ページや位置へ移動するリンク全般 | 別のサイトの記事へのリンク |
アンカーリンク | 決めた位置へ移動するリンク（別ページの位置も含む） | 目次から見出しへ、別ページの料金表へ |
ページ内リンク | 同じページの中の位置へ移動するリンク | 目次から見出しへ、ページ上部へ戻る |
アンカーリンクが位置を指定できる仕組み
アンカーリンクが決めた位置へ移動できるのは、URLの末尾の「#」から後ろに、ページの中の要素の名前を書けるからです。ブラウザはページを開いた後、「#」の後ろと同じidを持つ要素を探し、その要素が画面の上端に来るまでスクロールします。
たとえば「https://example.com/service/#price」というURLを開くと、ブラウザは/service/のページを表示し、idが「price」の見出しまで移動します。同じページの中で移動するリンクなら、「#price」とだけ書けば足ります。
URLの「#」から後ろの部分はフラグメントと呼ばれ、ブラウザの中だけで使われ、サーバーには送られません。サーバーは「#」の有無にかかわらず同じページを返すので、idが見つからなくてもエラーは出ず、404のページも表示されずにページの先頭が開くだけです。
アンカーリンクの付け方と書き方の例
アンカーリンクは、飛び先の要素にidを付け、リンクのhrefに「#」とそのidを書く2つの作業で付けられます。公開した後に、実際に移動するかを確かめて完成です。
移動させたい見出しや段落のタグに、id="price"のように名前を付けます。idは英字で始め、半角英数字とハイフンで付けます。WordPressのように、idを英字で始めるよう決めているCMSがあるためです。
同じページの中からはhref="#price"、別のページからはhref="/service/#price"のように、ページの場所の後ろに「#」とidを続けます。
リンクをクリックして、飛び先が画面の上に来るかを確かめます。ブラウザのアドレスバーでURLの末尾に「#price」を付けて開いても、同じ確認ができます。
<h2 id="price">料金</h2>
<a href="#price">料金を見る</a>
<a href="/service/#price">サービスの料金を見る</a>idは1ページの中で重複させず、空白を入れずに付けます。大文字と小文字は別の文字として扱われるため、「Price」と「price」は違うidです。日本語のidも動きますが、URLとしてコピーすると「%E6%96%99」のような長い文字列に変わり、メールや資料に貼りにくくなります。
WordPressで付ける場合
WordPressのブロックエディタでは、見出しブロックを選び、右側のブロック設定で「高度な設定」を開き、「HTML アンカー」の欄にidを入力します。続けて、リンクにしたい文字を選んでリンクの欄に「#」とそのidを入れれば完成です。WordPressの公式の説明では、HTMLアンカーは英字で始め、空白を含めないよう定められています。
アンカーリンクが役立つ場面
アンカーリンクが役立つのは、1ページが長く、読者が読みたい部分だけを探しに来るページです。
- 長い記事の目次から、各見出しへ移動させる
- よくある質問の一覧から、各回答へ移動させる
- LPの上部のメニューから、料金や申し込みフォームへ移動させる
- ページの下部から、先頭へ戻らせる
- 他の記事やメール、SNSから、ページの特定の見出しへ直接案内する
アンカーリンクはSEOに効くのか
アンカーリンクを置くこと自体で検索順位が上がるとは、Googleは説明していません。Googleの検索に関する公式の説明では、Google検索は通常URLのフラグメントをサポートしていないとしており、「#」付きのURLが元のページと別のページとして評価されることもありません。
SEOの面でアンカーリンクに期待できるのは、長い記事で読者が答えの節へすぐ移れることです。読者が目当ての答えを見つけられないまま検索結果へ戻るのを減らせると見ています。リンクとして表示する文字は、Googleが勧めるとおり「こちら」ではなく「料金の一覧」のように、飛び先の中身が分かる言葉にします。
経営者目次にアンカーリンクを付けると、SEOの評価が上がると聞きました。付けないと検索で不利になるのでしょうか。
Writers-hub編集部
付けないこと自体で不利になるとは、Googleは説明していません。ただ、長い記事で目次から答えの節へすぐ移れないと、読者は答えにたどり着く前に読むのをやめることがあります。付ける理由は評価よりも、読者が答えまで早く着けることにあります。
アンカーリンクがずれるときと飛ばないときの直し方
アンカーリンクがずれる・飛ばない原因は、リンクの書き方よりも、飛び先の要素やページのデザインの側にあることが大半です。
固定ヘッダーに見出しが隠れるとき
ブラウザは飛び先の要素を画面の上端に合わせるため、画面の上部にヘッダーを固定しているサイトでは、見出しがヘッダーの下に隠れます。CSSで飛び先の要素にscroll-margin-topを指定すると、指定した高さの分だけ下で止まるようになります。
h2, h3 {
scroll-margin-top: 80px;
}値には、固定ヘッダーの高さに少し余白を足した数字を入れます。スマホとPCでヘッダーの高さが違うサイトでは、メディアクエリで画面の幅ごとに値を分けます。
MDNの説明では、scroll-margin-topは2021年4月以降、すべての主要なブラウザで使えるとされています。
クリックしても移動しないとき
クリックしても移動しない、またはページの先頭が開くだけのときは、ブラウザが「#」の後ろと同じidを見つけられていません。次のどれかに当たっていないかを、見出しを右クリックして「検証」を選び、表示されたHTMLのidと見比べて確かめます。
- hrefとidの綴りが1文字でも違う（大文字と小文字の違いも含む）
- 同じidが1ページに2つ以上あり、先にある方へ移動している
- 「#」やidが全角文字で入力されている
- idに空白が入っている
- 飛び先が、開くまで表示されない折りたたみの中や、スクロールした後に読み込まれる部分にある
見出しを書き直すとアンカーリンクが切れる理由
見出しの文字からidを自動で作るCMSや目次のプラグインでは、見出しを書き直すとidも変わり、古いidを指していたアンカーリンクが切れます。ページの中の目次はCMSが作り直すので切れませんが、他のページから貼られたリンクは古いidのまま残ります。
とりわけ見落とされがちなのが、切れたアンカーリンクはエラーを出さない点です。ページが開くかどうかだけを確かめる点検では、飛び先のidが消えたことは分かりません。
影響を受けるのは、他の記事の本文から「#」付きで張ったリンク、メールマガジンやSNSで配ったURL、営業資料に載せたURLです。読者はそのリンクを開いても目当ての見出しに着かず、先頭から探し直すことになります。
他のページから「#」付きでリンクされる見出しには、price、faq、flowのように、見出しの文字と関係のない英字のidを手で付けておきます。手で付けたidは、見出しの文字を書き直しても変わりません。見出しを削るときや2つの記事をまとめるときは、サイト内を「#旧id」で検索し、リンクしている記事を直してから公開します。
手で付けたidは、記事の管理表に見出しと並べて残しておきます。別の担当者が見出しを直すときも、そのidが外からリンクされているかを管理表で確かめられます。
記事を書き直すたびに、他の記事から張ったリンクまで確かめられていますか
見出しの書き換えや記事の統合で切れるのは、アンカーリンクだけではありません。リライトする記事の選定から、見出しとidの設計、サイト内のリンクの張り直しまで、記事の制作体制ごとお手伝いします。
アンカーリンクのよくある質問
アンカーテキストは、リンクとして画面に表示され、クリックされる文字のことです。アンカーリンクは位置を指定して移動する仕組みのことで、アンカーテキストはどのリンクにもあります。
使わない方が安全です。以前は飛び先をa要素のname属性で指定する書き方がありましたが、現在のHTMLの仕様では廃止されており、飛び先の指定にはidを使います。
スマホのブラウザでも、PCと同じ仕組みで動きます。スマホの表示でだけヘッダーを固定しているサイトでは、スマホでだけ見出しが隠れるため、scroll-margin-topの値をスマホの画面幅にも指定します。
CSSでhtml要素にscroll-behavior: smoothを指定すると、アンカーリンクで移動するときに一瞬で飛ばず、滑らかにスクロールします。
まとめ｜アンカーリンクは飛び先のidで動く
アンカーリンクは、URLの「#」の後ろに書いたidと同じidを持つ要素へ、ブラウザが画面を移動させる仕組みです。付けるときは飛び先の要素にidを付けてhrefに「#」とidを書き、ずれるときはscroll-margin-top、飛ばないときはidの綴りと重複を確かめます。
見出しの書き直しでidが変わると、外から貼られたリンクはエラーを出さずに切れます。他のページからリンクされる見出しには、英字のidを手で付けておきましょう。
私たち合同会社Writers-hubは、SEO記事の制作とリライトを通じて、見出しの設計からサイト内のリンクの管理まで、記事が読者に届き続ける仕組みづくりを支援しています。
目次や見出しのリンクまで含めて、記事の作り方を見直したいと考えていませんか
記事の見出しの立て方や目次の置き方、書き直しても切れないリンクの付け方は、サイトの作りや使っているCMSで変わります。今の記事とサイトを拝見しながら、最初に直す記事とリンクを一緒に決めます。
