ホームページ制作会社との打ち合わせで、アンカーリンクという言葉を耳にしたことはないでしょうか。アンカーリンクは、ページ内の特定箇所へ訪問者を直接案内できる仕組みで、情報量が多いページほど欠かせない機能です。適切に設置すれば、訪問者が必要な情報にすぐたどり着けるようになり、成果にもつながります。
本記事では、アンカーリンクの意味や設定方法、メリット、設置時の注意点までを紹介します。
アンカーリンクとは
アンカーリンクとは、クリックすると指定した場所へ直接移動できるリンクのことです。
通常のリンクはページの先頭へ移動させますが、アンカーリンクはページの途中にある見出しやセクションなど、特定の箇所を到着地点に指定できるのが特徴です。
英語の「anchor（錨）」が語源で、到着地点を固定するという意味合いから名付けられています。
情報量の多いホームページやスマートフォンでの閲覧が増えている今、訪問者を目的の情報へ最短距離で案内するための基本的な仕組みとして、多くのホームページで活用されています。
アンカーリンクの機能
アンカーリンクには、大きく分けて2つの機能があります。それぞれの仕組みを理解しておくと、自社サイトのどこにアンカーリンクを設置すべきかが判断しやすくなります。
同じページ内の特定箇所へ移動させる
同じページの中で、ある場所から別の場所へ訪問者を直接移動させるのが、アンカーリンクの最も基本的な機能です。
代表的な例としては、記事の冒頭に目次を設置し、読みたい項目をクリックすると該当の見出しまで一気にスクロールさせるケースが挙げられます。コラムやFAQのように縦に長くなりがちなページでは、訪問者が何度もスクロールする手間を省けるため、ストレスのない閲覧体験を提供できます。
スマートフォンでの閲覧時は画面が小さく操作の負担が大きいため、アンカーリンクによるページ内移動が特に効果を発揮します。
別ページの特定箇所へ移動させる
アンカーリンクは同じページ内だけでなく、自社サイトの別ページや外部のホームページに対しても設定できます。
リンク先にid属性が設定されていれば、特定の箇所へ直接飛ばすことが可能です。例えば、ブログ記事からサービス紹介ページの料金セクションへ直接ジャンプさせるといった使い方ができます。
通常のリンクではページの先頭に移動するため、訪問者が目的の情報まで自分でスクロールしなければなりませんが、アンカーリンクを使えばその手間をなくせます。
アンカーリンクとページ内リンクの違い
アンカーリンクとページ内リンクは同じ意味で使われることが多いですが、厳密にはカバーする範囲が異なります。
ページ内リンクは、同じページの中で特定の箇所へ移動させるリンクに限定した呼び方です。一方、アンカーリンクはページ内の移動だけでなく、別ページの特定箇所へ直接飛ばすリンクも含みます。つまり、ページ内リンクはアンカーリンクの一部ということになります。
制作会社との打ち合わせでは、同じページ内の移動を指す場合はどちらの言葉を使っても伝わりますが、別ページの途中へ飛ばしたい時はアンカーリンクと伝えるほうが意図が正確に伝わります。
アンカーリンクを設置するメリット
アンカーリンクを設置する最大のメリットは、訪問者が必要な情報にすぐたどり着けるようになることです。
情報量が多いページでは、目的のコンテンツを探して何度もスクロールするうちに離脱されてしまうケースが少なくありません。アンカーリンクがあれば、訪問者は読みたい箇所へ直接移動できるため、ストレスなくページを閲覧できます。
ページの内容に納得した訪問者がすぐに問い合わせフォームや注文ボタンへたどり着ける状態を作っておけば、コンバージョン率の改善にもつながります。
また、目次にアンカーリンクを設置していると、検索結果にページ内の見出しがサイトリンクとして表示されることがあります。通常よりも表示面積が広がるため、クリック率の向上も期待できます。
アンカーリンクの設定方法
アンカーリンクは、到着地点に目印を付けて、リンク側からその目印を指定するという仕組みで成り立っています。この目印にあたるのがid属性です。ここでは、id属性の確認方法とHTMLとWordPressそれぞれの設定方法を紹介します。
リンク先のid属性を確認する
アンカーリンクを設定する前に、まずジャンプ先となるコンテンツにid属性が付いているかを確認します。
id属性とは、ページ内の特定の場所に付ける名前のようなもので、この名前を指定することでアンカーリンクの到着地点が決まります。
確認するには、ブラウザでページを開き右クリックから「ページのソースを表示」を選択します。表示されたHTMLの中で、飛ばしたい箇所の見出しやセクションに以下のような記述があれば、アンカーリンクの設定が可能です。
<h2 id="price">料金プラン</h2>この「price」の部分がid名にあたります。id属性が見当たらない場合、他社サイトであればアンカーリンクの設置は難しいですが、自社サイトであれば制作会社にid属性の追加を依頼しましょう。
HTMLでの記述方法
HTMLでアンカーリンクを設定する場合、ジャンプ先のURLにid属性を記述し、リンク側のaタグでhref属性に#とid名を指定します。
<a href="#price">料金プランを見る</a>別ページの特定箇所へ飛ばしたい場合は、URLの後ろに#とid名を続けます。
<a href="https://example.com/plan/#price">料金プランを見る</a>記述自体はシンプルですが、id名のスペルミスや#の付け忘れがあるとアンカーリンクが動作しません。設定後は必ずクリックして、意図した位置へ移動するか確認しましょう。
WordPressでの設定方法
WordPressのブロックエディタでは、HTMLを直接編集しなくてもアンカーリンクを設定できます。まず、ジャンプ先にしたい見出しブロックを選択し、右側の設定パネルにある「高度な設定」を開きます。その中の「HTMLアンカー」欄にid名を入力すれば、到着地点の設定は完了です。
次に、リンク元となるテキストを選択してリンクを挿入し、URL欄に「#id名」を入力します。同じページ内であればこれだけでアンカーリンクとして機能します。別ページの特定箇所へ飛ばす場合は、URL欄にページのURLと#id名を続けて入力します。
HTMLの知識がなくても設定できるため、自社でブログを更新している担当者でもすぐに取り入れられます。
アンカーリンクを設置する時の注意点
アンカーリンクは便利な機能ですが、設置した後の管理を怠ると訪問者の混乱を招く原因になります。長く安定した運用を続けるために、3つの注意点を押さえておきましょう。
id属性の記述ミスに注意する
アンカーリンクが動作しない原因で最も多いのが、id属性の記述ミスです。
id名のスペルが1文字でも違っていたり、リンク側の#を付け忘れていたりすると、クリックしても意図した場所へ移動しません。エラーが表示されるわけではなく、何も起きないかページの先頭に移動するだけなので、ミスに気付きにくいのが厄介な点です。
設定時にはジャンプ先のid名をコピーしてリンク側に貼り付けるようにすると、入力ミスを防げます。アンカーリンクを追加したら、公開前に必ずクリックして動作を確認する習慣をつけましょう。
外部サイトへのアンカーリンクはリンク切れに注意する
自社サイト内のアンカーリンクであれば、id属性を自分たちで管理できるため問題は起きにくいですが、外部サイトへのアンカーリンクには注意が必要です。
相手側がリニューアルやページ修正を行った際にid属性が変更・削除されると、アンカーリンクが正しく機能しなくなります。厄介なのは、ページ自体は存在しているためリンク切れチェックツールでは検知できず、クリックするとページの先頭に飛ばされるという分かりにくい不具合になる点です。
外部サイトへのアンカーリンクを設置した場合は、定期的に手動で動作を確認する運用を心がけましょう。
設置後はパソコンとスマホの両方で確認する
アンカーリンクは、パソコンでは正常に動作していても、スマートフォンでは表示がずれてしまうことがあります。
特に固定ヘッダーを採用しているホームページでは、ヘッダーの高さがパソコンとスマートフォンで異なるため、ジャンプ先の見出しがヘッダーの下に隠れてしまうケースも少なくありません。
自社サイトであれば、制作会社にずれの調整を依頼すれば解消できます。ただし、外部サイトへのアンカーリンクで同様の現象が起きても、相手側のホームページを修正することはできないため対処は不可能です。
アンカーリンクの設置後は必ず実機を使い、パソコンとスマートフォンの両方で意図した場所に正しく移動するかを確認してください。
まとめ
アンカーリンクは、ページ内の特定箇所へ訪問者を直接案内できるリンクです。
同じページ内だけでなく、別ページの特定箇所へ移動させる機能も持っており、似た意味で使われるページ内リンクとはカバーする範囲が異なります。
設定にはid属性の理解が必要ですが、WordPressのブロックエディタを使えばHTMLの知識がなくても導入できます。設置後はid属性の記述ミスや外部サイトへのリンク切れ、パソコンとスマートフォンでの表示ずれに注意が必要です。
自社のページで情報量が多く読みづらいと感じる箇所があれば、アンカーリンクの導入を検討してみてください。
