htmlタグ｜a（ アンカー・リンク）

ホームページ（ウェブサイト）制作において、ページとページ、あるいは外部サイトとを繋ぐ役割を果たすaタグ（アンカータグ）は、ウェブという概念そのものを成立させている最も根源的な要素です。このタグを適切に記述し、サイト内の情報構造を相互にリンクでつなぎ合わせることは、ユーザーを目的のコンテンツへ迷うことなくスムーズに誘導するために非常に重要です。

同時に、aタグは検索エンジン最適化（SEO）の観点からも極めて大きな意味を持ちます。検索エンジンのクローラーは、aタグのhref属性に指定されたURLをたどってウェブ上のあらゆるページを巡回（クロール）し、新たなコンテンツの情報を収集します。さらに、リンク元からリンク先へ渡される評価（リンクジュース）や、aタグで囲まれたアンカーテキストに含まれる関連キーワードは、リンク先ページの検索順位を決定するための重要な指標として機能します。事業用のホームページ（ウェブサイト）で集客を成功させるためには、単にリンクを繋ぐだけでなく、クローラーが効率よくサイト内を巡回できる論理的なリンク構造を設計することが求められます。

ウェブ標準の進化に伴い、aタグの仕様も大きく変化してきました。かつての古いHTML規格では、ページ内リンクの到達点としてaタグにname属性を指定する手法が主流でした。また、aタグの中に配置できる要素はインライン要素（テキストや画像など）に厳しく限定されていました。しかし、現在のHTML Living Standardにおいては、より柔軟で意味論的（セマンティック）なマークアップが可能になっています。また、セキュリティリスクを防ぐための新しい属性や、SEOの評価を細かくコントロールするためのrel属性の使い分け、ファイルダウンロードを強制するdownload属性の追加など、現代のホームページ制作において必須となる知識が増加しています。

本ページでは、aタグの最新の標準仕様に基づき、過去の認識からアップデートすべきポイントの指摘とリライト、そして事業用のホームページ（ウェブサイト）を構築する上で知っておくべき正確な仕様と運用方法について解説します。

a アンカー（リンク）

<a href=”” target=”” title=””></a>

ホームページ制作（ウェブサイト制作）の際に使用する<a>（アンカー）タグについてのご説明です。

このアンカータグはホームページ内のページとページをつなぐリンクを設置する時に使用します。

<a> アンカーの定義　ハイパーリンクの指定

アンカー（anchor）の定義　ハイパーリンクの指定。

リンクとは文字やイメージ（画像）をクリックすると、別ページや別のサイトを表示（ジャンプ）する機能で、アンカーは、このリンク機能の目印の役割を果たします。

aタグで囲った中身がリンク箇所になります。

リンクの中身は、テキスト、画像、要素など、様々なパターンでリンクを施すことができます。

リンクの基本となる主要属性

リンク先を指定し、ユーザーのブラウザでの動作を制御するための主要な属性です。これらは日常的なホームページ更新や事業のWeb展開においても頻繁に使用します。

href（エイチレフ）属性

リンク（参照）先の文書やファイルの場所を指定します。ハイパーリンクとして機能させるために指定します。

通常のURL

href=”URL” のように、遷移先のURLを直接指定します。

ページ内リンク（アンカー）

href=”#id名” のように指定し、同一ページ内の特定の場所へジャンプさせます。現代の仕様では、遷移先の指定にはname属性ではなくid属性を使用します。

メールアドレスの指定（ｍａｉｌｔｏ）

href=”ｍａｉｌｔｏ:メールアドレス” と記述することで、ユーザーのメールソフトを起動させます。

（実際は半角です）

電話番号の指定（tel）

href=”tel:電話番号” と記述し、スマートフォンなどから直接電話をかけられるようにします。事業用ページでのお問い合わせ導線としてよく使用します。

target（ターゲット）属性

リンクをクリックした際に、リンク先のページをブラウザ上でどのように開くかを指定します。

_self

現在のウィンドウ（タブ）でリンク先を開きます。target属性を指定しない場合の標準の動作です。

_blank

新しいタブやウィンドウでリンク先を開きます。外部のホームページ（ウェブサイト）へリンクする場合によく使われます。セキュリティとパフォーマンスの観点から、後述するrel=”noopener noreferrer”と組み合わせて使用することが推奨されています。

_parent

現在のウィンドウの親ウィンドウ（フレーム）でリンク先を開きます。

_top

現在のウィンドウの最上位階層のウィンドウでリンク先を開きます。

任意のターゲット名

任意の名前を付けたウィンドウでリンク先を開きます。

title（タイトル）属性

ハイパーリンクに関する補足的なタイトルや情報を提供します。リンクが施された箇所にマウスカーソルをあてると、ツールチップとしてタイトルが表示されます。SEO目的での不自然なキーワード挿入は避け、ユーザーにとって有益な情報にとどめることが適切です。

検索エンジンとブラウザに関係性を伝える属性

より専門的には、リンク先と現在のページがどのような関係にあるかを検索エンジン（クローラー）やブラウザに正しく伝えるための属性群です。

rel（レル）属性

現在の文書から見た、リンク先との関係性（リンクタイプ）を指定します。検索エンジンの評価を最適化するうえで大きな意味を持ちます。

alternate

代替文書であることを示します。

nofollow

検索エンジンに対して、リンク先をクロールしないよう、またはページの評価を受け渡さないように指示します。重要ではないリンクや、信頼性を担保できないリンクに対して使用します。

sponsored

広告やスポンサー契約に基づくリンクであることを明示します。

ugc

ユーザー生成コンテンツ内のリンクであることを示します。

noopener と noreferrer

新しいタブで開く際、リンク先に元のページの操作権限を与えない（noopener）、およびリファラ（参照元情報）を送信しない（noreferrer）ために指定します。

author

その文書の著者情報へのリンクであることを示します。

bookmark

文書の固定リンク（パーマリンク）であることを示します。

help, icon, license, search, tag

それぞれヘルプページ、アイコン、ライセンス情報、検索機能、関連タグページへのリンクであることを明確にします。

prev と next

連続した記事やページ送りにおいて、前の文書（prev）や次の文書（next）であることを示します。

prefetch

リンク先のリソースをあらかじめキャッシュし、読み込み速度を向上させます。

hreflang（エイチレフラング）属性

ハイパーリンク先の言語コード（例：ja、enなど）を指定します。多言語展開しているホームページ（ウェブサイト）で適切な言語版を認識させるために役立ちます。

media（メディア）属性

ハイパーリンク先のメディア（印刷用、特定の画面幅など）を指定します。

type（タイプ）属性

ハイパーリンク先のMIMEタイプを指定し、ファイルの種類をブラウザに伝えます。

アクセシビリティを高める属性

ユーザーの操作性を向上させるための属性群です。

accesskey（アクセスキー）属性

ショートカットキーを割り当て、キーボード操作で直接リンクをアクティブにできるようにします。

tabindex（タブインデックス）属性

Tabキーを押した際のフォーカス移動順を指定します。

現代のHTML仕様で廃止された属性

過去のHTMLでは使用されていましたが、現在のHTML5仕様では非推奨、または廃止となっている属性です。これらは別の方法で設定します。

name属性

かつては任意の文字を指定してページ内リンクの着地点として使用していましたが、現在はid属性を使用します。

rev（レブ）属性

リンク先から見たこの文書との関係性を示す属性でしたが、現在は廃止されています。関係性はすべてrel属性で表現します。

charset属性

リンク先の文字コードセットを指定する属性でしたが、現在は廃止されています。

shape属性とcoords属性

リンク領域の形状や座標を指定する属性でしたが、現在aタグでは使用しません。areaタグを使用して設定します。
<a　href=””　target=””　title=””></a>

ウェブサイトのリンク機能について

このアンカー（リンク）機能は、ホームページ（ウェブサイト）にとって非常に重要であり、またウェブサイトの最大の強みです。

紙であれば実現することのない、「ワンクリックで移動」という機能のため、最大限に活かすべき機能になります。ページ内の移動のほか、外部サイトへの移動もこのリンク機能を用います。

テキストに施されたリンクを「テキストリンク」画像に施されたリンクを「画像リンク」と呼びます。

リンク内のテキストのことをアンカーテキスト、と呼びます。

サイト構造を示す中で、ディレクトリのほか、このリンク機能やパンくずリストなどが、サイトの構造やページ重要度を示すよい機能になります。

ホームページの内部リンク構造のSEO【SEO内部対策】

リンクはページ間の関係を示す機能もある

このアンカー（リンク）機能は、サイトのSEO（検索エンジン最適化）にとって非常に重要ですが、同時に最適化された設置の仕方でないとペナルティの対象になります。

SEO内部対策(内部最適化)

リンク機能の原則は「ページとページを繋ぐこと」です。繋がれたページ同士が関連した情報であることが通常予測されます。コンテンツ内部からの発リンクにおいて、全く関係ないページヘのリンクは不自然であり、ページテーマの整合性が取れません。

ナビゲーションはまた取り扱いが異なりますが、コンテンツ内部にリンクを設置する場合は、少なからずそのリンク自体が価値のあるものである必要があります。

HTML Living Standardにおける仕様のアップデートと過去の記述の修正

かつてのホームページ制作の現場で常識とされていたaタグの使い方は、現在のウェブ標準と照らし合わせると適切ではない部分が存在します。より専門的には、現在の仕様を前提とした記述へアップデートすることが求められます。

name属性の廃止とid属性への移行

現在、HTMLの標準仕様はWHATWGが管理するHTML Living Standardへと完全に移行しています。古いHTML4の時代には、ページ内の特定の場所へジャンプさせるアンカーとして、aタグにname属性を指定していました。しかし現在の仕様では、aタグのname属性は廃止されています。ページ内リンクの到達点を設定する場合は、aタグではなく、見出しタグやdivタグなど、任意の要素に対してid属性を付与してリンク先として指定することが現代のホームページ制作における基本ルールです。

ブロックレベル要素を囲むマークアップの許可

過去の規格では、aタグはインライン要素として定義されており、見出しタグや段落タグ、divタグなどをaタグで囲むことは文法違反とされていました。しかしHTML5以降、そして現在のHTML Living Standardにおいては、トランスペアレント（透過的）なコンテンツモデルが採用され、aタグの中にブロックレベル要素を含めることが正式に許可されています。これにより、事業用のホームページ（ウェブサイト）でよく見られる画像、見出し、説明文がセットになったカード型のデザイン全体を一つのaタグで囲み、クリックしやすいリンク領域を作成することが可能になっています。

SEOとセキュリティを強化するrel属性の適切な運用

aタグを正しく機能させ、検索エンジンやブラウザに正確な情報を伝えるためには、付与できる属性、特にrel属性の役割を深く理解しておくことが重要です。

外部リンクにおけるnoopenerとnoreferrerの重要性

aタグにtarget=”_blank”を指定してリンクを別のタブやウィンドウで開かせる場合、古いブラウザの仕様では、リンク先のページからリンク元のページをJavaScriptで操作できてしまうというセキュリティ上の脆弱性が存在しました。これを防ぐため、別タブで開く外部リンクには必ずrel=”noopener”やrel=”noreferrer”を付与します。現代の主要なブラウザではtarget=”_blank”を指定した時点で自動的にnoopenerが適用されるようになっていますが、明示的に記述しておくことで、すべての環境に対して安全な事業用ホームページ（ウェブサイト）を提供できます。

nofollow、sponsored、ugcによるリンク評価の制御

検索エンジンに対して、リンク先ページへの評価の受け渡しをコントロールするためにrel属性を使用します。信頼できないサイトや、クローラーに辿らせる必要がないページへのリンクにはrel=”nofollow”を指定します。また、より専門的には、広告やスポンサー契約に基づくリンクにはrel=”sponsored”を、ユーザーが書き込んだコメント欄などのリンクにはrel=”ugc”を指定することが推奨されています。これらを適切に使い分けることで、自社サイトのSEO評価を守りつつ、検索エンジンに対して正確なリンクの関係性を伝えることができます。

Webアクセシビリティへの影響とアンカーテキストの最適化

aタグはユーザーが直接操作する要素であるため、アクセシビリティとユーザビリティの両面から丁寧なマークアップが求められます。

具体的なアンカーテキストの記述

リンク先の情報を示すアンカーテキスト（aタグで囲まれたテキスト）は、ユーザーと検索エンジンの両方にとって非常に重要です。こちらや詳細を見る、といった曖昧なテキストではなく、事業用ホームページ制作の料金表はこちらのように、リンク先の内容が具体的にわかるテキストを記述します。これにより、音声読み上げソフトを利用するユーザーがリンクだけを抽出して読み上げた際にも、どこへ移動するリンクなのかを正確に把握できるようになります。

aria-label属性による支援技術への補足対応

アイコン画像だけを用いたボタンや、デザインの都合で具体的なテキストを配置できないリンクも存在します。このような場合、より専門的にはaria-label属性を用いて、リンクの目的を音声読み上げ用のテキストとして指定します。視覚的なデザインを損なうことなく、すべての人にとって分かりやすく、目的の情報へたどり着きやすいホームページ（ウェブサイト）を構築するために、こうしたアクセシビリティへの配慮を取り入れていきます。

ホームページ（ウェブサイト）制作・作成に役立つHTMLタグ一覧は
⇒html5 tag reference index ホームページ制作の基本タグ

ホームページ制作・SEOの1ポイント

SEOでもっとも話題になることが多いのがこのリンク（アンカー）機能です。リンクで結ばれたページとページはお互いに関連性を持ちます。こうしたことから内部リンクの適切な設置などによって、ホームページ全体の中でどのページが重要であるかを示すことに役立ちます。またアンカーテキストはリンク先のページの内容を示すものとなるため、リンク先ページのタイトルと一致させるなど適切に設置しておいたほうがようでしょう。

ホームページ（ウェブサイト）のHTML編集方法

ホームページのHTML編集方法について。ホームページ（ウェブサイト）は基本的にHTMLで構成されています。かつてはHTML単独でHTMLの文書スタイルを設定していましたが、現代ではページの基本構成はHTMLで、外観はスタイルシート・CSSで設定されています。ホームページ制作・作成、ホームページ修正の基本はこのHTMLとCSSの編集で行います。

ホームページのHTML編集方法