aタグとは？使い方・属性からSEO対策ポイントまで解説

公開日: 2025-03-19

Webマーケ全般

公開日: 2025-03-19

Webマーケ全般

Webページ上にリンクを設置するために使用するのが「aタグ」です。aタグはHTMLの基本的な要素の一つですが、ユーザー体験やSEOに大きな影響を与える重要な機能を持っています。

この記事では、aタグの基本的な使い方や属性、SEO対策に効果的な活用方法について詳しく解説します。Web担当者や開発者の皆様が、aタグをマスターし、Webサイトのパフォーマンスを向上させるためのヒントをお届けします。

aタグとは

aタグとは、HTMLにおけるハイパーリンクを設定するためのHTMLタグです。aタグのaはアンカー（anchor）を略したもので、Webページ内のテキストや画像をクリックしたときに、別のWebページや、同じページ内の特定の場所に移動するためのリンクを作成する際に使用されます。

例えば、以下の「Keywordmap ACADEMY」というテキストにはaタグが用いられており、本サイトのTOPページへのリンクが設定されています。そのため、クリックすればTOPページに移動します。

Keywordmap ACADEMY

リンクは検索エンジンによって重要な指標として取り扱われており、サイトの評価やランキングにも大きな影響を与えます。なお、aタグが適切に設定されていない場合、リンクが正しく動作しなかったり、ユーザー体験やSEOに悪影響を及ぼす可能性があるため注意が必要です。

aタグの基本的な書き方

aタグの基本的な書き方は、以下の通りです。

<a href="リンク先のURL">アンカーテキスト</a>

「リンク先のURL」の部分にはURLや同じサイト内のリンク先を記述し、「アンカーテキスト」の部分にはユーザーにクリックさせたい文字列や画像を設定します。

<a href="https://keywordmap.jp/academy/">Keywordmap ACADEMY</a>

例えば、このように記述すると、以下のような「Keywordmap ACADEMY」というテキストリンクを作成することができます。

Keywordmap ACADEMY

aタグの属性一覧

aタグで使用できる主要な属性について紹介します。

aタグを含めたHTMLの各要素には、「属性」と呼ばれる追加情報を設定することができます。属性は、開始タグの要素名の後ろに半角スペースを開けて「属性名=”属性値”」という形式で指定します。

aタグには、リンクの挙動や表示方法をカスタマイズできるさまざまな属性があり、複数の属性を設定することもできます。以下に主要な属性を一覧で紹介します。

この他にも「name」「charset」「rev」「shape」「coords」などの属性がありますが、HTML5で廃止され、現在は非推奨となっています。

aタグの基本的な使い方

aタグの主要な属性の紹介に沿って、基本的な使い方を説明します。

href属性｜リンク先を指定する

href属性は、HTMLで特定のリンク先を指定し、目的のページやファイルにユーザーを誘導するために使用されます。例えば、以下のように記述することで、指定のURLへのリンクを作成できます。

<a href="https://keywordmap.jp/academy/">Keywordmap ACADEMY</a>

また、href属性を使用することで、次のような様々なリンクを設定できます。

• 同じサイト内のページ同士をつなぐ「内部リンク」
• 他のサイト（異なるドメイン）へとつなぐ「外部リンク」
• 同じページ内の特定の場所へ移動できる「ページ内リンク」

テキストに埋め込まれたリンクをアンカーテキストといいますが、リンク先のページ内容とテキストを一致させることで、リンクを辿って巡回する検索エンジンのクローラーに正しく情報を提供することができるためSEOに寄与すると言われています。

target属性｜リンク先を開く場所を指定する

target属性は、リンク先を開く場所を指定するための属性です。一般的には、リンクを新しいタブやウィンドウで開くために「target=”_blank”」を使用します。これにより、ユーザーが現在のページを離れずにリンク先の情報を確認できるようになります。

<a href="https://keywordmap.jp/academy/" target="_blank">Keywordmap ACADEMY</a>

一方、「target=”_self”」はリンクを現在のウィンドウやタブで開くデフォルトの設定です。また、「_parent」や「_top」など、ウィンドウがフレームに分割されている構造において挙動を指定するための値も提供されています。

「target=”_blank”」には脆弱性があった

古いブラウザでは、「target=”_blank”」を使用したリンクにタブナビング攻撃の脆弱性が存在していました。これは、新しいタブで開かれたページが親ウィンドウの情報にアクセスできてしまい、フィッシング詐欺などに悪用される可能性があったためです。

しかし、最新のブラウザでは、「target=”_blank”」のリンクを開く際に自動的に「rel=”noopener”」属性が付与され、新しいタブで開かれたページが親ウィンドウの情報にアクセスできなくなりました。これにより、現在はセキュリティ上の問題が解消されています。

rel属性｜現在のページとの関係性を示す

rel属性は、現在のページから見た、リンク先のURLとの関係性を示すために使用されます。rel属性は、適切に設定すれば検索エンジンやブラウザへ情報を伝えて、SEO上の効果を最適化することができる重要な要素です。

<a href="https://external.com" rel="nofollow">外部サイト</a>

例えば、上記で挙げた「rel=”nofollow”」は主に外部リンクに対して指定します。リンク先を関連付けしたくない場合、またはリンク先のページをクロールさせたくない場合に使用します。

他にも、現在の文書の代替文書であることを示す「alternate」、ページの著者の情報であることを示す「author」、現在のページから見て前後のページであることを示す「prev」「next」などの値があります。

【基本編】aタグを使いこなす4つの方法

Web担当者がaタグを活用するための基本的なテクニックを4つ紹介します。

別タブでリンク先を開く方法

上述した通り別タブでリンク先を開くには、「target=”_blank”」を指定します。外部リンクを設定する場合などによく用いられます。

<a href="https://keywordmap.jp/academy/" target="_blank">Keywordmap ACADEMY</a>

ユーザーがリンクをクリックした際に、新しいタブでページが開きます。これにより、ユーザーは現在のコンテンツから離れることなく、リンク先のページを閲覧することができます。

「target=”_blank”」を使えないとユーザーにとって不便な場合があります。例えば、フォームを入力中に気になるバナーをクリックすると、同じウィンドウで別ページが表示されてしまいます。その結果、それまでの入力内容がすべて失われ、最初からやり直さなければならない…という状況に陥ってしまいます。

また、前項で触れたように、この「target=”_blank”」を使用したリンクにはタブナビング攻撃の脆弱性が存在していましたが、現在はブラウザの改善によりこの問題は解消されています。

ページ内リンクを貼る方法

ページ内リンクとは、ユーザーが閲覧している同一Webページ内の異なる場所に移動できる仕組みを指します。

リンク先となるセクションにid属性を設定し、aタグのhref属性で特定のidを指定します。

以下のように設定することで、ユーザーはリンクをクリックして指定のセクションにジャンプすることができます。

<a href="#section1">セクション1へ移動</a>

・・・

<h2 id="section1">セクション1</h2>

ページ内リンクは、複数のセクションがあるような長いコンテンツで特に有用です。具体的には、記事の冒頭に目次を設置し、各見出しに移動できるページ内リンクを設置したり、「ページトップへ戻る」ボタンを設置したりする例が挙げられます。

これにより、ユーザーは欲しい情報をすぐに見つけることができ、ユーザビリティが向上します。さらに、利便性の高いサイトになることで、Googleからの評価が向上し、SEOにも良い影響を与える可能性があります。

▼ページ内リンクを貼る方法について、詳しくは以下の記事で紹介しています。

HTMLにページ内リンクを設定する方法は？正しく飛ばない原因と解決法を紹介

navigate_next

相対パスでリンクを貼る方法

相対パスとは、現在いるページやファイルを起点とした、目的ファイルまでの経路を指定する方法です。相対パスを使用すると、同じドメイン内の異なるページ間でのリンク設定がしやすくなります。

例えば、現在のページが「https://example.com/products/」で、リンク先が「https://example.com/products/item.html」の場合、相対パスは以下のようになります。

<a href="item.html">商品詳細</a>

相対パスを使用することで、ドメイン部分を省略できるので、ドメインが変更されてもリンクが正しく機能しやすいなど、リンクの管理が容易になるというメリットがあります。

絶対パス（絶対URL）と相対パスの使い分け

絶対パス（絶対URL）と相対パスにはそれぞれ利点と欠点があります。

絶対パスは完全なURLを指定するため、リンク先が常に固定されている場合や外部サイトへのリンクに適している一方、ドメインが変更されるとリンクが無効になります。

相対パスはドメインに依存しないので内部リンクに適していますが、ディレクトリ構造が複雑になると管理が難しくなる場合があります。

用途に応じて使い分けることが重要です。

画像にリンクを貼る方法

画像をリンクとして使用する場合、aタグとimgタグを組み合わせて使用します。

以下のように設定することで、「banner.png」という画像全体がリンクとして機能し、視覚的に訴求力のあるリンクを作成することが可能です。

<a href="https://keywordmap.jp/academy/" target="_blank">
	<img src="banner.png" alt="Keywordmap ACADEMY">
</a>

こちらが実行結果です。実際に画像にリンクを設定しており、クリックするとKeywordmap ACADEMYのトップページが開きます。ウェブサイトのロゴやバナー画像にリンクを設定する際、この方法で実装します。

画像リンクの場合はaltを入れる

画像リンクを利用する際には、alt属性を設定することが推奨されます。alt属性は、何らかの理由で画像が表示されない場合やスクリーンリーダーを使用するユーザーに対して、画像の内容を説明する役割を果たします。

上記の例では、「alt=”お問い合わせはこちら”」と設定したものが該当します。

適切なaltテキストを設定することで、アクセシビリティが向上し、SEO効果も期待できます。

【応用編】SEOで効果的にaタグを使うポイント

aタグはSEOにおいても重要な役割を果たします。適切に設定することで、検索エンジンの評価を高めることが可能です。ここでは、SEOを考慮したaタグの活用ポイントについて詳しく見ていきます。

SEO的にリンク先の指定はaタグの使用が推奨される

aタグ以外にも、buttonタグやinputタグにJavaScriptのonClick属性を指定してリンクを設定することは可能です。しかし、Googleの検索エンジンは、href属性を持つaタグのみリンクをたどることができます。そのため、SEOを考慮する場合はaタグを使用することが推奨されます。

また、内部リンクをバランスよく配置することで、サイト全体の評価を底上げさせることが期待できますので、aタグを適切に設定するようにしましょう。

▼内部リンクを最適化しSEO効果を生む方法について詳しく知りたい方はこちら

内部リンクとは？SEO効果のある貼り方やリンク構造を最適化させる方法を解説

navigate_next

アンカーテキストはクリックされやすい文言にする

アンカーテキストは、リンクの内容を示す重要な要素です。ユーザーがリンクをクリックしたくなるような、具体的で魅力的な文言を使用することが推奨されます。

また、リンク先のページの内容を端的に表現するテキストや関連性の高いキーワードを含めることが重要です。例えば、「詳しくはこちら」よりも「SEO対策の方法を詳しく解説」といった具体的な表現が効果的です。

ただし、キーワードの過剰な詰め込みはユーザーの利便性を損ねるだけでなく、検索エンジンからスパムリンクであると認識される可能性があるため注意しましょう。

▼アンカーテキストの効果的な書き方について詳しく知りたい方はこちら

アンカーテキストとは？書き方や注意点、確認できるツールを解説

navigate_next

外部リンクではrel属性を上手に活用する

外部サイトへのリンク設定時には、rel属性を適切に活用することが重要です。Googleに外部リンクの関係性を伝える方法として、「sponsored」「ugc」「nofollow」といった値が定義されています。

「rel=”ugc, nofollow”」のように複数の値を併用して設定する方法も有効とされています。

参考：Google検索セントラル「Google に外部リンクの関係性を伝える」

なお、以前は「nofollow」を設定することでリンクをたどらせないよう命令することが可能でしたが、現在は「リンクをたどらせたくない」と意思表示を行うヒントに変更されています。そのため、リンクをたどるかどうかはGoogleの判断に委ねられている点にご注意ください。

なお、「sponsored」「ugc」は新しく登場したrel属性ですが、すでに「nofollow」を設定されている場合は、それを貼り替える必要はないとされています。

aタグに関するよくある質問

aタグの使用に関して、よくあげられる疑問をまとめました。それぞれの回答も記載しているので参考にしてみてください。

aタグのリンクを青くしない方法は？

デフォルトでは、aタグは青色で表示されますが、CSSを使用することでリンクの色を変更することが可能です。Webサイトのトンマナ的に配色を変更したい場合などで参考にしてみてください。

例えば、以下のようにCSSを設定します。

a {
color: green;
text-decoration: none;
}

この設定により、リンクの色は緑色になり、下線は表示されなくなります。必要に応じて、ホバー時のスタイルも追加することで、ユーザーにリンクであることを明示することができます。

hタグの中にaタグを入れることはできますか？

hタグの中にaタグを配置することは可能です。見出し自体がリンクとして機能することになります。

例えば、以下のように記述します。

<h2><a href="https://example.com">見出しリンク</a></h2>

ただし、アクセシビリティやSEOの観点から、適切な使用が求められます。一般的に見出しタグにリンクを挿入するのは控えるのが無難でしょう。

aタグのリンクを無効にする方法は？

Chromeの場合、input、textarea、selectタグなどには「disabled属性」というHTMLタグ自体を非活性にする（無効化する）属性を指定することが可能ですが、aタグにはdisable属性を適用できません。

aタグのリンクを無効にするには、以下のような方法が挙げられます。

1. href属性を設定しない

<a tabindex="-1">無効化されたリンク</a>

この方法だとaタグの中にhref属性を記述していないので、リンクを有効にしたい場合には、HTMLでリンク先を設定しなおす必要があります。

「tabindex=”-1″」には、フォーカスされないようにする働きがあります。

2. CSSで「pointer-events: none;」を使用する

aタグに対してCSSで「pointer-events: none;」を指定すると、クリックやホバーが無効になり、リンクも機能しなくなります。

この方法では、aタグのリンクを復活させたい場合にCSSの記述を削除するだけで対応できるため、シンプルな仕組みといえます。

ただし、開発ツール等を使用して無効にしているリンク先のURLを閲覧されたり、「pointer-events: none;」を無効化されてリンクがたどられたりする可能性がある点には注意が必要です。

3. JavaScriptを使用してクリックイベントを無効化する

JavaScriptでリンクを無効化する際は、「javascript:void(0)」が用いられることがあります。これは未定義（Undefined）を返す演算子で、href属性に指定すると、aタグはリンクとして認識しつつも遷移の挙動はしないという特殊な動作をさせることができます。

<a href="javascript:void(0)">無効化されたリンク</a>

ただし、セキュリティリスクやアクセシビリティ上の問題がある方法なので、特別な理由が無い限りは使用を避けた方が望ましいでしょう。

hrefの読み方は？

hrefは一般的には「エイチレフ」「エッチレフ」と読みます。

hrefは「ハイパーテキストリファレンス（HyperText Reference）」の略で、リンク先のURLを指定する属性です。

href=”#” の意味は？

「href=”#”」を指定すると、現在のページの先頭に遷移することができます。

また、JavaScriptと組み合わせることで、リンクのデフォルト動作を抑制し、カスタムアクションを実行させる用途でも使用されます。例えば、モーダルウィンドウを開くためのリンクとして、以下のように使用するケースが挙げられます。

<a href="#" onclick="openModal()">モーダルを開く</a>

また、ページ内リンクを実現する際にも「#」の記号が使われます。

ページ内リンクを設定することで、ユーザーはリンクをクリックして指定のセクションにジャンプすることができます。

▼ページ内リンクを貼る方法について、詳しくは以下の記事で紹介しています。

HTMLにページ内リンクを設定する方法は？正しく飛ばない原因と解決法を紹介

navigate_next

まとめ：正しくaタグを設定し、SEOを考慮したコンテンツを制作しましょう

aタグは、Webサイトのナビゲーションにおいて欠かせない要素であり、ユーザー体験とSEOの両方において重要な役割を果たします。

aタグを正しく設定することで、サイトの信頼性向上や検索エンジンからの評価につながるだけでなく、サイト全体のパフォーマンス改善も期待できます。

aタグを使いこなすための基本的な4つのポイントは、以下の通りです。

• 別タブでリンク先を開く
• ページ内リンクを貼る
• 相対パスでリンクを貼る
• 画像にリンクを貼る

また、応用編として、SEOで効果的にaタグを使うポイントは、以下の通りです。

• リンク先の指定にはaタグを使用する
• アンカーテキストはクリックされやすい文言にする
• 外部リンクではrel属性を上手に活用する

本記事で紹介した基本的な使用方法やSEO対策のポイントを参考に、aタグを効果的に活用してみてください。