rel属性 - リンク先のリソースとの関係

2017/09/15

a要素のrel属性は現在のリソースと、リンク先のリソースとの関係をキーワードで指定するための属性です。空白文字(white space)で区切って複数のキーワードを指定できます。この属性に従ってユーザーエージェントが動作を変えることがあります。例えば、rel属性にnofollowが含まれる時、googlebotはリンク先を辿りません。

概要

要素: a要素
DOM Interface: HTMLAnchorElement.rel
仕様書: https://html.spec.whatwg.org/multipage/links.html#attr-hyperlink-rel

値

下記のキーワードを指定する。複数指定するには、半角スペース( )で区切る。

alternate: リンク先のリソースが、現在のリソースの代替表現であることを示す。
author: リンク先のリソースが、現在のリソースの著者を説明するページ、または著者との連絡先であることを意味する。
bookmark: リンク先のリソースが、現在のリソースのパーマリンクであることを意味する。
external: リンク先のリソースが、外部のリソースであることを意味する。
help: リンク先のリソースが、現在のリソースの内容についての説明であることを意味する。
license: リンク先のリソースが、現在のリソースのライセンスの説明であることを意味する。
next: リンク先のリソースが、現在のリソースの次に参照すべきであることを意味する。
nofollow: リンク先のリソースが、現在のリソースとは無関係であることを意味する。一般的な検索エンジンはリンク先を辿らないためSEOの評価に貢献しない。資料提示のために有害サイトにリンクする場合などに用いる。
noopener: 新しいコンテキストでリンクを開いた時に、開かれたコンテキストと現在のコンテキストとの関係を断ち切るようユーザーエージェントに指示する。開かれたコンテキストのwindow.openerの値がなくなる。フィッシングサイト対策に有効なので、新しいコンテキストで外部サイトを開くリンクには常にこの値を付与することが推奨される。特にユーザーが自由にURLを投稿できるコメントシステムなどで有用。
noreferrer: リンク先のリソースに、リファラーを送らないようにユーザーエージェントに指示する。
prev: リンク先のリソースが、現在のリソースの前に参照すべきであることを意味する。
search: リンク先のリソースが、現在のリソース、及び、その関連リソースを検索するためのページであることを意味する。
tag: リンク先のリソースが、現在のリソースが紐付けられているタグのページであることを意味する。

<a href="https://example.com/" rel="nofollow">有害なサイトへのリンク</a>
<a href="https://example.com/" rel="noopener noreferrer" target="_blank">どこか分からないサイトへのリンク</a>
<a href="https://example.com/" rel="license">ライセンスについて</a>

説明

rel属性にはユーザーエージェントにヒントを与えるだけの値と、実際に挙動を制御する値があります。SEO目的だけでなく安全方策としても、広汎に利用できる属性と言えます。

例えば、ユーザーが自由に投稿できるコメントシステムなどにおいて、リンクには必ずnoopenerを付けるようにしましょう。フィッシング行為などの防止になります。noopenerは新しいウィンドウで開かなければ不要ですが、ユーザーが右クリックで新しく開く場合を考えると、基本的に全てのリンクに付けておくのが無難でしょう。noopenerが具体的にどのような働きをするかは、こちらの記事で説明しています。

<a href="https://example.com/" target="_blank" rel="noopener">不明なリンク</a>

noreferrerを加えればブラウザはリファラーを送らないため、信頼できないリンク先との関わりが、より減るでしょう。

<a href="https://example.com/" target="_blank" rel="noopener noreferrer">不明なリンク</a>

また、SEO上もセキュアーにしたい場合は、nofollowも加えておきましょう。例え有害なサイトのリンクが存在してしまっても、ユーザーエージェント(特に検索エンジン)は、リンク元とリンク先を無関係だと解釈してくれます。

<a href="https://example.com/" target="_blank" rel="nofollow noopener noreferrer">不明なリンク</a>

気を付けなければいけないのは、アフィリエイトなどで使用するリンクです。これにnoopenerやnoreferrerを付けると、ASP(事業者)によってはリンク元のデータを調査できないため報酬が無効になる、などといったことも考えられます。この点は事前に先方に確認しておきましょう。

デモ

rel属性のデモを用意しました。下記はnoreferrerを付けたリンクと付けないリンクです。リンク先でリファラーが取得できるか確認してみて下さいね。

<!-- このコードは編集できます。 -->

<p>
	<a href="/referrer" target="_blank">noreferrerなし</a>
</p>

<p>
	<a href="/referrer" target="_blank" rel="noreferrer">noreferrerあり</a>
</p>