過去バージョン

この本文には実行可能なタグ等が含まれるため、安全のため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><code>rel</code> 属性</strong> = リンク先と現在のページの関係を示すメタ情報</li><li><strong><code>rel="nofollow"</code></strong> — 検索エンジンに「このリンクを辿るな・信用するな」と伝える (SEO 用)</li><li><strong><code>rel="noopener"</code></strong> — <code>target="_blank"</code> 時のセキュリティ対策 (Tabnabbing 攻撃防止)</li><li><strong><code>rel="noreferrer"</code></strong> — Referer ヘッダ送信を抑止</li><li>Google は 2019 年から <strong><code>sponsored</code></strong> (広告) / <strong><code>ugc</code></strong> (ユーザ投稿) も推奨</li></ul></td></tr></table>
<h2>rel 属性とは</h2>

<p><strong>HTML の <code>rel</code> 属性</strong>は、<code><a></code> / <code><link></code> / <code><area></code> / <code><form></code> タグに付与して、<strong>リンク先と現在のページの関係性</strong>を機械可読な形で示すものです。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" rel="nofollow">リンク</a>

<!-- 複数指定 -->
<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer nofollow">外部リンク</a></code></pre>
<h2>主要な rel 値</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><code>nofollow</code></td><td>検索エンジンにリンク評価を渡さない</td><td>a</td></tr>
<tr><td><code>noopener</code></td><td>新規タブ攻撃 (Tabnabbing) 防止</td><td>a (target=_blank)</td></tr>
<tr><td><code>noreferrer</code></td><td>Referer ヘッダ送信抑止</td><td>a</td></tr>
<tr><td><code>sponsored</code></td><td>広告・スポンサー付きリンク (Google 推奨)</td><td>a</td></tr>
<tr><td><code>ugc</code></td><td>ユーザ生成コンテンツ内のリンク</td><td>a</td></tr>
<tr><td><code>canonical</code></td><td>正規 URL を指定 (重複対策)</td><td>link</td></tr>
<tr><td><code>alternate</code></td><td>別言語版・別フォーマット版</td><td>link</td></tr>
<tr><td><code>next / prev</code></td><td>ページネーション (現在は非推奨)</td><td>link / a</td></tr>
<tr><td><code>icon</code></td><td>ファビコン指定</td><td>link</td></tr>
<tr><td><code>stylesheet</code></td><td>CSS 読み込み</td><td>link</td></tr>
<tr><td><code>preconnect / dns-prefetch</code></td><td>事前 DNS / 接続最適化</td><td>link</td></tr>
<tr><td><code>preload</code></td><td>リソース事前読込</td><td>link</td></tr>
<tr><td><code>license</code></td><td>ライセンス情報</td><td>a / link</td></tr>
<tr><td><code>author</code></td><td>著者情報</td><td>a / link</td></tr>
<tr><td><code>tag</code></td><td>タグ・カテゴリ</td><td>a</td></tr>
</tbody>
</table>

<h2>1. nofollow — SEO 制御</h2>

<p>検索エンジン (主に Google) にリンク先を<strong>評価対象から外す</strong>よう指示します。リンク元の評価を渡さない (PageRank を流さない) 効果があります。</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://untrusted.example.com" rel="nofollow">外部サイト</a>

<!-- アフィリエイトリンク (sponsored の方が推奨) -->
<a href="https://affiliate.com/ref=123" rel="nofollow sponsored">商品リンク</a>

<!-- 広告 -->
<a href="https://ads.example.com" rel="sponsored">広告</a>

<!-- コメント欄のリンク -->
<a href="https://user-comment-link.com" rel="ugc nofollow">コメント内リンク</a></code></pre>
<p><strong>用途</strong>:</p>

<ul>
<li>掲示板 / コメント欄のスパムリンク対策</li>
<li>アフィリエイト / 広告リンク</li>
<li>信頼性が確認できない外部サイトへのリンク</li>
<li>ペナルティを避けるための SEO 戦略</li>
</ul>

<h2>2. noopener — セキュリティ (重要)</h2>

<p><code>target="_blank"</code> で新規タブを開くとき、リンク先のページから <code>window.opener</code> 経由で<strong>元のページを操作される</strong>脆弱性 (Reverse Tabnabbing 攻撃) があります。<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"><!-- 危険 -->
<a href="https://untrusted.com" target="_blank">外部リンク</a>
<!-- ↑ untrusted.com から window.opener.location = &apos;phishing.com&apos; される可能性 -->

<!-- 安全 -->
<a href="https://untrusted.com" target="_blank"
   rel="noopener">外部リンク</a></code></pre>
<p><strong>2021 年以降のブラウザでは <code>target="_blank"</code> に自動で <code>noopener</code> 相当の挙動</strong>が適用されますが、明示することが推奨されます (古いブラウザ・互換性のため)。</p>

<h2>3. noreferrer — プライバシー</h2>

<p>リンク経由でアクセスしたとき、<strong>HTTP Referer ヘッダを送らない</strong>よう指示します。リンク元 URL を隠したい場合に使います:</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"
   rel="noreferrer">プライバシー保護リンク</a>

<!-- noopener と併用 (一般的) -->
<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer">新規タブで開く</a></code></pre>
<p><strong>注意</strong>: <code>noreferrer</code> は <code>noopener</code> の効果も含むため、両方書く必要は技術的にはありません。ただし古いブラウザ対応のために<strong>両方書くのが慣習</strong>。</p>

<h2>4. sponsored / ugc — Google が 2019 年に追加</h2>

<p>Google は 2019 年 9 月、従来の <code>nofollow</code> を補完する<strong>新しい rel 値</strong>を導入しました:</p>

<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><code>sponsored</code></td><td>広告・有料リンク</td><td>アフィリエイト、スポンサー記事</td></tr>
<tr><td><code>ugc</code></td><td>ユーザ生成コンテンツ</td><td>コメント、フォーラム投稿</td></tr>
<tr><td><code>nofollow</code></td><td>上記以外で評価したくないリンク</td><td>信用できない外部サイト</td></tr>
</tbody>
</table>

<p>Google は 2020 年 3 月以降、<strong>これらをヒントとして扱う</strong> (絶対的指示ではなく) 方針に変更されました。</p>

<h2>5. canonical — 重複コンテンツ対策</h2>

<p><code><link rel="canonical"></code> で<strong>正規 URL</strong>を指定します。同じ内容が複数 URL で表示される場合 (印刷版・モバイル版・パラメータ付き URL) に必須:</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><head>
  <link rel="canonical" href="https://example.com/article/123">
</head>

<!-- 自身を指す canonical も有効 (推奨) --></code></pre>
<h2>6. リソース最適化 (preconnect / preload)</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- DNS のみ事前解決 -->
<link rel="dns-prefetch" href="https://cdn.example.com">

<!-- DNS + TCP/TLS 接続まで先行 -->
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>

<!-- 重要リソースの先読み -->
<link rel="preload" href="/css/critical.css" as="style">
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>

<!-- 次ページの先読み (推測ナビゲーション) -->
<link rel="prefetch" href="/next-page.html"></code></pre>
<h2>外部リンクのベストプラクティス</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><code>noopener noreferrer</code></td></tr>
<tr><td>信頼できない外部リンク</td><td><code>noopener noreferrer nofollow</code></td></tr>
<tr><td>広告・アフィリエイト</td><td><code>noopener noreferrer sponsored</code></td></tr>
<tr><td>ユーザコメント内のリンク</td><td><code>noopener noreferrer ugc</code></td></tr>
<tr><td>同一サイト内リンク</td><td>通常不要</td></tr>
</tbody>
</table>

<h2>記述例</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- 通常の内部リンク -->
<a href="/about">会社概要</a>

<!-- 信頼できる外部リンク -->
<a href="https://www.w3.org"
   target="_blank"
   rel="noopener noreferrer">W3C</a>

<!-- 広告 -->
<a href="https://ads.example.com/click?id=1"
   target="_blank"
   rel="noopener noreferrer sponsored">スポンサー商品</a>

<!-- コメント欄 (ブログプラットフォーム) -->
<a href="https://user-blog.example.com"
   rel="noopener noreferrer ugc nofollow">コメント内リンク</a>

<!-- 著者ページ -->
<a href="/author/alice" rel="author">Alice</a>

<!-- ライセンス表記 -->
<a href="https://creativecommons.org/licenses/by/4.0/"
   rel="license">CC BY 4.0</a></code></pre>
<h2>WordPress / CMS での自動付与</h2>

<p>主要 CMS は外部リンクに自動で rel 属性を付ける機能を持っています:</p>

<ul>
<li><strong>WordPress</strong> — 5.6 以降は<code>target="_blank"</code> に自動で <code>noopener</code></li>
<li><strong>Markdown プロセッサ</strong> — プラグインで一括付与可能</li>
<li><strong>Laravel</strong> — Blade ディレクティブで一括処理</li>
</ul>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-php">// Laravel Blade で一括処理
function externalLink($url, $label) {
    $rel = &apos;noopener noreferrer&apos;;
    if (!str_contains($url, config(&apos;app.url&apos;))) {
        $rel .= &apos; nofollow&apos;;
    }
    return "<a href=\"$url\" target=\"_blank\" rel=\"$rel\">$label</a>";
}</code></pre>
<h2>セキュリティとプライバシーの整理</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>リスク</th><th>対策 rel</th></tr></thead>
<tbody>
<tr><td>Reverse Tabnabbing (リンク先がオリジナルを書換)</td><td><code>noopener</code></td></tr>
<tr><td>Referer 漏洩 (URL に機密が乗る)</td><td><code>noreferrer</code></td></tr>
<tr><td>悪意あるサイトの SEO 流入</td><td><code>nofollow</code></td></tr>
<tr><td>広告開示義務</td><td><code>sponsored</code></td></tr>
</tbody>
</table>

<h2>FAQ</h2>

<p><strong>Q: <code>noopener</code> と <code>noreferrer</code> は両方書くべき？</strong><br />
A: <code>noreferrer</code> だけで <code>noopener</code> の効果も含まれますが、古いブラウザ対応のため<strong>両方書くのが推奨</strong>。最新ブラウザのみ対象なら <code>noreferrer</code> 単体でも可。</p>

<p><strong>Q: 内部リンクにも rel は必要？</strong><br />
A: 通常不要。<code>target="_blank"</code> で開く場合は <code>noopener</code> を付けると安全。</p>

<p><strong>Q: <code>nofollow</code> を付けると検索順位が下がる？</strong><br />
A: 自サイトの順位には直接影響しません。リンク先サイトに評価を渡さないだけ。<strong>全部 nofollow にすると不自然</strong>と判定されることがあるので使い分けを。</p>