タイトル: rel属性
SEOタイトル: HTML a タグ rel 属性完全ガイド — noopener/noreferrer/nofollow の使い分け
| この記事の要点 |
|
rel 属性とは
rel 属性 (relationship) はリンク元 (現在のページ) とリンク先の関係を表します。SEO / セキュリティ / アクセシビリティに影響します。
Example
公式ショップ
rel 属性の値一覧 (a タグ向け主要)
| 値 | 用途 | 影響 |
|---|---|---|
| noopener | 新タブで window.opener アクセス禁止 | セキュリティ強化 ★必須 |
| noreferrer | Referer ヘッダ送信なし | セキュリティ + プライバシー (noopener も含む) |
| nofollow | SEO 評価を渡さない | SEO 中立 |
| sponsored | 広告 / アフィリエイト | SEO 中立 (Google 推奨) |
| ugc | ユーザ投稿のリンク | SEO 中立 (Google 推奨) |
| external | 外部サイトへのリンク | セマンティック / CSS で装飾可 |
| author | 著者情報へのリンク | セマンティック |
| license | ライセンス情報 | セマンティック |
| bookmark | パーマリンク (記事内見出しなど) | セマンティック |
| tag | タグへのリンク | セマンティック |
| me | 自分の他プロフィール | IndieAuth / Mastodon の確認 |
target="_blank" + rel="noopener" の重要性
target="_blank" で新タブを開くと、開かれた先のページから window.opener 経由で元のページを操作される脆弱性 (Reverse Tabnabbing) があります:
// 悪意あるリンク先で実行されると…
window.opener.location = 'https://phishing.example.com';
// → ユーザが元タブに戻ったときフィッシングサイトに見えるこれを防ぐのが rel="noopener":
外部
外部2025 年現在、Chrome / Safari / Firefox は target="_blank" でも自動的に noopener が効くようになっていますが、明示することが推奨です (古いブラウザ / Lighthouse 警告対策)。
noopener と noreferrer の違い
| 属性 | window.opener | Referer ヘッダ | 推奨 |
|---|---|---|---|
| なし | 触れる ★危険 | 送信される | 外部リンクには NG |
| noopener | null になる | 送信される | セキュリティだけ確保 |
| noreferrer | null になる | 送信されない | プライバシーも |
| noopener noreferrer | null | 送信されない | ★ 安全パイ |
SEO 観点: nofollow / sponsored / ugc
Google は 2019 年に nofollow をヒント扱いに変更し、新たに 2 つの値を導入:
| 値 | 用途 | 例 |
|---|---|---|
| nofollow | 信頼できないリンク全般 | コメント欄、信頼できないソース |
| sponsored | 広告 / アフィリエイト / 有料 | バナー広告、PR リンク、A8/楽天 |
| ugc | User Generated Content (掲示板等) | ユーザ投稿のリンク |
新ガイドラインでは「広告はsponsored、ユーザ投稿はugc、その他不明はnofollow」が推奨です。
JavaScript で動的に追加するときの注意
// ❌ window.open は noopener を別途渡す必要
window.open(url, '_blank');
// → opener にアクセス可
// ✅ noopener オプション
window.open(url, '_blank', 'noopener,noreferrer');
// ✅ または手動で opener を null
const newWin = window.open(url, '_blank');
if (newWin) newWin.opener = null;
// 動的 a タグ生成
const a = document.createElement('a');
a.href = url;
a.target = '_blank';
a.rel = 'noopener noreferrer'; // ★ 必ず付ける
document.body.appendChild(a);
a.click();link タグの rel (a タグ以外)
rel 属性は や でも使われ、別の意味を持ちます:
Lighthouse / セキュリティチェックでの警告
| 警告 | 原因 | 対処 |
|---|---|---|
| Links to cross-origin destinations are unsafe | target="_blank" に noopener なし | rel="noopener noreferrer" 追加 |
| Avoid using target="_blank" without rel="noopener" | 同上 | 同上 |
| Mixed content | HTTPS ページから HTTP リンク | HTTPS 化 |
用途別の rel 推奨テンプレート
| リンクの種類 | 推奨 rel |
|---|---|
| 内部リンク (自サイト内) | 不要 |
| 信頼できる外部リンク + 新タブ | noopener noreferrer |
| 広告 / アフィリエイト | sponsored noopener noreferrer |
| ユーザ投稿コメント中のリンク | ugc nofollow noopener noreferrer |
| 信頼できないソース | nofollow noopener noreferrer |
| SNS シェア / 投稿ボタン | noopener noreferrer |
FAQ
Q: 内部リンクにも rel を付けるべき?
A: 不要。同一オリジン内ならセキュリティ問題は基本起きません。
Q: nofollow を付けるとリンク先の SEO に悪影響?
A: いいえ。リンク先には影響なし、リンク元のページが「保証しない」と Google に伝えるだけです。
Q: rel="noopener" と rel="noreferrer" どちらか一方でいい?
A: noreferrer は noopener も自動で含むので、両方書く必要は厳密にはありません。ただし古いブラウザや混乱を避けるため両方明記が一般的です。