rel=”noopener”とrel=”noreferrer”の違いと使い方を解説

今回はrel=”noopener”とrel=”noreferrer”の違いと使い方を解説します。

noopener noreferrerの使い方

noopener、noreferrerは新しいタブで外部リンク（外部サイトへのリンク）を開く場合に使用します。

つまり、target=”_blankを使用して、新規リンクで開くようにする時ですね。

WordPressでは外部リンクを設定した場合、自動でnoopenerが付く仕様になっています。

noopener noreferrerの書き方

当ブログの場合は以下の書き方になります。

noopenerのみの書き方

<a href="https://prorautatie.net/" target="_blank" rel="noopener"></a>

noopener noreferrerを併記する書き方

<a href="https://prorautatie.net/" target="_blank" rel="noopener noreferrer"></a>

noopener noreferrerは新しいタブで外部リンクを開く場合に使用する

内部リンクの場合どちらも付ける必要はありません。

noopener noreferrerの効果

セキュリティ

新規に外部リンクを開くにはリスクがあります。

リンク先に指定したサイトが悪意あるサイトであったり、ハッキングされているサイトだった場合に、リンク先から自分の見ていたリンク元ページが操作される可能性があります。

rel=”noopener”を設定することで防ぐことができます。

パフォーマンス

元タブと新しいタブで別スレッドになることで、ページの処理も別々になります。

そのため、新しいタブで開いたページでとても重い処理が走ったとしても、元タブのページへの影響を抑えることができます。

逆も同様で、元タブのページで重い処理を実行していても、新しいタブのページへの影響を抑制できます。

rel=”noopener”を設定することでページスピードを上げることができます。

noopenerは古いブラウザには未対応

noopenerは古いブラウザでは対応してません。

noreferrrerの効果

noreferrerには、「参照元のリンク情報を渡さないようにする」という役割があります。

また、noopenerに対応していないブラウザ対策として使用する場合もあります。

リンク先に対して参照元のリンク情報を渡さないようにすることができます。

noreferrerはアフィリエイトでは使用しない方がいい？

先述の通り、noreferrerには「リンク先に対して参照元のリンク情報を渡さないようにする」効果があります。

noreferrerを付けることで、アフィリエイトリンクがどのページで踏まれたのかがわからなくなり、成果が発生しなくなる可能性があります。

rel=”noopener noreferrer”と記載する必要はある？

noreferrerはnoopenerが対応していないブラウザを補完する働きがあるのですが、現在使用されているほとんどのブラウザでnoopenerはサポートされています。

そのため、rel=”noopener noreferrer”でなく、rel=”noopener”でも弊害はほぼありません。