目次
- はじめに：別タブで開くリンク、本当に正しく書けていますか？
- 結論：別タブリンクは「target＋rel」がセット
- HTMLリンクの基本構造
- target="_blank"の役割
- 何が起きる？
- なぜrelが必要なのか？
- reverse tabnabbingとは？
- rel="noopener"の役割
- rel="noreferrer"の役割
- 別タブにすべきリンクの基準
- ✔ 別タブ推奨
- ✖ 別タブ非推奨
- SEOへの影響はある？
- よくある間違い
- 間違い①：relを省略
- 間違い②：全部別タブにする
- 間違い③：buttonで遷移させる
- DevToolsで確認する方法
- アクセシビリティ配慮
- CSSでは制御できない
- スマホ表示時の注意
- 実務チェックリスト
- まとめ：別タブリンクは「安全設計」が前提
はじめに：別タブで開くリンク、本当に正しく書けていますか？
リンクを設置するとき、
- 外部サイトだけ別タブで開きたい
- 今のページを残しておきたい
- でも「なんとなく」書いている
…こういう状態、意外と多いです。
私も昔は、
<a href="..." target="_blank">これだけでOKだと思っていました。
でも実はそれ、セキュリティ的に不十分なんです。
この記事では、
- target="_blank"の正しい使い方
- rel属性がなぜ必要なのか
- セキュリティリスクの正体
- SEO・UXへの影響
- 実務での使い分け基準
まで、初心者〜中級者向けに徹底解説します。
結論：別タブリンクは「target＋rel」がセット
安全に別タブで開く書き方はこれです。
<a href="https://example.com"
target="_blank"
rel="noopener noreferrer">
リンク
</a>これが現在の基本形です。
HTMLリンクの基本構造
通常のリンクはこうです。
<a href="https://example.com">リンク</a>デフォルトでは「同じタブ」で開きます。
target="_blank"の役割
<a href="https://example.com" target="_blank">何が起きる？
- 新しいタブ（またはウィンドウ）で開く
- 元ページは残る
外部サイトに遷移させるときによく使います。
なぜrelが必要なのか？
target="_blank"だけだと、
新しく開いたページから元ページを操作できる可能性があります。
これを「reverse tabnabbing」と呼びます。
reverse tabnabbingとは？
仕組みはこうです。
- あなたのサイトから外部サイトを開く
- 外部サイトが
window.openerを使う - 元ページを書き換えられる可能性がある
つまり、
悪意のあるページに書き換えられるリスクがある。
rel="noopener"の役割
rel="noopener"これを指定すると、
新タブ側から元ページにアクセスできなくなります。
rel="noreferrer"の役割
rel="noreferrer"- リファラ（参照元URL）を送らない
- セキュリティ強化
初心者の方は、
noopener noreferrerはセットで覚えてOKです。
別タブにすべきリンクの基準
✔ 別タブ推奨
- 外部サイト
- 公式ドキュメント
- PDFファイル
- SNSリンク
✖ 別タブ非推奨
- サイト内リンク
- 記事一覧→詳細
- メニューリンク
内部リンクを別タブにするとUXが悪化します。
SEOへの影響はある？
target="_blank"自体はSEOに直接影響しません。
ただし：
- rel="nofollow"の有無
- 外部リンクの質
- ユーザー体験
は間接的に影響します。
よくある間違い
間違い①：relを省略
<a href="..." target="_blank">→ セキュリティ的に非推奨
間違い②：全部別タブにする
ユーザーが混乱します。
間違い③：buttonで遷移させる
<button onclick="location.href='...'">ページ遷移はaタグを使うべきです。
DevToolsで確認する方法
- リンク要素を検証
- target属性確認
- rel属性確認
- consoleエラー確認
構造は常にDOMで確認。
アクセシビリティ配慮
別タブで開く場合は明示しましょう。
<a href="..." target="_blank" rel="noopener noreferrer">
公式サイト（別タブで開きます）
</a>またはアイコン表示。
ユーザーへの配慮は信頼につながります。
CSSでは制御できない
別タブ制御はHTMLの役割。
CSSでは開き方を変更できません。
役割分担を理解しましょう。
スマホ表示時の注意
- 新タブ＝新画面扱いになる場合あり
- 戻る操作が分かりづらくなる
UXを考えて使い分ける。
実務チェックリスト
✔ 外部リンクのみ別タブ
✔ target="_blank"使用
✔ rel="noopener noreferrer"指定
✔ 別タブであることを明示
✔ 不要な別タブ乱用なし
まとめ：別タブリンクは「安全設計」が前提
リンクを別タブで開くのは簡単です。
でも、
安全に書けている人は意外と少ない。
正しい書き方は：
- target="_blank"
- rel="noopener noreferrer"
これをセットで使うこと。
小さな属性ですが、
サイトの信頼性を守る重要なポイントです。
まずは外部リンクから、
正しい書き方に統一していきましょう。