HTML Living Standard/rel属性

rel属性は、HTML要素でリンク先のリソースとの関係を指定するために使用されます。この属性は、リンクの種類や意味をブラウザや検索エンジンに伝える役割を果たします。本章では、rel属性の使用法について詳しく解説します。

概要

rel属性は "relation"（関係）の略で、リンクや外部リソースの性質を明示するために使用されます。例えば、以下のような目的で使用されます：

<a> 要素でリンク先との関係を指定。
<link> 要素で外部リソースの種類を定義。
<area> 要素で画像マップ領域のリンク関係を指定。

属性の構文

rel属性の値は1つ以上のキーワードで指定します。複数の値を指定する場合は、スペース区切りで記述します。

例

<a href="https://example.com" rel="nofollow noopener">リンクテキスト</a>

主な使用方法

rel属性は以下の要素と共に使用されます。

`<a>` 要素での使用例

リンク先との関係を明確にするために使用します。

例1

外部リンクでの nofollow

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

検索エンジンにこのリンクを追跡しないよう指示します。

例2

セキュリティ強化のための noopener

<a href="https://example.com" target="_blank" rel="noopener">新しいタブで開く</a>

target="_blank" を指定した場合、rel="noopener" を追加してセキュリティリスクを軽減します。

例3

相互リンクの指示

<a href="https://example.com" rel="author">作者ページ</a>

このリンクは、対象のページが文書の作者に関連していることを示します。

`<link>` 要素での使用例

スタイルシートやその他のリソースを文書に関連付ける際に使用します。

例1

スタイルシートの指定

<link rel="stylesheet" href="styles.css">

この記述は、styles.css を文書のスタイルシートとして適用します。

例2

アイコンの指定

<link rel="icon" href="favicon.ico" type="image/x-icon">

favicon.ico をウェブサイトのファビコンとして指定します。

`<area>` 要素での使用例

画像マップ内のリンク関係を定義します。

<img src="map.png" usemap="#map">
<map name="map">
  <area shape="rect" coords="0,0,100,100" href="https://example.com" rel="nofollow">
</map>

画像マップのリンクに rel="nofollow" を指定することで、検索エンジンがこのリンクを追跡しないように設定できます。

よく使用されるキーワード

以下は、rel属性で使用される主要なキーワードです。

リンクの動作に影響を与えるキーワード

nofollow: 検索エンジンがリンクを追跡しないように指定します。
noopener: リンク先のウィンドウで window.opener を無効化します。
noreferrer: リンク先にリファラーヘッダーを送信しません。

文書間の関係を指定するキーワード

author: リンク先が文書の作者情報を提供することを示します。
prev / next: 現在の文書の前後に位置するリソースを示します。
alternate: 現在の文書の代替バージョンを示します（例: フィードや翻訳）。

リソースの種類を指定するキーワード

stylesheet: 外部スタイルシートを指定します。
icon: ウェブサイトのアイコン（ファビコン）を指定します。
manifest: ウェブアプリのマニフェストファイルを指定します。

注意事項

rel 属性は、リンクやリソースの意味を明確にする重要な役割を果たします。不適切な値を指定すると、期待通りに動作しない場合があります。
セキュリティやSEOの観点から、適切なキーワードを選択することが重要です。
- 外部リンクに target="_blank" を指定する場合、必ず rel="noopener noreferrer" を追加することを推奨します。
  例
  <a href="https://example.com" target="_blank" rel="noopener noreferrer">外部リンク</a>

まとめ

rel属性は、HTML要素においてリンクの関係やリソースの種類を指定するために不可欠な属性です。正しく使用することで、文書の構造を改善し、ユーザー体験やセキュリティを向上させることができます。

概要