HTMLで外部リンクを設置するとき、下記のような書き方を見たことがあるかと思います。
<a href="リンク先URL" target="_blank" rel="noopener nofollow external noreferrer">
一見すると複雑に見えますが、これらはすべて「リンクの振る舞い」をコントロールするための属性です。
特に「rel」属性に指定する内容は、セキュリティやSEO、ユーザー体験に大きく関わってきます。
rel属性とは？
リンクの関連性（relationship）を示すもので、複数の値を半角スペースで並べて指定できます。
それぞれの意味を見ていきましょう。
noopener（セキュリティ対策）
HTMLで target="_blank" を指定すると、リンク先のページが window.opener を使って、リンク元のページを操作できる状態になります。この状態では、以下のようなリスクが生じます：
リスクの例：
- リンク先がJavaScriptで元ページを書き換える（フィッシングに悪用される可能性がある）
- 元ページを勝手にリダイレクトさせられる
- リンク元のデータや状態が漏れる
このような攻撃は「tabnabbing（タブナビング）」と呼ばれ、実際に過去に確認されたことがある攻撃手法です。
rel="noopener" の役割
rel="noopener" をつけると、リンク先のページから window.opener が使えなくなります。
つまり、リンク元のページを操作できなくなるので、上記のようなリスクを防ぐことができます。
また、最近のブラウザは noopener をデフォルトにする傾向があります（特に Chrome・Firefox・Safari など）。とはいえ、明示的に書いておく方が安全です。
nofollow（SEO対策）
このリンク先を「検索エンジンに評価させたくない」ときに使います。
たとえば広告、アフィリエイト、信頼性の低い外部ページへのリンクなどが該当します。
検索エンジンのクローラーに「このリンク先を辿る必要はないよ」と伝えることができます。
external（外部リンクの明示）
このリンクが外部サイトへのものであることを明示します。
HTML5仕様ではそこまで重視されていませんが、アクセシビリティを意識した設計の一環として使うケースもあります。
noreferrer（リファラ情報の遮断）
リンク元のURL情報（リファラ）をリンク先に渡さないようにします。
たとえば、自分のサイトがどこから来たのかをリンク先に知られたくない場合に使います。
noopenerと一緒に使われることが多いです。
sponsored（広告リンクの明示）
リンクが広告や報酬を伴うもの（例：アフィリエイトリンク）の場合は、Googleのガイドラインに沿ってsponsoredを明示しましょう。
2020年以降、Googleはnofollowに加えてsponsoredやugc（ユーザー投稿）などの明示を推奨しています。
まとめ：rel属性の使い方の基本
- 通常の外部リンク：
rel="noopener noreferrer" - 評価させたくない外部リンク（参考・信頼性が低い）：
rel="noopener nofollow noreferrer" - アフィリエイトや広告リンク：
rel="noopener sponsored noreferrer" - SEOを意識しない内部リンク：
rel属性は特に不要です
