rel属性の定義と使い方
HTMLのrel属性は、リンクされたリソースと現在の文書との関係を指定するために使用される属性です。relは「relationship」の略であり、リンクされたリソースと現在の文書の関係を説明する目的で使われます。rel属性は<a>、<area>、<link>タグで使用されます。rel属性はユーザーに直接の利益をもたらすわけではありませんが、ブラウザや検索エンジンにリンクの関係情報を提供し、ユーザーの要求により正確に対応できるようにします。
概要
ティム・バーナーズ＝リーによって1989年に考案されたワールド・ワイド・ウェブ（World Wide Web、WWW、W3）のハイパーテキストシステムを、私たちは簡単に「ウェブ」と呼びます。現在では、私たちの日常生活において大衆化されているだけでなく、絶対的な位置を占めています。
ハイパーテキストシステムは、ウェブ文書から別のウェブ文書へ即座にアクセスできるテキストであり、情報取得の新たな時代を人類にもたらしました。rel属性は、ハイパーテキストシステム、すなわちウェブ文書間のリンク関係を明確にし、より理解しやすくするために考案されたものです。
導入背景
rel属性は1999年に初めて導入されました。当時はブラウザがリンク先のリソースを適切に処理できるようにするために導入されました。その後、2000年代に入り、検索エンジンがリンク先のリソースをより正確に理解し、検索結果に反映させるためにrel属性が使われ始めました。
ウェブ開発者と検索エンジン運営者の双方に重要な属性
rel属性は、ウェブ開発者と検索エンジン運営者の双方にとって重要な属性です。ウェブ開発者はrel属性を使って、リンクされたリソースと現在の文書の関係を明確に表現することで、ブラウザや検索エンジンがリンクをより効率的に処理・理解できるようにします。検索エンジン運営者はrel属性を活用して、リンク先のリソースをより正確に理解し、検索結果に反映させることが可能です。rel属性はウェブサイトのSEO（検索エンジン最適化）向上にも役立ちます。ウェブサイトにrel属性を適切に使用することで、検索エンジンがコンテンツをより深く理解し、検索結果でより高い順位に表示されるようになります。
使用目的
まとめると、rel属性の導入背景はリンク関係の複雑さに対応するためと考えられ、リンク関係を明確に表現し、ウェブツールに関係情報を伝えることを目的としています。
これにより、ウェブ文書の意味伝達と検索エンジン最適化の向上が可能になります。rel属性を導入することで、開発者はリンクされたリソースとの関係を明確に表現できます。これにより、ブラウザや検索エンジンなどのウェブツールはリンクを適切に処理し、文書の意味をより正確に理解できるようになります。したがって、rel属性はリンク関係の複雑さに対応するために導入されたものであり、ウェブページの構造と意味を明確に伝えるための重要なツールです。
rel属性の役割と重要性
HTMLのrel属性は、リンクされたリソースと現在の文書との関係を指定する役割を果たします。relは「relationship」の略であり、リンクされたリソースと現在の文書間の関係を明示的に示します。
rel属性は、リンクされたリソースとの関係を説明し、文書の構造と意味を明確に伝える重要な役割を果たします。これにより、ブラウザや検索エンジンなどのウェブツールはリンクを適切に処理し、文書をより正確に理解できます。rel属性はさまざまな値を持つことができ、主に<a>タグで使用されますが、<area>タグや<link>タグなど他のタグにも適用可能です。
rel属性の重要性は以下の通りです。
- 検索エンジン最適化（SEO）：
rel属性を使ってリンク関係を明示することで、検索エンジンは文書をより正確に解析し、関連するリソースを認識して検索結果により適切なリンクを提供できます。 - ユーザーエクスペリエンスの向上：
rel属性を活用してリンクされたリソースとの関係を明示することで、ブラウザは該当リンクを適切に処理し、ユーザーにより良い体験を提供できます - ウェブアクセシビリティの改善：
rel属性を使って代替バージョンの文書との関係を指定することで、アクセシビリティを向上させることができ、ユーザーは支援技術を活用して適切なバージョンの文書にアクセスできます。 - 管理の容易さ：
rel属性を活用して文書間の関連性を明示することで、ウェブサイトの構造と管理が容易になり、保守がしやすくなります。
使い方
<a>、<area>、<link>タグで使用されるrel属性は、それぞれ異なる用途と関係を示す方法があります。これらの重要な違いは以下の通りです。
| タグ | タグの使用目的 | 関係の指定方法 |
|---|---|---|
<a> |
ハイパーリンクの作成 | リンクされたリソースとの関係を明示的に表現 |
<area> |
イメージマップ領域の定義 | 領域とリンクされたリソース間の関係を明示的に表現 |
<link> |
文書と外部リソース間の関係定義 | 文書とリンクされたリソース間の関係を明示的に表現 |
この表を通じて、各タグにおけるrel属性の使用目的と関係指定方法が異なることが確認できます。それぞれのタグではrel属性を用いて異なる種類の関係を表現し、ブラウザや検索エンジンに意味を伝えています。
次に、タグ別に主に使用されるrel属性の値について見ていきます。
注意してください！rel属性は柔軟に使用可能であり、実際に使える値はこれに限定されません。rel属性の値は標準化されていないため、それぞれのウェブサイトやアプリケーションで独自に定義することができます。
したがって、実際に使用可能なrel属性の値はウェブサイト、アプリケーション、あるいは個別の使用目的に応じて異なる場合があります。ウェブ開発者は必要に応じて新しいrel属性の値を定義したり、カスタムの値を使用したりすることが可能です。
以下に示す値は一般的に使われるrel属性の値の例であり、すべての可能な値を網羅しているわけではありません。rel属性は標準化されていないため、ユーザー定義の値が追加されたり、多様な目的に応じた値が使われたりすることがあります。
構文
rel属性の値はスペースで区切って複数の値を指定できます。
<a>タグで主に使われるrel属性の種類と値
rel="author" |
リンクされた文書は現在の文書の著者です。 |
|---|---|
rel="bookmark" |
リンクされた文書がブックマークであることを示します。 |
rel="external" |
リンクされた文書が外部リソースであることを示します。検索エンジンでも、このリンクが外部リソースであることを示すために使用されます。これは、検索エンジンが外部リソースへのリンクを内部リソースへのリンクほど価値のあるものとみなさないため、ページの検索結果の順位を向上させるのに役立ちます。 |
rel="home" |
サイトのホームページへつながるリンクを示します。このリンクはユーザーがウェブサイトのホームページに戻る手段を提供します。検索エンジンはこれによりユーザーのナビゲーションをサポートできます。 |
rel="help" |
リンクされた文書が現在の文書に対するヘルプを提供する文書であることを示します。これはブラウザや検索エンジンがリンク先の文書を理解するのに役立ちます。 |
rel="me" |
リンクされたリソースと現在の文書の作成者または所有者との関係を示します。主にソーシャルメディアのプロフィール、個人ウェブサイト、ブログなどで使用され、リンクされたリソースが現在の文書に関連する個人の公式プロフィールや所有するウェブ資産であることを示します。 |
rel="nofollow" |
検索エンジンが該当リンクをたどらないよう指定します。検索エンジンに自サイトとリンク先ページを関連付けてほしくない場合や、リンク先ページのクロールを避けたい場合に、nofollowの値を使用します。 |
rel="noopener" |
リンクされた文書が開かれる新しいウィンドウやタブにJavaScriptでアクセスできないようにするために使用されます。これはユーザーのセキュリティとプライバシーを保護するのに役立ちます。 |
rel="noreferrer" |
ブラウザがターゲットリソースへ移動する際に Referer ヘッダーを送信せず、リファラー情報を保護するよう指示します。さらに、noopener キーワードが指定された場合と同様に動作するよう指示します。 |
rel="sponsored" |
広告リンクや有料掲載リンク（一般的に「有料リンク」と呼ばれます）は、sponsored 値でマークします。 |
rel="tag" |
リンク先のドキュメントが、現在のページと関連していることを示します。これにより、ブラウザや検索エンジンがリンク先の内容を正しく理解し、適切にインデックスするのに役立ちます。 |
rel="license" |
リンク先のドキュメントが、現在のページに対するライセンス情報を提供していることを示します。これにより、ブラウザや検索エンジンがリンク先の内容を正しく理解し、適切にインデックスするのに役立ちます。 |
rel="next" |
リンク先のドキュメントは、このページシリーズの次のページを示しています。 |
rel="prev" |
リンク先のドキュメントは、このページシリーズの前のページを示しています。 |
rel="search" |
リンク先のドキュメントが、検索エンジンにとって特別な意味を持つものであることを示します。これにより、ブラウザや検索エンジンがリンク先の内容を正しく理解し、適切にインデックスするのに役立ちます。このリンクを使用して、検索エンジンの結果ページを提供します。 |
rel="ugc" |
コメントやフォーラムの投稿など、ユーザー生成コンテンツ（UGC）へのリンクであることを示します。 |
<link>タグで主に使用される rel属性の種類と値
rel="stylesheet" |
HTML文書にCSSスタイルシートをリンクするために使用されます。CSSスタイルシートは、HTML文書にスタイルを適用するために使用されます。 |
|---|---|
rel="icon" |
HTML文書にアイコンをリンクするために使用されます。ファビコン（favicon）として知られるこのアイコンは、ブラウザのタブやアドレスバーに表示されます。ファビコンは、ウェブサイトのブラウザタブ、ブックマーク一覧、ウェブサイトアイコンなどに表示される小さな画像です。 |
rel="alternate" |
代替バージョンの文書との関係を示すリンクを意味します。多言語バージョン、印刷用バージョン、モバイルバージョンなど、同じコンテンツの別バージョン間の関係を明示的に示す際に使用されます。 |
rel="canonical" |
文書の本質的なバージョンを示すリンクを意味します。この属性は主に重複コンテンツの問題を解決するために使用され、検索エンジンに対して主要なページバージョンを通知します。 |
rel="preconnect" |
文書と事前接続（preconnect）されるリソースとの関係を示すリンクを意味します。つまり、リソースのサーバーとの接続を確立するために使用されます。この属性は、ウェブページの読み込み時間を最適化するために使用され、HTML文書の読み込み時間を短縮するのに役立ちます。 |
rel="prefetch" |
事前に読み込まれる（prefetch）リソースとの関係を示すリンクを意味します。この属性は、ブラウザに対して特定のリソースをあらかじめ取得し、キャッシュに保存するよう指示します。これにより、ユーザーがそのリソースにアクセスする際の読み込み時間を短縮できます。ただし、リソースが実際のウェブページで使用されない場合は無駄になる可能性があるため、慎重に使用する必要があります。ページのレンダリングには必要ないものの、ユーザーにとって有用となる可能性のあるリソースを事前に読み込む際に使用されます。 |
rel="dns-prefetch" |
リンクされた外部ドメインのDNSルックアップを事前に実行し、IPアドレスをキャッシュする関係を示すリンクです。これにより、リンク先ドメインへの接続時の待機時間が短縮され、ページの読み込み速度が向上します。 |
rel="preload" |
リソースの事前読み込み（preload）を示すリンクを意味します。この属性は、ブラウザに対して特定のリソースをあらかじめ取得し、キャッシュに保存するよう指示します。これにより、ブラウザはそのリソースを事前にダウンロードし、読み込み時間を短縮できます。rel="preload" はページのレンダリングに必要なリソースを先に読み込むために使用されるのに対し、rel="prefetch" はページのレンダリングには不要だが、ユーザーにとって有用となる可能性のあるリソースを事前に読み込むために使用されるという違いがあります。 |
target="_blank"を使用する際は、rel="noopener noreferrer"の使用が推奨されます
rel="noopener noreferrer"は、セキュリティおよびプライバシー保護の目的で使用されます。
仕様書
| 仕様書 | |
|---|---|
rel
|
HTML Standard #linkTypes |
ブラウザ互換性
| 属性 |
デスクトップ Chrome
|
デスクトップデスクトップ Edge
|
デスクトップ Firefox
|
Safari
|
|---|---|---|---|---|
rel
|
1 | 12 | 1 | 1 |
rel="noopener"
|
49 | 79 | 52 | 10.1 |
rel="noreferrer"
|
16 | 13 | 33 | 5 |