aタグのrel=”noopener noreferrer”の意味とは？

rel=”noopener noreferrer”とは？

勉強中に気になって調べたことの備忘録です。
以前、Next.jsを勉強している際に、<a></a>タグが下記のようになっていた。
(hrefの中身は私のgithubのリンクですのでお気になさらず、、、)

<a
 href="https://github.com/funayamateppei?tab=repositories"
 target="_blank"
 rel="noopener noreferrer"
>

rel="noopener"　とは？

noopenerについては新しいタブで開く場合に効果を発揮します。
今回は target="_blank" だったので書かれていました。

rel属性にnoopenerを付けることで、新しいタブを別スレッドで開くことができる。

rel="noreferrer"　とは？
rel属性にnoreferrerを付けることで、参照先に対して参照元のリンクを渡さないようにすることができます。
（電話で例えると非通知電話みたいなものです。）

参照元リンク情報を渡さないことで、渡したくない情報（ユーザーIDなど）がURLリンクに含まれていても大丈夫になります。

ちなみに、Googleアナリティクスのレポートの「集客→すべてのトラフィック→参照元/メディア」で参照元が確認できます。

noopenerとnoreferrerの違い

外部リンクを開く際に利用される場合があるという点は似ていますが、役割は全く異なるそうです。

おまじないの様にセットで設定していたが、今回で理解できた！！