target=”_blank” と rel の使い方｜noopener・noreferrer・nofollow

target=”_blank” と rel の使い方とは

<a> の target はリンク先を開く場所、rel はリンク先との関係を表す属性です。外部サイトを新しいタブで開く target="_blank" はよく使われますが、rel="noopener" を付けるべきか、noreferrer や nofollow は何が違うのかで迷う人が多い分野です。

MDN は、target="_blank" を指定すると暗黙的に rel="noopener" と同じ挙動になる、と説明しています。つまり、現行ブラウザでは window.opener を使った昔のタブ乗っ取り攻撃（タブナビング）は既定で防がれます。

基本（構文・仕組み）

target の主な値です。

値 動き
_self 現在のタブで開く（既定）
_blank 通常は新しいタブで開く
_parent 親フレームで開く
_top 最上位のフレームで開く

rel の主な値です。スペース区切りで複数指定できます。

値 意味
noopener 開いたページに window.opener を渡さない
noreferrer Referer ヘッダーを送らない（noopener の効果も含む）
nofollow 検索エンジンにリンクを辿らない・評価を渡さないよう伝える
sponsored 広告・有償リンクであることを示す
ugc 利用者が投稿したコンテンツ内のリンクであることを示す

noopener と noreferrer はセキュリティ・プライバシーの値、nofollow・sponsored・ugc は検索エンジン向けの値です。目的が違うので、必要に応じて組み合わせます。

サンプルコード（実行結果つき）

<p><a id="a1" href="https://example.com/" target="_blank" rel="noopener noreferrer">外部（新規タブ）</a></p>
<p><a id="a2" href="https://example.com/ad" target="_blank" rel="sponsored noopener">広告リンク</a></p>
<p><a id="a3" href="/comment" rel="ugc nofollow">UGC</a></p>

アフィリエイトなど広告リンクは sponsored を付けます。コメント欄のリンクは ugc、運営が推奨できないリンクには nofollow を選びます。内部リンクを新しいタブで開く必要は通常ありません。

動作確認（検証環境と結果）

  • 環境: Windows 11、headless Microsoft Edge 154.0.4258.53（Chromium系、render.ps1）。
  • 確認内容: 上記3つのリンクの target、rel、relList をJSで取得。
  • 結果: a1 は target=_blank rel=noopener noreferrer、a2 は relList=sponsored|noopener、a3 は target が空で relList=ugc|nofollow でした。属性値は書いたとおりにDOMへ反映され、relList がトークン単位で扱えることを確認しました。
  • 未検証: rel 無しの target="_blank" で window.opener が null になること。これは MDN の記載に基づく説明で、この環境では実際の遷移先との通信は試していません。
  • 追加確認: カンマ区切り rel="noopener, noreferrer" は relList=noopener,|noreferrer となり、noopener として認識されませんでした。
  • ログ: C:Tempks2techtestsa-target-blank-rel.md。

target=”_blank” と rel の使い方の注意点

  • 新しいタブで開くと、戻るボタンが使えず、利用者が戸惑う場合があります。開く前にリンクテキストへ「（新しいタブで開きます）」のように明記するとアクセシビリティが向上します。
  • noreferrer を付けると、リンク先の解析ツールで参照元が「direct」扱いになります。計測に影響する点に注意します。
  • nofollow で評価を絞れるのは、検索エンジンがその値を尊重する範囲に限られます。
  • target に任意の名前(例: target="win1")を指定すると同名のタブを再利用します。意図せず上書きされないよう注意します。

target=”_blank” と rel の使い方でよくあるミス

  • target="_blank" を付けて rel="noopener" を付け忘れたと気にして、全リンクに過剰な指定をする（現行ブラウザでは暗黙で効きます）。
  • rel="nofollow noreferrer" を広告リンクに使い、sponsored を省く。
  • rel="noopener, noreferrer" のようにカンマで区切る（HTMLの仕様はスペース区切りです。Google は検索向けの値についてはカンマ区切りも受け付けるとしていますが、ブラウザはカンマを区切りとみなしません。headless Edge で rel="noopener, noreferrer" の relList を調べると noopener, と noreferrer の2トークンになり、relList.contains("noopener") は false でした。スペースで書きます）。
  • JSの window.open() で開く際に noopener を指定していない。
  • href が # のダミーのままで、target だけ設定している。

ブラウザ対応・バージョン

target="_blank" による暗黙の noopener は、MDN の互換性データでは Chrome 88、Firefox 79、Safari 12.1 から採用されています（2026年10月時点。最新は MDN で確認してください）。それより古い環境では効かないため、旧ブラウザをサポートする場合は rel="noopener" を明示しておくと確実です。sponsored と ugc は検索エンジン向けの値であり、ブラウザの動作は変わりません。

target=”_blank” と rel の使い方のチェックリスト

  • [ ] 新しいタブで開く必然性があるリンクだけに target="_blank" を付けている。
  • [ ] 旧環境も考慮するなら rel="noopener" を明示している。
  • [ ] 広告リンクに sponsored を付けている。
  • [ ] ユーザー投稿のリンクに ugc を付けている。
  • [ ] 新しいタブで開くことを利用者に伝えている。

target=”_blank” と rel の使い方のFAQ（よくある質問）

Q. noopener と noreferrer はどちらを付ければよいですか。
A. セキュリティ目的なら noopener で十分です。参照元情報も渡したくない場合に noreferrer を追加します。

Q. nofollow は付けないとSEOに悪影響ですか。
A. 外部リンクのすべてに必要というわけではありません。広告・投稿など性質に応じて使い分けます。

Q. メールや電話のリンクにも target は必要ですか。
A. mailto: や tel: では通常不要です。

筆者の見解（target=”_blank” と rel の使い方）

私見では、外部リンクを新しいタブで開くかどうかは、利用者が元のページへ戻って作業を続けたい場面（資料の参照など）に限って選ぶのがよいと考えます。セキュリティ面は暗黙の noopener に任せつつ、テンプレートでは rel="noopener" を併記しておくと、古い環境にも安全側に倒せます。広告のラベル付けは、検索エンジンへの正直な申告として sponsored を忘れないことが大事です。

target=”_blank” と rel の使い方の関連項目

出典（一次情報）

タイトルとURLをコピーしました