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

2017/09/15

area要素のrel属性は現在のリソースと、リンク先のリソースとの関係をキーワードで指定するための属性です。a要素のrel属性と仕組みは同じですが、サポート状況が違うのでご注意下さい。

概要

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

値

下記のキーワードを指定する。複数指定するには、半角スペース( )で区切る。キーワードの種類はa要素のrel属性をご参考下さい。

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

説明

a要素のrel属性の説明をご参考下さい。

デモ

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

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

<p>←noreferrerなし noreferrerあり→</p>
<p>
<img src="./image.png" usemap="#my-circle" width="200" height="200">
<map name="my-circle">
	<area shape="rect" coords="0,0, 100,200" href="/referrer" target="_blank" alt="リファラー確認">
	<area shape="rect" coords="100,0, 200,200" href="/referrer" target="_blank" rel="noreferrer">
</map>
</p>