タイトル: rel 属性
SEOタイトル: HTML a タグの rel 属性完全ガイド (nofollow / noopener / noreferrer)
| この記事の要点 |
|
rel 属性とは
HTML の rel 属性は、 / / / タグに付与して、リンク先と現在のページの関係性を機械可読な形で示すものです。SEO、セキュリティ、アクセシビリティの観点から重要な役割を担っています。複数の値をスペース区切りで指定できます。
リンク
外部リンク主要な rel 値
| 値 | 用途 | 主な対象タグ |
|---|---|---|
nofollow | 検索エンジンにリンク評価を渡さない | a |
noopener | 新規タブ攻撃 (Tabnabbing) 防止 | a (target=_blank) |
noreferrer | Referer ヘッダ送信抑止 | a |
sponsored | 広告・スポンサー付きリンク (Google 推奨) | a |
ugc | ユーザ生成コンテンツ内のリンク | a |
canonical | 正規 URL を指定 (重複対策) | link |
alternate | 別言語版・別フォーマット版 | link |
next / prev | ページネーション (現在は非推奨) | link / a |
icon | ファビコン指定 | link |
stylesheet | CSS 読み込み | link |
preconnect / dns-prefetch | 事前 DNS / 接続最適化 | link |
preload | リソース事前読込 | link |
license | ライセンス情報 | a / link |
author | 著者情報 | a / link |
tag | タグ・カテゴリ | a |
1. nofollow — SEO 制御
検索エンジン (主に Google) にリンク先を評価対象から外すよう指示します。リンク元の評価を渡さない (PageRank を流さない) 効果があります。
外部サイト
商品リンク
広告
コメント内リンク用途:
- 掲示板 / コメント欄のスパムリンク対策
- アフィリエイト / 広告リンク
- 信頼性が確認できない外部サイトへのリンク
- ペナルティを避けるための SEO 戦略
2. noopener — セキュリティ (重要)
target="_blank" で新規タブを開くとき、リンク先のページから window.opener 経由で元のページを操作される脆弱性 (Reverse Tabnabbing 攻撃) があります。rel="noopener" でこれを防ぎます:
外部リンク
外部リンク2021 年以降のブラウザでは target="_blank" に自動で noopener 相当の挙動が適用されますが、明示することが推奨されます (古いブラウザ・互換性のため)。
3. noreferrer — プライバシー
リンク経由でアクセスしたとき、HTTP Referer ヘッダを送らないよう指示します。リンク元 URL を隠したい場合に使います:
プライバシー保護リンク
新規タブで開く注意: noreferrer は noopener の効果も含むため、両方書く必要は技術的にはありません。ただし古いブラウザ対応のために両方書くのが慣習。
4. sponsored / ugc — Google が 2019 年に追加
Google は 2019 年 9 月、従来の nofollow を補完する新しい rel 値を導入しました:
| 値 | 用途 | 例 |
|---|---|---|
sponsored | 広告・有料リンク | アフィリエイト、スポンサー記事 |
ugc | ユーザ生成コンテンツ | コメント、フォーラム投稿 |
nofollow | 上記以外で評価したくないリンク | 信用できない外部サイト |
Google は 2020 年 3 月以降、これらをヒントとして扱う (絶対的指示ではなく) 方針に変更されました。
5. canonical — 重複コンテンツ対策
で正規 URLを指定します。同じ内容が複数 URL で表示される場合 (印刷版・モバイル版・パラメータ付き URL) に必須:
6. リソース最適化 (preconnect / preload)
外部リンクのベストプラクティス
| リンクの種類 | 推奨 rel |
|---|---|
| 信頼できる外部リンク (新規タブ) | noopener noreferrer |
| 信頼できない外部リンク | noopener noreferrer nofollow |
| 広告・アフィリエイト | noopener noreferrer sponsored |
| ユーザコメント内のリンク | noopener noreferrer ugc |
| 同一サイト内リンク | 通常不要 |
記述例
会社概要
W3C
スポンサー商品
コメント内リンク
Alice
CC BY 4.0WordPress / 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 "$label";
}セキュリティとプライバシーの整理
| リスク | 対策 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 にすると不自然と判定されることがあるので使い分けを。