アンカーリンク(aタグ)とは? アンカーリンク(aタグ)の使い方とSEOとの関係
アンカーリンク(aタグ)とは、サイト上のリンクを記述するために使用されるHTMLタグのことで、効果的に使うことでSEO対策にもつながります。この記事では、アンカーリンク(aタグ)の基礎知識から適切な使い方、SEO対策を行う際のポイントなどについてわかりやすく解説いたします。

アンカーリンク(aタグ)とは
アンカーリンク(aタグ)とは、Webページ内から他のページや特定の箇所に移動するために記述されるHTMLタグで、サイト内の回遊率を上げたり、ユーザーが必要な情報を得やすくするために使用されます。
アンカーリンク(aタグ)の使い方ひとつで、記事の質が高まったり、SEO効果もアップしたりするので、適切な使い方を理解し、使いこなすようにしましょう。それでは、さっそくアンカーリンク(aタグ)の使い方についてご説明します。
>「Semrush」サイト診断・順位計測・キーワード調査などSEO対策にフル活用!
アンカーリンク(aタグ)の使い方
アンカーリンク(aタグ)の使い方には、大きく次の2つがあります。
● ページ外のリンク先を指定する
● ページ内特定の箇所へアンカーポイントを指定する(a id属性)
以下に、一つひとつ詳しくご説明します。
ページ外のリンク先を指定する(a href属性)
アンカーリンク(aタグ)のhref属性を使って、特定のページにリンクすることができます。アンカーリンク(aタグ)の中でも、最もポピュラーな使い方で、一般的には次のように記述されます。
<a href="https://example.com">テキスト</a>
ページ内特定の箇所へアンカーポイントを指定する
aタグは、同じページ内の特定の場所に移動させる際にも使用します。
同ページ内へのリンクを「アンカーリンク(ページ内リンクとも言います。)」と言います。
わかりやすい例で説明すると、ブログ記事やWebコンテンツの「目次」などがこれに当たります。目次では、各見出しをクリックすると、その見出し部分に直接移動(ジャンプ)することができます。
a id属性
アンカーリンク(aタグ)のid属性を使って、同一ページ内の特定の場所(アンカーポイント)を指定して、移動(ジャンプ)することができます。一般的には、次のように記述します。
<div id="anchor">リンク先(移動したい特定の場所)</div>
各見出しのHTML記述
<h2 id="midasi1">見出し1</h2>
<h2 id="midasi2">見出し2</h2>
<h2 id="midasi3">見出し3</h2>
ここで「anchor」の部分をid名と呼びます。このid名の前に「#(ハッシュ)」をつけることで、次のように指定したアンカーポイントに移動(ジャンプ)することができます。
a href属性
<a href=></a>で表現する際は、先ほどid名の前に「#(ハッシュ)」をつけることで、ページ内の指定したアンカーポイントに移動(ジャンプ)することができます。
<a href="#anchor">テキスト</a>
目次のHTML記述
<a href="#midasi1">見出し1</a>
<a href="#midasi2">見出し2</a>
<a href="#midasi3">見出し3</a>
アンカーリンク(aタグ)設定のポイント
アンカーリンク(aタグ)でスクロールさせる方法
アンカーリンク(aタグ)では、指定の場所に飛ぶように移動するため、これを「ジャンプする」と呼びます。しかし、サイトによっては、ジャンプではなくなめらかなスクロールによって移動させたい場合もあることでしょう。
そこで、ここでは、id属性で指定した場所(アンカーポイント)にスクロールして移動させる方法についてご紹介します。
方法は、CSSに次のコードを記述するだけです。
html { scroll-behavior: smooth;}
「scroll-behavior」とは、リンク先への移動(スクロール)の挙動を決める属性(プロパティ)で、「smooth」と指定すると、なめらかにリンク先へスクロールさせることができます。サイト上でなめらかにスクロールすることを「スムーススクロール」とも呼びます。
このコード1行だけで簡単にスムーススクロールが実装できますので、ぜひ試してみてください。
アンカーリンク(aタグ)がずれる原因と解決法
アンカーリンク(aタグ)でスクロールさせる方法を実装した際に、移動する位置がずれてしまう場合があります。その主な原因として挙げられるのが、ヘッダーなどを「position:fixed;」で固定していることです。
解決法としては、CSSでリンクの位置を調整する方法があります。例えば、固定ヘッダーの高さ(縦幅)が100pxの場合、次のようなコードをCSSに記述して調整します。
#id-name{
padding-top:100px;
margin-top:-100px;
}
(「id-name」はアンカーポイントに指定したid名を指します)
固定ヘッダーの高さ(縦幅)に合わせて数値を調整すると、ちょうどよい位置にスクロールさせることができます。
>「Semrush」競合調査・キーワード調査・効果検証までSEO改善がこれ一つで!
<応用>リンク先を別ページ・別ウィンドウで開く (target属性の利用)
アンカーリンク(aタグ)を使用して<a href="https://example.com">とページ外にリンクを飛ばす場合、さらにtarget属性を用いることで、リンク先の開き方を別ページや別ウィンドウなど指定することができます。一般的には、次のように記述します。
<a href="https://example.com" target="_blank">テキスト</a>
外部リンク(外部のサイトやコンテンツへのリンク)を同一のページまたはウィンドウで開くと、ユーザーを他サイトへ離脱させてしまうことにつながります。外部リンクの場合は、target属性を活用するとよいでしょう。
アンカーリンク(aタグ)でよく使う属性の種類
アンカーリンク(aタグ)でよく使われる属性には、次のような種類があります。
属性 | 使い方 |
href属性 | ページ外リンク先を指定する |
id属性 | ページ内アンカーポイントを指定する |
target属性 | 別ページ・別ウィンドウでリンク先を開く |
rel属性 | リンク先のページとの関係性を伝える |
ここで、これまで解説していないrel属性についてご説明します。rel属性とは、リンク先のページとの関係性を検索エンジンに伝えるもので、SEO対策の一環として使われたりします。
主なrel属性には、次のような種類があります。
①external:検索エンジンに外部リンクであることを伝えるrel属性
<a href="https://example.com" rel="external">テキスト</a>
②nofollow:検索エンジンにリンク先をクロール(巡回)しないように伝えるrel属性
<a href="https://example.com" rel="nofollow">テキスト</a>
③noreferrer:リンク先にリファラ(リンク元の情報)を送らないようにするrel属性
<a href="https://example.com" rel="noreferrer">テキスト</a>
特に、最も多く使われるrel属性が「nofollow」で、リンク元とリンク先のページを関連付けさせたくない場合や、リンク先を検索エンジンにクロール(巡回)させたくない場合などによく利用されます。
アンカーリンク(aタグ)とSEOとの関係
アンカーリンク(aタグ)は、サイトの内部構造を最適化するための「内部SEO対策」のひとつとして重要な要素とされています。ユーザーにとってわかりやすく、検索エンジンにとっても巡回しやすい内部構造にすることは、SEO対策にも効果的だからです。次に紹介するアンカーリンク(aタグ)のSEO対策のポイントをよく理解して、コンテンツ制作に活用しましょう。
関連リンク:内部リンクとは?SEO効果を最大化する貼り方と戦略を解説
アンカーリンク(aタグ)でSEO対策するときのポイント
アンカーリンク(aタグ)をSEO対策に効果的に活用するポイントとして、次の4つが挙げられます。
● アンカーテキストにリンク先のSEOキーワードを含める
● リンク先内容が簡潔でわかりやすいようにする
● 読者に興味・関心を持ってもらえるアンカーテキストにする
● 読者に必要なリンクのみを設置する
以下に、一つひとつ詳しくご説明します。
アンカーテキストにリンク先のSEOキーワードを含める
検索エンジンはアンカーリンク(aタグ)で表示させたテキスト(アンカーテキスト)から、リンク先のページにあるコンテンツの内容を認識してクロール(巡回)します。ここでアンカーリンク(aタグ)にリンク先のコンテンツで重要なSEOキーワードを含めておくと、そのキーワードでリンク先のコンテンツが評価されやすくなります。
例えば、次の2つのアンカーテキストでは、後者の方がSEO的に評価されやすいです。
● おすすめのコンテンツはこちら
● SEO対策に役立つコンテンツはこちら
どちらも同じリンク先だったとしても、後者の方が「SEO対策」というキーワードが含まれているため、検索エンジンにもSEO対策の記事として認識されやすく、「SEO対策」というキーワードでのSEO効果がアップします。
リンク先内容が簡潔でわかりやすいようにする
アンカーテキストはSEOキーワードを含めるだけでなく、簡潔でわかりやすいテキストにすることが大切です。なぜなら、簡潔でわかりやすいテキストは、ユーザーの理解を助け、サイト全体の使いやすさ(ユーザビリティ)を高めることにもつながるからです。
例えば、次の2つのアンカーテキストを見比べてみましょう。
● SEO対策
● SEO対策に役立つコンテンツはこちら
前者の方は「SEO対策」というキーワードは入っていますが、何のリンクなのかよくわかりません。それに対して、後者は「SEO対策に役立つコンテンツ」へのリンクだということが一目でわかるため、簡潔でわかりやすいテキストだと言えます。
ユーザビリティが高まると、読者のサイト回遊率や滞在時間も増加し、検索エンジンからも質の高い記事だと評価されやすくなります。
読者に興味・関心を持ってもらえるアンカーテキストにする
アンカーリンク(aタグ)は、クリックされなければ意味がありません。アンカーリンク(aタグ)を設置するなら、読者に興味・関心を持ってもらえるような工夫も必要です。しかし、虚偽や誇張する表現は不正行為と見なされるので要注意です。あくまでも、簡潔でわかりやすいテキストを心がけましょう。
例えば、次の2つのアンカーテキストでは、後者の方が適切だと言えます。
● SEO対策で絶対1位を取れる方法はこちら(※絶対という表現が誇張)
● SEO対策のポイントを知りたい方はこちら
読者に必要なリンクのみを設置する
アンカーリンク(aタグ)はむやみやたらに設置すればよいわけではありません。多すぎても少なすぎても不適切です。ではどれぐらい設置しておくとよいのでしょうか。
答えは「必要な分だけ」です。
読者が「なぜ?」「もっと詳しく知りたい」と思いやすい箇所には、読者の疑問やニーズに答える関連コンテンツへのアンカーリンク(aタグ)を置いておくとベストです。興味・関心を持ったユーザーは関連コンテンツまでしっかり読んでくれるため、サイトの滞在時間や閲覧数が増え、ユーザーの満足度も高まります。
ユーザーに役立つコンテンツは検索エンジンにも評価されやすくなるため、サイト全体のSEO効果もアップするでしょう。
>「Semrush」被リンク分析・サイト診断・KW調査などSEO対策にフル活用!
アンカーリンク(aタグ)が飛ばないときの対処法
アンカーリンク(aタグ)がうまく飛ばない原因として最も多いのが、アンカーリンク(aタグ)の属性値が間違っていることです。属性値とは、href属性やid属性などに指定した値のことで、例えば次のようなものです。
● href属性で指定したリンク先URL
● id属性で指定したアンカーポイント
これらが間違っていると、アンカーリンク(aタグ)がリンク先に正しく飛びません。アンカーリンク(aタグ)がうまく飛ばないときは、まず属性値が正しく入力されているかをチェックしましょう。
まとめ
アンカーリンク(aタグ)は、サイト内で最も多く利用されるHTMLタグのひとつです。アンカーリンク(aタグ)はユーザビリティを高め、検索エンジンにページやコンテンツの内容を正しく伝えることで、SEO対策への効果もあります。この記事でご紹介した使い方や効果的に設置するポイントをよく理解し、サイト運営にお役立てください。
アンカーテキスト調査や内部エラーの調査におすすめ
記事内紹介のSEOツール「Semrush」をいますぐお試し!