アンカーリンク：HTMLとCMSでページ内リンクを作る方法と、SEOへの効果

アンカーリンクは、ページ内リンクやジャンプリンクとも呼ばれ、HTMLの最も古い機能の1つであり、長いコンテンツで特に役立つ機能です。読者はスクロールせずに、探している答えへ直接移動できます。Googleはリンクをページ同士の関係を示す中心的なシグナルとして扱っており、リンクに関するベストプラクティスでは、リンクは href を持つ本物の a 要素である必要があると強調しています。本ガイドでは、HTMLと主要なCMSでのアンカーリンクの作り方、SEOとAIの回答への効果、アンカーテキストとの関係を解説します。

アンカーリンクとは？

アンカーリンクは、リンク先がページ内の特定の位置であるハイパーリンクです。URLはハッシュ記号と識別子で終わり、この識別子をフラグメントと呼びます。例：example.com/guide#step-3。クリックすると、ブラウザはページを読み込み（または同じページのまま）、id が step-3 の要素までスクロールします。

よくある用途は3つです。

• 同じページ内のナビゲーション：記事冒頭の目次や「ページの先頭へ」リンク。
• 別ページからのディープリンク：ある記事から別の記事の特定セクション、たとえば用語集の定義へリンクする。
• 特定の段落の共有：同僚を質問に答える段落へ直接案内する。

検索エンジンは example.com/guide と example.com/guide#step-3 を同じページとして扱います。フラグメントがインデックス対象の新しいURLを作ることはないため、アンカーリンクが重複コンテンツの原因になることはありません。

HTMLでアンカーリンクを作るには？

必要なコードは2つだけです。移動先の id と、それを指すリンクです。

1. 移動先に id を付ける：<h2 id="pricing">料金</h2>。半角の小文字英字、数字、ハイフンを使い、スペースは入れず、ページ内で id が重複しないようにします。
2. 同じページ内でリンクする：<a href="#pricing">料金を見る</a>。
3. 別のページからリンクする：<a href="/guide#pricing">ガイドの料金セクション</a>。
4. テストする：リンクをクリックし、見出しが画面上部に表示され、固定ヘッダーの下に隠れていないか確認します（CSSの scroll-margin-top で解決できます）。

古い方法の <a name="pricing"></a> はブラウザでまだ動きますが、HTML5では廃止されています。id は見出し自体に付けましょう。関連する機能のテキストフラグメントを使うと、id がなくても #:~:text= という構文で特定の文をハイライトできます。詳しくは MDN のドキュメントを参照してください。Googleは、一部の強調スニペットで引用した箇所へ訪問者をスクロールさせる際に、この仕組みを使っています。

WordPress、Shopify、Webflow、Wixでアンカーリンクを追加するには？

主要なCMSはどれも、テンプレートを触らずに id を設定できます。違うのは項目の名前だけです。

CMSが id を自動生成する場合は確認しましょう。見出しの全文を使うものもあり、長く不安定なフラグメントになって、タイトルを編集すると壊れてしまいます。

アンカーリンクはSEOに役立つ？

アンカーリンクはまず使いやすさのための機能です。SEOへの価値は間接的ですが、長いコンテンツでは確かにあります。

• 検索結果の「移動」リンク：長く構成の整ったページでは、Googleが検索結果の下にセクションへのリンクを表示することがあり、露出とクリックが増える可能性があります。表示するかどうかはGoogleが決めます。
• 該当箇所の特定がしやすくなる：id 付きの明確な見出しは、検索エンジンやAIアシスタントが長いページの中から正確な答えを見つける助けになります。強調スニペットを獲得するのと同じ考え方です。
• エンゲージメント：目次があれば、読者はほかのサイトへ探しに行かず、必要な部分へたどり着けます。
• アクセシビリティ：スキップリンクやページ内ナビゲーションは、キーボードやスクリーンリーダーの利用者を助けます。W3Cのアクセシビリティガイドラインにある原則です。
• 精度の高い内部リンク：別の記事の #definition を指せば、読者を正確な箇所へ案内でき、内部リンクの強化につながります。

アンカーリンクにできないこともあります。page#section へのリンクはページへのリンクとして数えられるため、追加の評価を渡すことはなく、良いコンテンツの代わりにもなりません。GoogleのJavaScript SEOの基本からは、技術的な注意点が直接示されています。Googlebotはそうした URL を確実に解決できないため、フラグメントを使って別のコンテンツを読み込まないでください。フラグメントは、すでにページにあるコンテンツ内のスクロールだけに使いましょう。

アンカーリンクとアンカーテキストの違いは？

2つの用語は近く、よく混同されます。アンカーリンクはリンクの行き先（セクション）に関するものです。アンカーテキストはリンクが何と書かれているか（クリックできる文字）に関するものです。後者は用語集のアンカーテキストで詳しく解説しています。

アンカーリンクとそのテキストのベストプラクティスは？

すべてのアンカーリンクにはアンカーテキストもあるため、両方のルールを一緒に適用します。

• 短く読みやすい id：#section-1 や12語もあるフラグメントではなく、#pricing、#install など。
• 説明的なリンクテキスト：Googleは説明的で適度に簡潔、かつ関連性のあるテキストを推奨し、「ここをクリック」のような一般的な表現は避けるよう勧めています。
• 長いページには目次を：およそ1500語を超えるなら、冒頭にH2セクションを並べ、それぞれを id にリンクします。
• 質問形式の見出し：ユーザーの実際の質問のように書いた見出しは、セクションリンクをより便利で引用されやすくします。
• 変わらない id：ほかのページやサイトからリンクされている id は、公開後に変更しないでください。
• 構成を確認する：見出し構造の分析ツールで、アンカーを追加する前にH2とH3の階層が整っているか確認できます。

避けるべき失敗は？

• 重複した id：同じ id の要素が2つあると、リンクは最初の要素にしか移動しません。
• 隠れた移動先：閉じたタブやアコーディオンの中の見出しには、リンクが届かないことがあります。
• 固定ヘッダーが見出しを隠す：CSSで scroll-margin-top を追加します。
• フラグメントによるルーティング：#/page のような URL で内容を切り替えるシングルページアプリは、Googleがクロールしにくくなります。
• 過剰最適化されたアンカーテキスト：すべてのリンクで同じ完全一致キーワードを繰り返すと、操作的に見えます。

まとめ

アンカーリンクは、#id フラグメントで読者をページ内の特定のセクションへ移動させます。見出しに id を付けてリンクするだけで、HTMLでもCMSの設定でも作れます。SEOへの効果は間接的ですが、長いコンテンツでは具体的です。目次、Googleでのセクションリンクの可能性、AIの回答にとってわかりやすい該当箇所、より正確な内部リンクが得られます。ただし、アンカーテキストは説明的に保つ必要があります。記事ごとに手作業で構成を整えたくない場合は、autopilot で動く当社のSEO・GEOソフトウェアSorankが、質問形式の見出しと内部リンクを備えた構成の整った記事を作成し、お使いのCMSに公開します。AIブログ記事ジェネレーターをご覧いただき、3日間の無料トライアルでお試しください。