この記事ではaタグのrel属性のnoopenerとnoreferrerについて解説します。
SEOへの影響やWordPressの外部リンクで自動でnoopenerが付与される件についても言及しています。
rel=”noopener noreferrer”とは？
noopenerは新しいタブで外部リンク（外部サイトへのリンク）を開く場合に使用する場合があります。
noreferrerは外部リンクの際に利用を考えます。
内部リンクの場合は基本的にはnoopener、noreferrerのどちらも付ける必要はありません。
（内部リンクの場合でも使うケースはあります。）
rel=”noopener”の役割
noopenerについては新しいタブで開く場合に効果を発揮します。
（aタグで新しいタブを開く場合はtarget属性でtarget=”_blank”とします。）
rel属性にnoopenerを付けることで、新しいタブを別スレッドで開くことができます。
そうすることで以下の2つの観点に対して効果が生まれます。
セキュリティ観点
元タブと新しいタブで別スレッドになるため、新しいタブから元タブへの操作を制御することができます。
noopenerを付けないと、JavaScriptでwindow.openerというオブジェクトが操作できるようになり、
新しいタブで開いたページから元タブのページの操作が可能となります。
参考：
MDN web docs : window.opener
パフォーマンス観点
元タブと新しいタブで別スレッドになることで、ページの処理も別々になります。
そのため、新しいタブで開いたページでとても重い処理が走ったとしても、元タブのページへの影響を抑えることができます。
逆も同様で、元タブのページで重い処理を実行していても、新しいタブのページへの影響を抑制できます。
rel=”noreferrer”の役割
rel属性にnoreferrerを付けることで、参照先に対して参照元のリンクを渡さないようにすることができます。
（電話で例えると非通知電話みたいなものです。）
参照元リンク情報を渡さないことで、渡したくない情報（ユーザーIDなど）がURLリンクに含まれていても大丈夫になります。
ちなみに、Googleアナリティクスのレポートの「集客→すべてのトラフィック→参照元/メディア」で参照元が確認できます。
noopenerとnoreferrerの違い
外部リンクを開く際に利用される場合があるという点は似ていますが、役割は全く異なります。
おまじないの様にセットで設定している人も多いかと思いますが、
上記で説明したように機能は異なります。
SEO的にどう？
SEO的な話は憶測の域を出ませんが、noopener、noreferrerを付ける付けないは
SEOには影響しないと個人的には考えています。
SEOに影響するしないに限らず、
rel=”noopener”の役割、rel=”noreferrer”の役割で
説明した役割を十分に理解して設定をするしないを決めると良いでしょう。
ちなみにですが、noopener、noreferrerに少し似ている、
同じくaタグのrel属性であるnofollowはSEO的に影響あるので、
rel=”nofollow”を付ける付けないは十分に都度検討した方が良いでしょう。
WordPressで自動でつくrel=”noopener”は消したほうが良い？
WordPressの投稿のビジュアルモードで「リンクを新しいタブで開く」にチェックした状態で、
リンクを作成すると自動でaタグにrel=”noopener”が付きます。
noopenerを付けたくないという特別な理由がある人以外は、そのまま付けておいても良いでしょう。