◀ 4.

HTML a タグの rel 属性完全ガイド (nofollow / noopener / noreferrer)

▶
編集
この記事の要点
  • rel 属性 = リンク先と現在のページの関係を示すメタ情報
  • rel="nofollow" — 検索エンジンに「このリンクを辿るな・信用するな」と伝える (SEO 用)
  • rel="noopener" — target="_blank" 時のセキュリティ対策 (Tabnabbing 攻撃防止)
  • rel="noreferrer" — Referer ヘッダ送信を抑止
  • Google は 2019 年から sponsored (広告) / ugc (ユーザ投稿) も推奨

rel 属性とは

HTML の rel 属性は、<a> / <link> / <area> / <form> タグに付与して、リンク先と現在のページの関係性を機械可読な形で示すものです。SEO、セキュリティ、アクセシビリティの観点から重要な役割を担っています。複数の値をスペース区切りで指定できます。

<!-- 基本構文 -->
<a href="https://example.com" rel="nofollow">リンク</a>

<!-- 複数指定 -->
<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer nofollow">外部リンク</a>

主要な rel 値

値用途主な対象タグ
nofollow検索エンジンにリンク評価を渡さないa
noopener新規タブ攻撃 (Tabnabbing) 防止a (target=_blank)
noreferrerReferer ヘッダ送信抑止a
sponsored広告・スポンサー付きリンク (Google 推奨)a
ugcユーザ生成コンテンツ内のリンクa
canonical正規 URL を指定 (重複対策)link
alternate別言語版・別フォーマット版link
next / prevページネーション (現在は非推奨)link / a
iconファビコン指定link
stylesheetCSS 読み込みlink
preconnect / dns-prefetch事前 DNS / 接続最適化link
preloadリソース事前読込link
licenseライセンス情報a / link
author著者情報a / link
tagタグ・カテゴリa

1. nofollow — SEO 制御

検索エンジン (主に Google) にリンク先を評価対象から外すよう指示します。リンク元の評価を渡さない (PageRank を流さない) 効果があります。

<!-- ユーザ投稿 / 信用できない外部リンク -->
<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>

用途:

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

2. noopener — セキュリティ (重要)

target="_blank" で新規タブを開くとき、リンク先のページから window.opener 経由で元のページを操作される脆弱性 (Reverse Tabnabbing 攻撃) があります。rel="noopener" でこれを防ぎます:

<!-- 危険 -->
<a href="https://untrusted.com" target="_blank">外部リンク</a>
<!-- ↑ untrusted.com から window.opener.location = 'phishing.com' される可能性 -->

<!-- 安全 -->
<a href="https://untrusted.com" target="_blank"
   rel="noopener">外部リンク</a>

2021 年以降のブラウザでは target="_blank" に自動で noopener 相当の挙動が適用されますが、明示することが推奨されます (古いブラウザ・互換性のため)。

3. noreferrer — プライバシー

リンク経由でアクセスしたとき、HTTP Referer ヘッダを送らないよう指示します。リンク元 URL を隠したい場合に使います:

<a href="https://example.com"
   rel="noreferrer">プライバシー保護リンク</a>

<!-- noopener と併用 (一般的) -->
<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer">新規タブで開く</a>

注意: noreferrer は noopener の効果も含むため、両方書く必要は技術的にはありません。ただし古いブラウザ対応のために両方書くのが慣習。

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

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

値用途例
sponsored広告・有料リンクアフィリエイト、スポンサー記事
ugcユーザ生成コンテンツコメント、フォーラム投稿
nofollow上記以外で評価したくないリンク信用できない外部サイト

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

5. canonical — 重複コンテンツ対策

<link rel="canonical"> で正規 URLを指定します。同じ内容が複数 URL で表示される場合 (印刷版・モバイル版・パラメータ付き URL) に必須:

<head>
  <link rel="canonical" href="https://example.com/article/123">
</head>

<!-- 自身を指す canonical も有効 (推奨) -->

6. リソース最適化 (preconnect / preload)

<!-- 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">

外部リンクのベストプラクティス

リンクの種類推奨 rel
信頼できる外部リンク (新規タブ)noopener noreferrer
信頼できない外部リンクnoopener noreferrer nofollow
広告・アフィリエイトnoopener noreferrer sponsored
ユーザコメント内のリンクnoopener noreferrer ugc
同一サイト内リンク通常不要

記述例

<!-- 通常の内部リンク -->
<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>

WordPress / CMS での自動付与

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

  • WordPress — 5.6 以降はtarget="_blank" に自動で noopener
  • Markdown プロセッサ — プラグインで一括付与可能
  • Laravel — Blade ディレクティブで一括処理
// Laravel Blade で一括処理
function externalLink($url, $label) {
    $rel = 'noopener noreferrer';
    if (!str_contains($url, config('app.url'))) {
        $rel .= ' nofollow';
    }
    return "<a href=\"$url\" target=\"_blank\" rel=\"$rel\">$label</a>";
}

セキュリティとプライバシーの整理

リスク対策 rel
Reverse Tabnabbing (リンク先がオリジナルを書換)noopener
Referer 漏洩 (URL に機密が乗る)noreferrer
悪意あるサイトの SEO 流入nofollow
広告開示義務sponsored

FAQ

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

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

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

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. href属性
  2. target属性
  3. download 属性
  4. rel 属性
  5. hreflang属性
  6. type属性
2026-06-11 07:07:02 guest 313

人気ページ

最近更新/作成されたページ