📚
target='_blank'使用時の rel='noopener noreferrer'使い分け方
💡 結論
- アフィリエイトなど解析を必要とするリンクを除く外部リンクには rel="noreferrer" を付ける
- 内部リンクには付けない
これだけでOKです。
ちなみに、モダンブラウザでは target="_blank" 使用時に noopener が自動で付与されます。
理由
外部リンク
target="_blank" を使うと新しいタブで開きますが、
リンク先から元ページが書き換えられる「タブ・ナッピング」の危険があります。
rel="noreferrer" を付けることで：
- 元ページを操作できなくなる（
noopener効果あり） - リファラー情報を送らない（プライバシー保護）
リファラー（Referrer） とは、アクセスログのデータに記録される情報のひとつで、サイトを訪れたユーザーが前に参照していたリンク元の情報を指す
✅ つまり、外部リンクは以下のように書くのが安全（※アフィリエイトや解析用リンクを除く）
<a href="https://example.com" target="_blank" rel="noreferrer">
外部サイトへ
</a>
<Link> は Next.js 内部ページを高速に遷移させるためのコンポーネントなので、
外部リンクでは使わないのがベストです。
内部リンク
自サイト内で rel="noreferrer" を付けると、
「どのページから来たか（リファラー情報）」がアクセス解析で分からなくなります。
❌ よって、内部リンクでは付けない方が正確なデータが取れます。
<Link href="/about" target="_blank">Aboutページへ</Link>
参考
最後に
target="_blank" を使うと自動で noopener が付くようになった今も、この仕様を知らない人は意外と多いはず(私は知りませんでした笑)。
この記事をきっかけに、リンクの書き方をアップデートしていきましょう。
Discussion