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属性の値以外にも指定できる値はあります。詳しくは以下の参考サイトを確認してみてください。

参考サイト、参考書籍

コメント投稿またはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。
Twitterで返信する場合はコチラから。