過去バージョン

この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;background:#fffbea;border:1px solid #f4c430;margin:1em 0;width:100%"><tr><td style="background:#f4c430;color:#000;font-weight:bold;padding:8px">この記事の要点</td></tr><tr><td style="padding:10px"><ul><li><strong>rel 属性</strong>はリンク先との関係を示す。SEO / セキュリティの両方で重要</li><li><strong>rel="noopener"</strong>: target="_blank" で開いたタブからの window.opener アクセスを禁止 (★必須)</li><li><strong>rel="noreferrer"</strong>: Referer ヘッダを送らない。noopener も暗黙的に含む</li><li><strong>rel="nofollow"</strong>: SEO 評価を渡さない。広告 / ユーザ投稿リンク</li><li><strong>rel="sponsored" / "ugc"</strong>: nofollow より詳細な分類 (Google 2019)</li></ul></td></tr></table>
<h2>rel 属性とは</h2>

<p><strong>rel</strong> 属性 (relationship) はリンク元 (現在のページ) とリンク先の関係を表します。SEO / セキュリティ / アクセシビリティに影響します。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- 外部リンクの推奨形 -->
<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer">
  Example
</a>

<!-- 広告リンク -->
<a href="https://shop.example.com"
   rel="sponsored noopener">
  公式ショップ
</a></code></pre>
<h2>rel 属性の値一覧 (a タグ向け主要)</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>値</th><th>用途</th><th>影響</th></tr></thead>
<tbody>
<tr><td><strong>noopener</strong></td><td>新タブで window.opener アクセス禁止</td><td>セキュリティ強化 ★必須</td></tr>
<tr><td><strong>noreferrer</strong></td><td>Referer ヘッダ送信なし</td><td>セキュリティ + プライバシー (noopener も含む)</td></tr>
<tr><td><strong>nofollow</strong></td><td>SEO 評価を渡さない</td><td>SEO 中立</td></tr>
<tr><td><strong>sponsored</strong></td><td>広告 / アフィリエイト</td><td>SEO 中立 (Google 推奨)</td></tr>
<tr><td><strong>ugc</strong></td><td>ユーザ投稿のリンク</td><td>SEO 中立 (Google 推奨)</td></tr>
<tr><td><strong>external</strong></td><td>外部サイトへのリンク</td><td>セマンティック / CSS で装飾可</td></tr>
<tr><td><strong>author</strong></td><td>著者情報へのリンク</td><td>セマンティック</td></tr>
<tr><td><strong>license</strong></td><td>ライセンス情報</td><td>セマンティック</td></tr>
<tr><td><strong>bookmark</strong></td><td>パーマリンク (記事内見出しなど)</td><td>セマンティック</td></tr>
<tr><td><strong>tag</strong></td><td>タグへのリンク</td><td>セマンティック</td></tr>
<tr><td><strong>me</strong></td><td>自分の他プロフィール</td><td>IndieAuth / Mastodon の確認</td></tr>
</tbody>
</table>

<h2>target="_blank" + rel="noopener" の重要性</h2>

<p><code>target="_blank"</code> で新タブを開くと、開かれた先のページから <code>window.opener</code> 経由で<strong>元のページを操作される脆弱性</strong> (Reverse Tabnabbing) があります:</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-javascript">// 悪意あるリンク先で実行されると…
window.opener.location = &apos;https://phishing.example.com&apos;;
// → ユーザが元タブに戻ったときフィッシングサイトに見える</code></pre>
<p>これを防ぐのが <code>rel="noopener"</code>:</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- ❌ NG: opener にアクセス可能 -->
<a href="https://untrusted.example" target="_blank">外部</a>

<!-- ✅ OK: opener アクセス不可 -->
<a href="https://untrusted.example" target="_blank" rel="noopener noreferrer">外部</a></code></pre>
<p><strong>2025 年現在、Chrome / Safari / Firefox は <code>target="_blank"</code> でも自動的に noopener が効く</strong>ようになっていますが、<strong>明示することが推奨</strong>です (古いブラウザ / Lighthouse 警告対策)。</p>

<h2>noopener と noreferrer の違い</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>属性</th><th>window.opener</th><th>Referer ヘッダ</th><th>推奨</th></tr></thead>
<tbody>
<tr><td>なし</td><td>触れる ★危険</td><td>送信される</td><td>外部リンクには NG</td></tr>
<tr><td><strong>noopener</strong></td><td>null になる</td><td>送信される</td><td>セキュリティだけ確保</td></tr>
<tr><td><strong>noreferrer</strong></td><td>null になる</td><td>送信されない</td><td>プライバシーも</td></tr>
<tr><td><strong>noopener noreferrer</strong></td><td>null</td><td>送信されない</td><td>★ 安全パイ</td></tr>
</tbody>
</table>

<h2>SEO 観点: nofollow / sponsored / ugc</h2>

<p>Google は 2019 年に <strong>nofollow をヒント扱い</strong>に変更し、新たに 2 つの値を導入:</p>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e8f5e9"><th>値</th><th>用途</th><th>例</th></tr></thead>
<tbody>
<tr><td><strong>nofollow</strong></td><td>信頼できないリンク全般</td><td>コメント欄、信頼できないソース</td></tr>
<tr><td><strong>sponsored</strong></td><td>広告 / アフィリエイト / 有料</td><td>バナー広告、PR リンク、A8/楽天</td></tr>
<tr><td><strong>ugc</strong></td><td>User Generated Content (掲示板等)</td><td>ユーザ投稿のリンク</td></tr>
</tbody>
</table>

<p>新ガイドラインでは「広告は<strong>sponsored</strong>、ユーザ投稿は<strong>ugc</strong>、その他不明は<strong>nofollow</strong>」が推奨です。</p>

<h2>JavaScript で動的に追加するときの注意</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-javascript">// ❌ window.open は noopener を別途渡す必要
window.open(url, &apos;_blank&apos;);
// → opener にアクセス可

// ✅ noopener オプション
window.open(url, &apos;_blank&apos;, &apos;noopener,noreferrer&apos;);

// ✅ または手動で opener を null
const newWin = window.open(url, &apos;_blank&apos;);
if (newWin) newWin.opener = null;

// 動的 a タグ生成
const a = document.createElement(&apos;a&apos;);
a.href = url;
a.target = &apos;_blank&apos;;
a.rel = &apos;noopener noreferrer&apos;;  // ★ 必ず付ける
document.body.appendChild(a);
a.click();</code></pre>
<h2>link タグの rel (a タグ以外)</h2>

<p>rel 属性は <code><link></code> や <code><area></code> でも使われ、別の意味を持ちます:</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- スタイルシート -->
<link rel="stylesheet" href="style.css">

<!-- 正規 URL (重複コンテンツ対策) -->
<link rel="canonical" href="https://example.com/article">

<!-- 別言語版 (hreflang と組み合わせ) -->
<link rel="alternate" hreflang="en" href="https://example.com/en/article">

<!-- RSS / Atom -->
<link rel="alternate" type="application/rss+xml" href="/feed.xml">

<!-- ファビコン -->
<link rel="icon" href="/favicon.ico">

<!-- プリロード / プリフェッチ -->
<link rel="preload" href="/font.woff2" as="font" crossorigin>
<link rel="prefetch" href="/next-page.html">
<link rel="preconnect" href="https://api.example.com">
<link rel="dns-prefetch" href="https://cdn.example.com">

<!-- 前/次ページ -->
<link rel="prev" href="/page/1">
<link rel="next" href="/page/3"></code></pre>
<h2>Lighthouse / セキュリティチェックでの警告</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#fff3e0"><th>警告</th><th>原因</th><th>対処</th></tr></thead>
<tbody>
<tr><td>Links to cross-origin destinations are unsafe</td><td>target="_blank" に noopener なし</td><td>rel="noopener noreferrer" 追加</td></tr>
<tr><td>Avoid using target="_blank" without rel="noopener"</td><td>同上</td><td>同上</td></tr>
<tr><td>Mixed content</td><td>HTTPS ページから HTTP リンク</td><td>HTTPS 化</td></tr>
</tbody>
</table>

<h2>用途別の rel 推奨テンプレート</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e8f5e9"><th>リンクの種類</th><th>推奨 rel</th></tr></thead>
<tbody>
<tr><td>内部リンク (自サイト内)</td><td>不要</td></tr>
<tr><td>信頼できる外部リンク + 新タブ</td><td><code>noopener noreferrer</code></td></tr>
<tr><td>広告 / アフィリエイト</td><td><code>sponsored noopener noreferrer</code></td></tr>
<tr><td>ユーザ投稿コメント中のリンク</td><td><code>ugc nofollow noopener noreferrer</code></td></tr>
<tr><td>信頼できないソース</td><td><code>nofollow noopener noreferrer</code></td></tr>
<tr><td>SNS シェア / 投稿ボタン</td><td><code>noopener noreferrer</code></td></tr>
</tbody>
</table>

<h2>FAQ</h2>

<p><strong>Q: 内部リンクにも rel を付けるべき?</strong><br />
A: 不要。同一オリジン内ならセキュリティ問題は基本起きません。</p>

<p><strong>Q: nofollow を付けるとリンク先の SEO に悪影響?</strong><br />
A: いいえ。リンク先には影響なし、リンク元のページが「保証しない」と Google に伝えるだけです。</p>

<p><strong>Q: rel="noopener" と rel="noreferrer" どちらか一方でいい?</strong><br />
A: <code>noreferrer</code> は <code>noopener</code> も自動で含むので、両方書く必要は厳密にはありません。ただし古いブラウザや混乱を避けるため<strong>両方明記</strong>が一般的です。</p>