rel属性で指定できる値｜a要素・link要素など【HTML】

今回は、a要素・link要素・area要素で使用できるrel属性のまとめとなります。

rel属性は、現在のページとリンク先との関係性を表すことに使用する属性となり、a要素とarea要素、link要素によって指定できる値は異なります。

まとめでは、個人的によく使用するrel属性の値を、指定できる要素別にまとめました。

a要素・area要素のみで指定できるrel属性の値

nofollow｜推薦しないリンク先

nofollowは、リンク先が重要ではない文書、推薦する文書ではないことを表し、検索エンジンに対し、リンク先をクロールさせない（たどらない）ように指示します。（リンク先が信頼できないコンテンツや、インデックスさせたくない場合などに使用）

Googleのnofollowに対する処理は、以下のリンク先を参考にしてみてください。

特定のリンクに対して rel="nofollow" を使用する - Search Console ヘルプ

noreferrer｜リファラーを送信しない

noreferrerは、ユーザーがリンク先に移動する際、リンク先に対して、現在のページのアドレスなどのデータをブラウザがリファラーとして送信しないようにします。

noopener｜リンク先が現在のページを変更不可

noopenerは、セキュリティ対策として使用する値となり、ユーザーが新しいタブ・ウィンドウでリンク先に移動する際、リンク先の文書が現在のページを変更出来ないようにします。

詳しくは、以下のリンク先を参考にしてみてください。

リンクのへの rel=noopener 付与による Tabnabbing 対策 | blog.jxck.io

bookmark｜関連するリンク

bookmarkは、関連のある文書へのリンクを表します。

home｜トップページへのリンク

homeは、サイトのトップページへのリンクを表します。

link要素のみで指定できるrel属性の値

canonical｜インデックスさせるページ

canonicalは、検索エンジンにインデックスさせるページを表します。（重複するコンテンツを避けるため使用される値となり、現在のページを検索エンジンにインデックスさせないようにし、指定したリンク先をインデックスするようにします。）

stylesheet｜スタイルシート

stylesheetは、スタイルシートを表します。

icon｜アイコン・ファビコン

iconは、アイコン（ファビコンなど）を表します。

apple-touch-icon｜iOSで使用するアイコン

apple-touch-iconは、iOSで使用するアイコン（ホーム画面のショートカットアイコンなど）を表します。

a要素・area要素・link要素で指定できるrel属性の値

prev｜一つ前の文書へのリンク

prevは、一つ前の文書へのリンクを表します。（記事一覧ページにある「前のページ」へのリンクなど）

next｜次の文書へのリンク

nextは、次の文書へのリンクを表します。（記事一覧ページにある「次のページ」へのリンクなど）

first｜最初の文書へのリンク

firstは、最初の文書へのリンクを表します。（記事一覧ページにある「最初のページ」へのリンクなど）

last｜最後の文書へのリンク

lastは、最後の文書へのリンクを表します。（記事一覧ページにある「最後のページ」へのリンクなど）

alternate｜変わりの文書へのリンク

alternateは、代わりとなる文書 を表します。（別言語版、別フォーマット版など）

まとめ

今回紹介したrel属性の値以外にも指定できる値はあります。詳しくは以下の参考サイトを確認してみてください。