タイトル: target属性
SEOタイトル: HTML target属性 完全ガイド（_blank / _self / _parent / _top・noopener noreferrer・セキュリティ）
| この記事の要点 |
target 属性とは
target 属性は HTML の 要素や 要素で、リンク先や送信先をどのブラウジングコンテキスト（タブ / ウィンドウ / フレーム）に開くかを指定する属性です。
基本構文
テキスト
主な値
| 値 | 意味 |
|---|---|
| _self（既定） | 現在のタブ／フレームで開く |
| _blank | 新しいタブ／ウィンドウで開く |
| _parent | 親フレームで開く（iframe 階層が無ければ _self と同じ） |
| _top | 最上位のブラウザウィンドウで開く（全フレーム解除） |
| 任意の名前 | 同名のブラウジングコンテキスト（フレーム / ウィンドウ）で開く |
使用例
1. 新規タブで開く
Example を新規タブで開く
2. 親フレームで開く
親フレームで開く3. 最上位ウィンドウで開く（フレーム破棄）
トップに戻る4. 指定 iframe 内で開く
contentFrame に表示
contentFrame に表示rel="noopener noreferrer" を必ず付ける
target="_blank" でリンクを開くと、開かれた側のページから JavaScript で window.opener 経由で元ページを操作できてしまう「tabnabbing 攻撃」のリスクがありました。
| rel 値 | 効果 |
|---|---|
| noopener | 新規タブから window.opener を null にし、元ページへの干渉を防ぐ |
| noreferrer | Referer ヘッダを送らず、window.opener も null（プライバシー優先） |
最新のブラウザでは target="_blank" に対し暗黙的に noopener が適用されますが、古いブラウザやクローラ・SEO 工具の都合もあり、明示するのが推奨です。
外部サイト
アクセシビリティ上の注意
- 新規タブで開くリンクは事前に知らせる（テキストやアイコンで明示）と親切
- スクリーンリーダー向けに
aria-labelや視覚アイコン (↗等) を併用 - 業務システム等で必要なリンクのみ _blank にする。全リンクを _blank にすると操作性が落ちる
Example
frame / iframe 廃止と target
HTML5 で / は廃止されました。現在 target で意味があるのは主に _self / _blank / _top / _parent / iframe の name です。
JavaScript からの代替
// target="_blank" と同じ
window.open('https://example.com', '_blank', 'noopener,noreferrer');
// 引数なしで開くと従来は opener が漏れていた。
// 'noopener' を必ず指定する。form 要素での target
でも target 属性が使えます。たとえば「フォーム送信結果を別タブで表示」「PDF ダウンロードフォームを新規タブで開く」用途で便利です。
SEO への影響
rel="noreferrer"を付けると、リンク先のアクセス解析で参照元 URL が記録されなくなる。広告計測や被リンク分析に影響することがあるrel="nofollow"はリンクジュース（PageRank）を渡さない指示。target とは独立に併用可rel="sponsored"/rel="ugc"も併用可能（広告 / ユーザー投稿リンクの明示）
よくある誤り
| NG | OK | 理由 |
|---|---|---|
target="_BLANK" | target="_blank" | 大文字小文字は厳密には区別しないが、慣例として小文字 |
target="_blank" 単体 | target="_blank" rel="noopener noreferrer" | 古いブラウザで tabnabbing 攻撃を許す |
target="new" | target="_blank" | new は1 つのウィンドウ名として再利用される |
全リンク _blank | 外部リンク等限定 | 戻る操作の混乱・タブの乱立を招く |