この記事では、aタグの基本的な記述方法から、属性ごとのコード例、SEOにおける注意点まで解説します。
aタグとは
aタグとは、href属性を使って指定したリンク先へ遷移できるハイパーリンクを作成するHTMLのアンカー要素のことです。
リンク先の指定は、別のWEBページやファイル、メールアドレス、同じページ内の特定の場所などさまざまです。
ほかによく使う属性には、現在のページとリンク先ページの関係性を示すrel属性、リンク先をどこに表示するかを指定するtarget属性があります。
aタグの基本の記述
aタグの基本的な記述は以下の通りです。
<a href="URL">リンクテキスト</a>
例えば、「クヌギのSEOラボ」というテキストにトップページへのリンクを設定する場合は次のように書きます。
<a href="https://seo.kunugi-inc.com/">クヌギのSEOラボ</a>
絶対パスと相対パスとは
aタグのhref属性にURLを記述する方法である、「絶対パス」と「相対パス」の2種類を解説します。
絶対パス
スキーム（https:// や http:// など）から始まる、URLを完全な形で記述する方法です。
どのページからリンクを書いても、常に同じURLを指し示せる点が特徴です。外部サイトへのリンクには必ず絶対パスを使います。
<a href="https://example.com/about/">会社概要</a>
相対パス
相対パスとは、現在のファイル（カレントディレクトリ）を起点として、リンク先の場所を相対的に記述する方法です。
ドメインを含まない記述なので、開発環境と本番環境でドメインが異なる場合でもそのまま使い回せます。ただし、起点となるファイルの場所によってパスの書き方が変わるため、ファイル構成を把握して記述する必要があります。
<a href="/about/">会社概要</a> <a href="../contact/">お問い合わせ</a>
aタグを使ったハイパーリンク設定の記述例
aタグには、外部URLだけでなくさまざまな値を指定できます。href 属性でページ内リンクや電話番号などを指定したり、target 属性を組み合わせることで別タブで開くリンクにしたりと、用途に合わせた設定が可能です。
別タブでリンクを開く
リンクを別タブで開くには、target=”_blank”を記述します。外部サイトへのリンクや、ユーザーに元のページを保持したままページ遷移させたい場合に使います。
<a href="https://example.com/" target="_blank" rel="noopener noreferrer">外部サイトを開く</a>
rel=”noopener noreferrer”の指定は、リバースタブナビング攻撃（新しいタブで開いたページから元のタブが操作される攻撃）のセキュリティ対策として重要です。target=”_blank”を使う際は必ずセットで記述しましょう。
画像にリンクを貼る
aタグの中にimgタグを記述することで、画像にリンクを設定できます。
<a href="/about/"> <img src="banner.jpg" alt="会社概要ページへ"> </a>
画像リンクの場合、alt属性にはリンクの遷移先や目的を記述します。「〇〇バナー画像」のような説明ではなく、「会社概要ページへ」のようにリンクとしての目的を伝える内容にしましょう。
alt属性の書き方を詳しく知りたい方は、ALT属性とは？画像の種類別の書き方と注意点をご覧ください。
ページ内リンクを作る
ページ内の特定箇所にジャンプするリンクを「ページ内リンク（アンカーリンク）」といいます。まず、ジャンプ先の要素にid属性を設定します。
<h2 id="section1">セクション1</h2>
次に、aタグのhref属性に#id名を記述します。
<a href="#section1">セクション1へ移動</a>
目次リンクや「ページトップに戻る」ボタンなど、長いページのナビゲーションに活用できます。
ボタンリンクを作る
aタグはテキストリンクだけでなく、CSSと組み合わせることでボタンのように見せることもできます。
<a href="/contact/" class="btn">お問い合わせはこちら</a>
メールや電話番号のリンクを作る
href属性にmailto:やtel:を使うことで、メールや電話番号のリンクを作成できます。
メールリンク <a href="mailto:info@example.com">info@example.com</a>
クリックするとメールソフトが起動し、宛先に指定したメールアドレスが自動入力されます。
電話番号リンク <a href="tel:0312345678">03-1234-5678</a>
スマートフォンでクリックすると、そのまま電話アプリが起動します。
PDFなどをダウンロードする
download属性を使うと、リンク先のファイルを開かずにダウンロードさせることができます。
<a href="/files/document.pdf" download>資料をダウンロードする</a>
download属性に値を指定すると、ダウンロード時のファイル名を任意に変更できます。
<a href="/files/document.pdf" download="company-profile.pdf">会社概要PDFをダウンロード</a>
ただし、download属性は同一オリジン（同じドメイン）のファイルにのみ有効です。外部ドメインのファイルは無視されます。
リンクの色や下線の設定
aタグにはブラウザのデフォルトスタイルとして、テキストカラーが青色で下線が表示されます。CSSで上書きすることが可能です。
リンクの色を変える方法
CSSのcolorプロパティでリンクの色を変えられます。
a {
color: #333333;
}
aタグの状態別の疑似クラス
リンクはマウスの操作や訪問履歴によって、色やスタイルを別々に設定できます。
a:link { color: #0066cc; } /* 未訪問のリンク */
a:visited { color: #9900cc; } /* 訪問済みのリンク */
a:hover { color: #0044aa; } /* マウスオーバー時 */
a:active { color: #ff0000; } /* クリック中 */
ユーザーがリンクと通常テキストを見分けられるよう、コントラスト比4.5:1以上を目安に設定しましょう。
リンクの下線を消す方法
下線を消すにはtext-decorationプロパティを使います。
a {
text-decoration: none;
}
下線を消す場合、リンクであることがユーザーに伝わりにくくなります。ホバー時に下線を表示するなど、リンクだと分かるデザイン上の工夫をあわせて行いましょう。
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
Googleに正しく読まれるためのリンクの条件
Googleがクロールできるのは、href属性付きのaタグで記述されたリンクです。そのため、aタグを使ったリンクの設定を必ず行いましょう。
SEOにおけるaタグの設定のポイント
SEOで効果的なaタグの設定は以下の通りです。
アンカーテキストに具体的なキーワードを含める
Googleはアンカーテキストを、リンク先のページがどんな内容かを理解するための手がかりとして利用しています。
「こちら」「詳しくはこちら」のような意味のないテキストではなく、リンク先のページ内容が伝わる具体的なキーワードを含めましょう。
<!-- NG: リンク先の内容が伝わらない --> <a href="/seo/alt/">こちら</a> <!-- OK: リンク先の内容が伝わる --> <a href="/seo/alt/">ALT属性の書き方と注意点</a>
外部リンクはrelを適切に使い分ける
外部サイトへリンクを貼る際は、rel属性を使ってリンクの性質をGoogleに伝えることができます。
nofollow
nofollowは、リンク先への評価を渡したくない場合に使用します。
<!-- 信頼性が不明なサイトへのリンクの例 --> <a href="https://example.com/" rel="nofollow">参考サイト</a>
sponsored
sponsoredは、広告・PR・アフィリエイトなど、報酬を伴うリンクに使用します。
<!-- 広告リンクの例 --> <a href="https://example.com/" rel="sponsored">PRサービスはこちら</a>
ugc
ugc（User Generated Content）は、コメント欄や掲示板など、ユーザーが投稿したコンテンツ内のリンクに使用します。
<!-- コメント欄のリンクの例 --> <a href="https://example.com/" rel="ugc">ユーザー投稿リンク</a>
aタグの設定でよくあるミス
hrefが空になっている
href属性の値が空のままになっているケースです。
<!-- NG --> <a href="">こちら</a> <!-- OK --> <a href="/seo/alt/">ALT属性の書き方を見る</a>
この場合、クリックすると現在のページをリロードする動作になります。Googleもリンクとして認識しないため、リンクとしての機能を果たしません。必ずリンク先のURLを記述しましょう。
リンクテキストが不明瞭
「こちら」「詳細」「クリック」といった言葉だけをアンカーテキストにしているケースです。
<!-- NG --> <a href="/seo/alt/">こちら</a> <!-- OK --> <a href="/seo/alt/">ALT属性の書き方を見る</a>
ユーザーにとってリンク先が分かりにくいだけでなく、Googleにもリンク先のページ内容が正確に伝わりません。リンク先の内容を具体的に示すテキストにしましょう。
絶対パスと相対パスの使い分けを間違える
外部サイトへのリンクに相対パスを記述してしまうと、意図しないページへのリンクになります。
<!-- NG: 外部サイトへのリンクに相対パスを使っている --> <a href="example.com/page/">外部サイト</a> <!-- OK: 絶対パスで記述する --> <a href="https://example.com/page/">外部サイト</a>
また、サイト移行やディレクトリ変更の際に相対パスのリンクが壊れるケースもあります。外部サイトへのリンクには必ず絶対パスを使うことを徹底しましょう。
画像リンクなのにaltが不適切
aタグの中にimgタグを使って画像リンクを設定している場合、alt属性の内容が不適切なケースがあります。
<!-- NG: 画像の見た目の説明になっている --> <a href="/about/"> <img src="banner.jpg" alt="青色のバナー画像"> </a> <!-- OK: リンクの目的が伝わる内容になっている --> <a href="/about/"> <img src="banner.jpg" alt="会社概要ページへ"> </a>
画像リンクの場合、alt属性はリンクとしての目的を伝えるテキストになります。画像の見た目や内容の説明ではなく、「どこへ行くか・何をするか」を記述しましょう。
kunugi SEO Checkerでaタグの設定状況を確認する
内部リンクと外部リンクの件数を確認する
kunugi SEO Checkerの「基本要素」タブでは、ページ内の内部リンク数と外部リンク数が自動で集計されて表示されます。リンクを大量に設置したページや、リンク構造の見直しを行う際に、デベロッパーツールを開かずに現状を把握できます。
画像リンクのalt属性の設定漏れがないか確認する
kunugi SEO Checkerの「基本要素」タブでは、ページ内の画像数とALT欠損数が表示されるため、画像リンクのalt属性が抜けているケースを効率よく見つけられます。
nofollowが設定されたリンクの件数を確認する
kunugi SEO Checkerの「パネルデータ」タブでは、nofollowリンクの件数が確認できます。該当リンクをハイライト表示できるため、ページ内のどこにnofollowリンクがあるかもわかります。
