リンクのaタグで使われる rel=”○○”の表記がありますが、これはrel属性と呼ばれ、これはリンク先となるリソースの位置づけを定義する記述です。
この記述によって、自分のサイトの評価を直接的に上げるSEO対策にはなりません。ですが、リンク先へ自分のサイトからリンクパワーが流れていくリンクジュース対策など、適切なrel属性の記述を行う必要があります。
この記事は、そんなrel属性について
- rel属性とは？
- 使えるrel属性の一覧。
- よく使うrel属性の役割と効果。
の内容です。
rel属性とは？
rel属性は、リンクを作るaタグの中でよく見かけます。記述する際は、以下のような感じで書きます。
<a href="リンク先URL" rel="rel属性">ここにリンクテキストなど</a>rel属性というのは、現在のドキュメントとリンク先のドキュメントの関係性を示すもので、一つのaタグに複数のrel属性を記述することができます。
利用可能なrel属性の一覧
rel属性の値として使用することができるものについては、以下が一覧です。
| 属性値 | 意味 | link | a | area | form |
|---|---|---|---|---|---|
| alternate | 代替文書 （例えば別言語版、別フォーマット版など） | ○ | ○ | ○ | – |
| canonical | 現在の文書の優先URLを指定する | ○ | – | – | – |
| author | 著者情報 | ○ | ○ | ○ | – |
| bookmark | 文書の固定リンク | – | ○ | – | – |
| dns-prefetch | ユーザエージェントがターゲットリソースの生成元の DNS 解決を先行して実施するよう指定 | ○ | – | – | – |
| external | 外部サイトへのリンクであることを示す | – | ○ | ○ | ○ |
| help | ヘルプへのリンク | ○ | ○ | ○ | ○ |
| icon | アイコンをインポートします | ○ | – | – | – |
| modulepreload | ユーザエージェントが先行してモジュールスクリプトをフェッチし、文書のモジュールマップに格納しなければならないことを指定します | ○ | – | – | – |
| license | ライセンス文書 | ○ | ○ | ○ | – |
| next | 連続した文書における次の文書 | ○ | ○ | ○ | – |
| nofollow | 重要でないリンク | – | ○ | ○ | – |
| noopener | target 属性を持つリンクを開く際、Window.opener プロパティを設定しません | – | ○ | ○ | – |
| noreferrer | ユーザーがリンクを移動する際、リファラを送信しません | – | ○ | ○ | – |
| opener | target 属性を持つリンクを開く際、Window.opener プロパティを設定します | – | ○ | ○ | – |
| pingback | Pingback 1.0 仕様に基づき、ピングバック（トラックバック）用の URI を指定します | ○ | – | – | – |
| preconnect | リンク先のリソースにあらかじめ接続するように指定します （link 要素でのみ使用可能） | ○ | – | – | – |
| prefetch | リンク先のリソースをあらかじめキャッシュするように指定します （link 要素でのみ使用可能） | ○ | – | – | – |
| preload | リンク先のリソースを事前に読み込むように指定します （link 要素でのみ使用可能） | ○ | – | – | – |
| prerender | リンク先のリソースを読み込んでオフスクリーンでレンダリングしておくように指定します | ○ | – | – | – |
| prev | 連続した文書における前の文書 | ○ | ○ | ○ | – |
| search | 検索機能を提供するリソース | ○ | ○ | ○ | – |
| stylesheet | スタイルシート | ○ | – | – | – |
| tag | 文書に指定されたタグのページ | – | ○ | ○ | – |
よく使うものから、あまり見かけないものまで結構な量があります。
これらを踏まえ、よく使うrel属性「nofollow」「noreferrer」「noopener」「sponsored」の4つの役割について解説していきます。
よく使うrel属性の役割
よく使うrel属性の役割についてです。
- nofollow
- noreferrer
- noopener
- sponsored
の4つについて解説していきます。
nofollowの役割
nofollowは、以下のような場合に使用される属性です。
- リンク先が信頼できるサイトとは言えない場合
- 自分のサイトからそのリンク先をクロールさせたくないとき
- 自社のサイトとリンク先のページの関連性を断つ役割
この属性を使うと、リンク先へPageRankを受け渡さない効果がある為、アフィリエイターや、SEOの担当している方はこの値の有無を結構気にしています。
それ以外の使い方としては、コメントスパム対策が挙げられます。
コメント欄に書き込まれたリンクに自動でnofollowを付与することにより、コメント欄を悪用してPageRankを獲得するスパム行為の対策をすることができます。
noreferrerの役割
noreferrerは、リンク先へリファラ（参照元）を渡さないようにする属性です。
電話で例えると、noreferrerを付けることで非通知でかける電話のようなもので、主に以下の用途で使われます。
- 渡したくない情報がリンクURLに含まれている場合
- リンク先に情報を渡したくたい時
- target=_blankをつける時（noopenerと一緒に）
このように、noreferrerは、自分のサイトからの流入であることが分からないようにしたい時以外に、ユーザーIDなどがURLに含まれてしまっている場合に使われます。
noopenerの役割
noopenerは、主に新しいタブでリンク先のページを開く場合に効果を発揮します。
主に、以下の用途で使われます。
- 新しいタブでリンク先のページを開く時
主な用途は1個ですが、効果として「パフォーマンス低下回避」「脆弱性の回避」の2つが挙げられます。
noopenerの2つの効果について見ていきましょう。
noopenerを付けて元タブと新しいタブがそれぞれ別スレッドになることで、ページの処理も別々になります。
そうすることで、新しいタブで開いたページのレンダリングが始っても元タブのページへの影響を抑えることができます。
また、元タブのページで重い処理を実行していても、新しいタブのページへの影響を抑制できます。
もう一つの「脆弱性回避」の効果は、非常に重要です。
このnoopenerは、Tabnabbingと呼ばれるフィッシング詐欺等に使われる手法への対策を行うことができます。
target=”_blank”にnoopenerを付けない場合、JavaScriptでwindow.openerというオブジェクトが操作できるようになってしまい、 新しいタブで開いたページから元タブのページの操作が可能となってしまう為です。
その為、WordPress 4.8 ぐらいからリンクにtarget=”_blank”を付けると自動的に「noopener noreferrer」が付与されるようになっているので、WordPressを使っている場合は特に意識する必要はありませんが、静的なページを作ってローンチする場合は、target=”_blank” にnoopenerがきちんとついているかはチェックするようにしましょう。
sponsoredの役割
sponsoredは、2019年9月に追加された広告などの有料リンクに付与する属性です。
役割はnofollowとほぼ一緒で、以下のような目的で使用されます。
- Googleに広告のリンクであることが明確に伝える。
- 広告のバナーやアフィリエイトのリンク
上記のsponsoredが加わった今も、nofollowを付けるのが一般的ですが、明確な広告意図がある場合、sponsoredを使った方がベターです。
その為、リンク先のページに併せてnofollowと使い分けをするようにしましょう。
さいごに
rel属性は、よく使うnoopener・noreferrer・noopener・sponsoredだけでなく、結構な数の種類があり、奥が深い内容です。
最後に、この記事の内容をまとめると
- リンク先に応じてnofollowとnoreferrerを使う。
- target=”_blank”にはnoopenerを記述。
- 必要に応じてrel属性を記述しよう。
です。
サイトやブログを運営している方は、是非適切なrel属性ができるよう学んでおきましょう。
参考サイト
参考rel 属性HTML5 タグリファレンス
