アンカーリンクとは？設置効果や用途別の付け方を解説

Webサイト運用やSEOの業務で使用する機会があるアンカーリンク。

本記事ではアンカーリンクとは何か、設置による期待効果や用途別のアンカーリンクの付け方を詳しく解説します。

＞＞解説付き！基礎SEO対策チェックリストをダウンロードする

アンカーリンクとは

アンカーリンクとは、Webページ内に設置されたリンクのこと。アンカーリンクをクリックすると別のページや同じページ内の特定の位置に移動します。

 

アンカーリンクは大別すると以下の２種類があります。

1. 同一ページ内で特定箇所へ移動するアンカーリンク
2. 別ページへ移動するアンカーリンク

１．同一ページ内で特定箇所へ移動するアンカーリンク

１つ目は同一ページ内で特定箇所へ移動するアンカーリンク。

ページ内の見出しやセクションにアンカーを設定し、そのアンカーにリンクするように設置します。例えば、本記事の冒頭にある目次の各見出しは、それぞれの見出しの位置にアンカーリンクを設定しています。

このように、同一ページ内で特定箇所へ移動するアンカーリンクを使うと、ユーザーは興味のあるコンテンツの位置へすぐに移動できるようになります。

２．別ページへ移動するアンカーリンク

２つ目は別ページへ移動するアンカーリンク。

リンク先のURLを指定し、リンクを設置します。例えば、「アンカーテキストとは？SEO効果と最適な作り方を解説」は、アンカーリンクを設置する際に重要なアンカーテキストについて解説した別ページのURLをアンカーリンクに設定しています。

このように、別ページへ移動するアンカーリンクを使うと、ユーザーが関連する情報に簡単にアクセスできるようになります。

適切なアンカーリンク設置による期待効果

アンカーリンクを適切に設置することで、ユーザー体験の向上やリンク構造の強化につながり、これらはSEO対策において有効な施策です。

ユーザー体験の向上

アンカーリンクが適切に設置されているとユーザーはページ内の情報を効率的に探すことができます。

また、別ページへのアンカーリンクが適切に設置されていると、ユーザーは関連する情報を発見する機会が増え、情報を確認したい際はスムーズに移動できます。

これにより、ユーザーは快適にWebサイトを閲覧でき、Webサイトの滞在時間やエンゲージメント率の向上が期待できます。

リンク構造の強化

重要なSEO対策の一つがリンク最適化。

適切にアンカーリンクを使うと、検索エンジンはページ内の情報構造や関連性を理解しやすくなります。また、アンカーリンクを適切に設定することで、リンク先のページにおける重要なキーワードを検索エンジンへ伝えられます。

これにより、検索エンジンがページを正確に理解し、適正な評価を得られることで、検索結果の表示順位向上が期待できます。

主なアンカーリンクの設定方法

アンカーリンクはHTML内で設定します。ここからは主なアンカーリンクの設定方法をを見ていきましょう。

id属性：ページ内の特定の位置にアンカーを設定する方法

id属性はHTMLの要素に一意の識別子を付ける際に使い、id属性を付けることでページ内の特定の位置にアンカーを設定できます。

例えば、以下のようにHTMLへ記述すると「アンカーリンクとは」の見出しに「anchor1」というidを付けられます。

 

このようにアンカーリンク用のidを設定した箇所へリンクを設定するには、href属性に「#」とアンカーのidを指定します。

例えば、以下のように書くと「アンカーリンクとは」の見出しにリンクできます。

href属性：リンク先のURLを指定する方法

href属性はリンク先のURLを指定するために使い、別ページへのアンカーリンクを設定できます。

例えば、以下のように記述すると「アンカーテキストとは？」のページにリンクできます。

 

また、href属性に別ページ内の特定の位置にアンカーを設定した場合に、そのアンカーにリンクすることもできます。

例えば、以下のように記述するとリンク先ページ内の見出し「アンカーテキストとは」の位置にリンクを設定できます。

target属性：リンク先を別のタブで開く設定方法

target属性はリンク先ページの開き方を指定するために使います。

target属性に「_self」を指定するとリンク先を同じタブで開き、「_blank」を指定するとリンク先を別のタブで開ます。但し、target属性を指定しない場合も「_self」と同じ動きとなるため、「_self」はあまり使用されません。

 

例えば、以下のように記述すると「アンカーテキストとは？」のページを別のタブで開くことができます。

rel属性：リンク先との関係性を明示する方法

rel属性はリンク先との関係性を明示するために使います。rel属性には様々な値を指定することができますが、ここではSEO対策に関係する「nofollow」と「noopener」の２つを紹介します。

rel="nofollow"

「nofollow」は検索エンジンに対してリンク先のページへクロールせず、リンク元ページとの関係が無いことを伝える記述です。これによってリンク先ページに対する検索エンジンの評価が、リンク元ページに影響しないよう制御します。

例えば、以下のように記述すると「アンカーテキストとは？」のページへのリンクが検索エンジンの評価に影響しないよう制御できます。

rel="noopener"

「noopener」はリンク先のページがリンク元のページを操作できないように設定する記述です。これはセキュリティ対策として効果があり、特に「target="_blank"」指定で新しいタブで開く際に推奨されている設定。

WebサイトをWordPressで運用している場合、現在のバージョンでは「target="_blank"」を設定すると自動的に「rel="noopener"」が付与される仕様になっています。

 

例えば、以下のように書くと「アンカーテキストとは？」のページがリンク元のページ内容や挙動に干渉できないよう対策できます。

効果的なアンカーリンクの付け方

アンカーリンクを設定するだけではユーザーにとって有用なリンクになるとは限りません。効果的なアンカーテキストの付け方になるように、以下のポイントに注意して設置しましょう。

適切なアンカーテキストを使用する

アンカーテキストとはリンク設置箇所に掲載するテキストのこと。

アンカーテキストはリンク先の内容をユーザーが事前に想定する重要な情報。アンカーテキストを適切に設定することで、ユーザーはリンクをクリックするかどうかを判断しやすくなります。

 

適切なアンカーテキストを設定するには、以下のポイントに注意しましょう。

• 「こちら」や「詳細はこちら」などの曖昧な表現は避ける
• リンク先のキーワードを含める
• 「PDFダウンロード」や「動画視聴」など、リンク先のフォーマットを明示する

ユーザーにリンク設置が伝わるデザインに設定する

アンカーテキストだけではなく、リンクのデザインもユーザーにとって重要な要素。リンクのデザインは、ユーザーにリンクが設置されていると伝わるようにする必要があります。

リンクのデザインをユーザーに伝えるには以下のポイントに注意しましょう。

• リンクの色や下線によって通常テキストと見分けが付くデザインにする
• マウスオーバー時に色や下線が変化するなど、リンクのホバー効果を設定する
• アイコンを追加して、リンクであることを明示する

アンカーリンクがずれる時の対処法

アンカーリンクを設定したにもかかわらず、リンク先がずれてしまうことがあります。これはページのレイアウトやスタイルによってアンカーの位置が変わってしまうことが原因。

アンカーリンクがずれる時の対処法としては以下の方法があります。

• アンカーを設定した要素の上に余白を設けて、アンカーの位置を調整する
• JavaScriptを使ってスムーズスクロールを実装する
• CSSのscroll-marginプロパティを使う

アンカーリンクに関するよくある質問

ここではアンカーリンクに関するよくある質問と回答をご紹介します。

ハイパーリンクとアンカーリンクの違いは？

ハイパーリンクにはWebページ内のリンクの他、メールやPDFファイルなどWebページ以外で使用するリンクも含まれます。一方で、アンカーリンクはWebページ内に設置されたリンクのことです。

アンカーリンクは別名で何と呼ばれますか？

アンカーリンクの別名として「ページ内リンク」や「記事内リンク」と呼ばれることがあります。

しかし、ページ内リンクは同じページ内の特定の場所に移動するリンク、記事内リンクは同じサイト内の別の記事に移動するリンクで、アンカーリンクはこれらの両方が該当するため厳密に全く同じ用語ではありません。

アンカーリンクのまとめ

本記事ではアンカーリンクとは何か、設置効果や用途別の付け方を解説しました。

アンカーリンク設置のような内部SEO対策は基本からしっかりと抑えることが重要です。「基礎SEO対策チェックリスト」も参考に着実に対応していきましょう。