別タブへのリンク記述「target=”_blank”とrel=”noopener noreferrer”」の見直しを

2024年7月23日

Webサイトにてリンク先を別タブで開く用途で、a要素へのtarget="_blank"の指定に加えてrel="noopener noreferrer"が指定されていることがあります。

しかし現時点では、リンクを別タブで開く目的にて「target="_blank"とrel="noopener noreferrer"をセットで記述」というのは不要です。そのような無思考な運用になっていれば見直した方が良いでしょう。特にrel="noreferrer"の指定はアクセス解析に影響を及ぼします。

主要ブラウザーでnoopenerは対応済み、noreferrerは特定用途で利用を

2024年現在、主要ブラウザーはa要素へのtarget="_blank"の指定でrel="noopener"とみなして相応の挙動をします。Safariは2019年から、Firefoxは2020年から、ChromeとEdgeは2021年から対応済みです。そのためrel属性「noopener」の指定は不要ということになります。

target="_blank" を <a> 要素に設定すると、暗黙的に rel の動作が rel="noopener" を設定した場合と同様、 window.opener を設定しないようになりました。
rel=noopener – HTML: ハイパーテキストマークアップ言語 | MDN

rel属性「noreferrer」は、「遷移先にリファラー情報を渡さない」という明確な用途があれば単独で指定すればよいです。外部サイトに対して意図しない情報送信を防ぐなどのセキュリティ面でのリスク回避の用途が考えられます。

サイト内リンクでのnoreferrer指定はアクセス解析に支障をきたす

一方で、サイト内リンクにrel属性「noreferrer」を指定するとアクセス解析にて支障をきたします。「サイト内のページAからページBにどれだけ遷移した」といった情報が欠損します。

比較的見かける例として「お問い合わせフォームを別タブで開く」というケースがあります。「どのページからお問い合わせフォームに遷移したか」という情報は、お問い合わせのCTA（行動喚起要素）がどれだけ機能しているかや仮説検証の側面で把握するに値する内容です。

しかし、リンクのa要素にrel属性「noreferrer」が指定されていた場合、その把握が困難になります。リンクで「リファラー情報を渡さない」という指定をしているため、当然ながらフォームページの参照元URLからは該当リンクのあるページを判別できません。

CMSにてリンクを別タブで開く指定をする際にrel="noopener noreferrer"が標準で出力されるケースもあり、注意が必要です。そのCMSの仕様を変更していただいたりオプションにしていただきたいところですが（可能かはともかく）、日頃のWebサイトの運用で無思考で「target="_blank"とrel="noopener noreferrer"をセットで記述」と捉えているのであれば、ぜひ見直してほしいところです。

1）現在の主要ブラウザは a 要素に target="_blank" がある＝ rel="noopener" と見なすので基本記述不要
2）rel="noreferrer" のみ書いても rel="noopener" と同じ挙動になるので併記は不要
3）rel="noreferrer" が必要かどうかは Referrer-Policy をどうしたいかによるhttps://t.co/sVUkuehi8n
— Yoshiki Kato (@burnworks) July 19, 2024

まとめ

リンクを別タブで開く用途でのrel属性「noopener」「noreferrer」は不要である。2024年現在、主要ブラウザはa要素へのtarget="_blank"の指定にてrel="noopener"とみなして相応の挙動をする
rel="noreferrer"は「遷移先にリファラー情報を渡さない」という明確な用途であれば単独で指定すればよい。ただしアクセス解析では、遷移先ページにて該当リンクのあるページをリファラー情報から取得しない。特にサイト内リンクで使用するとアクセス解析にて支障をきたす
CMSにて自動で指定されるケースもあり、注意を