HTMLのrel属性とは？SEO・セキュリティに関わるリンク設定を完全ガイド

Webサイトでリンクを貼るとき、ただURLを指定するだけで満足していませんか？

実は、リンクには「このリンクはどういう関係のものか」を検索エンジンやブラウザに伝える仕組みがあります。それがrel属性です。

rel属性を正しく使い分けるだけで、SEO評価のコントロール、セキュリティの強化、アクセス解析の精度向上と、地味ですが確実に効果がある改善ができます。

この記事では、rel属性の基本から実務での使い分けまで、コードと一緒に解説します。最後に判断チャートも用意したので、「このリンクにはどのrel属性をつけるべき？」と迷ったときの参考にしてください。

rel属性ってなに？【30秒でわかる基本】

rel属性のrelは「relationship（関係性）」の略です。

HTMLでリンクを貼るとき、<a>タグにrel属性を追加すると、「このリンク先は広告です」「このリンク先の評価は渡しません」といった情報を、検索エンジンとブラウザに伝えることができます。

たとえば、普通のリンクとrel属性つきのリンクを比べてみましょう。

<!-- 普通のリンク（rel属性なし） -->
<a href="https://example.com">おすすめのサイト</a>

<!-- rel属性つきのリンク -->
<a href="https://example.com" rel="nofollow">参考サイト</a>

どちらもユーザーの見た目には変わりませんが、検索エンジンから見ると意味がまったく違います。

上のリンクは「このサイトを推薦しています」というシグナルになり、リンク先にSEO評価（リンクジュースと呼ばれます）が渡ります。

下のリンクは「リンク先の評価は保証しません」というシグナルになり、SEO評価は渡りません。

rel属性は<a>タグだけでなく、<link>タグでも使えます。<link>タグで使う場合は、CSSファイルの読み込みやcanonicalの指定など、ページのhead部分で使うことが多いです。この記事では、実務で使う頻度の高い<a>タグのrel属性を中心に解説します。

rel属性で使える主な値

rel属性には色々な値がありますが、SEOとセキュリティに関わるのは以下の6つです。

ここからは、それぞれの値を詳しく解説していきます。

dofollowとnofollowの違い【最重要】

rel属性の中で最も重要なのが、nofollowです。

dofollowは「何もつけない状態」

まず知っておきたいのは、dofollowというrel属性の値は存在しないということです。

<!-- これは間違い。rel="dofollow"というコードはHTMLに存在しません -->
<a href="https://example.com" rel="dofollow">サイト</a>

<!-- dofollowとは、単にrel属性を何もつけない状態のこと -->
<a href="https://example.com">サイト</a>

「dofollow」という言葉はSEOの業界用語として使われていますが、HTMLの仕様にはありません。rel属性を何も指定しないリンクのことを、nofollowと区別するためにdofollowと呼んでいるだけです。

nofollowの役割

nofollowは2005年にGoogleが導入しました。当時、ブログのコメント欄にリンクを大量に貼るスパムが問題になっていて、その対策として生まれた仕組みです。

<a href="https://example.com" rel="nofollow">参考サイト</a>

nofollowをつけると、検索エンジンに「このリンク先にSEO評価を渡さないでください」と伝えます。

ただし、2019年にGoogleは方針を変更しました。以前はnofollowを「命令」として扱っていましたが、現在は「ヒント」として扱っています。つまり、nofollowをつけても、Googleがリンク先をクロール（巡回）したり、評価の参考にしたりする可能性はゼロではありません。

とはいえ、nofollowを適切に設定することは今でもSEOの基本です。以下のようなリンクにはnofollowをつけましょう。

• 信頼性を保証できない外部サイトへのリンク
• 有料で掲載しているリンク（広告やPR）
• ユーザーが投稿したコメント内のリンク

sponsoredとugc ― nofollowの進化形

2019年、Googleはnofollowに加えて2つの新しいrel属性の値を導入しました。sponsoredとugcです。

sponsored：広告・有料リンク用

<a href="https://example.com" rel="sponsored">スポンサーの商品ページ</a>

アフィリエイトリンクやPR記事内のリンクなど、金銭的なやりとりが発生しているリンクに使います。

以前はこうしたリンクにもnofollowを使っていましたが、Googleは「もっと具体的に教えてほしい」と考え、sponsoredを導入しました。Googleのガイドラインでは、有料リンクにはsponsoredを使うことが推奨されています。

ugc：ユーザー投稿のリンク用

ugcは「User Generated Content（ユーザー生成コンテンツ）」の略です。

<a href="https://example.com" rel="ugc">ユーザーが投稿したリンク</a>

ブログのコメント欄やフォーラムの投稿など、サイト運営者ではなくユーザーが書き込んだリンクに使います。

3つの使い分け

sponsoredやugcは、nofollowと併用することもできます。

<!-- 併用も可能 -->
<a href="https://example.com" rel="nofollow sponsored">広告リンク</a>

実はこのコード、古いブラウザではセキュリティ上の問題がありました。リンク先のページから、元のページ（あなたのサイト）を操作できてしまう脆弱性です。これを「タブナビング攻撃」といいます。

noopener：元ページの操作をブロック

<a href="https://example.com" target="_blank" rel="noopener">外部サイト</a>

noopenerをつけると、リンク先のページから元のページにアクセスできなくなります。

現代のブラウザ（Chrome、Firefox、Safari、Edgeなど）は、target=”_blank”を指定すると自動的にnoopener相当の動作をします。しかし、明示的にnoopenerを書いておくことが推奨されています。

noreferrer：アクセス元の情報を送らない

<a href="https://example.com" target="_blank" rel="noreferrer">外部サイト</a>

noreferrerをつけると、リンク先のサイトに「どのページからアクセスしてきたか」という情報（リファラー）が送られなくなります。noopenerの効果も含んでいるので、noreferrerをつければnoopenerは不要です。

マーケター向けの注意点

noreferrerをつけると、リンク先のGoogleアナリティクスでは、あなたのサイトからのアクセスが「参照元なし（direct）」として記録されます。

つまり、自分のサイトからのリンクを相手に認識してもらいたい場合（被リンク営業やパートナーシップなど）は、noreferrerをつけない方が得策です。

推奨の書き方

外部リンクを別タブで開く場合の推奨パターンはこちらです。

<!-- 一般的な外部リンク -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  外部サイトへ
</a>

<!-- リファラーを残したい場合 -->
<a href="https://example.com" target="_blank" rel="noopener">
  パートナーサイトへ
</a>

canonical ― 重複コンテンツ問題を防ぐ

canonicalは<a>タグではなく、<link>タグで使うrel属性です。SEO対策では非常に重要なので、ここで触れておきます。

同じ内容が複数のURLに存在する問題

たとえば、以下のURLがすべて同じページを表示していたらどうでしょう。

https://example.com/page
https://example.com/page?ref=twitter
https://example.com/page?utm_source=google
https://www.example.com/page

検索エンジンはこれらを別のページとして認識してしまい、SEO評価が分散してしまう可能性があります。

canonicalで正規URLを指定する

<!-- ページのhead内に記述 -->
<link rel="canonical" href="https://example.com/page">

canonicalを設定すると、「このページの正式なURLはこれです」と検索エンジンに伝えられます。評価が1つのURLに集約されるので、SEO効果が分散しません。

WordPressを使っている場合は、AIOSEOなどのSEOプラグインが自動でcanonicalを設定してくれます。ただし、パラメータ付きURLや、wwwの有無、httpとhttpsの混在など、意図しない重複が発生していないか定期的にチェックしておくことをおすすめします。

【判断チャート】あなたのリンクにはどのrel属性が必要？

「結局、どのrel属性をつければいいの？」と迷ったときは、以下のフローで判断できます。

Step 1 → そのリンクは外部サイトへのリンクですか？

Noの場合 → 基本的にrel属性は不要です。内部リンクにnofollowをつけると、サイト内のSEO評価の流れを妨げてしまうので避けましょう。

Yesの場合 → Step 2へ。

Step 2 → target=”_blank”（別タブで開く）を使いますか？

Yesの場合 → rel="noopener noreferrer" を追加。さらにStep 3へ。

Noの場合 → そのままStep 3へ。

Step 3 → そのリンクは広告やアフィリエイトですか？

Yesの場合 → rel="sponsored" を追加。

Noの場合 → Step 4へ。

Step 4 → ユーザーが投稿したリンクですか？

Yesの場合 → rel="ugc" を追加。

Noの場合 → Step 5へ。

Step 5 → リンク先は信頼できるサイトですか？

Yesの場合 → 何もつけない（dofollowのまま）。

Noの場合 → rel="nofollow" を追加。

複数のrel属性が必要な場合は、スペースで区切って並べればOKです。

<!-- 広告リンクを別タブで開く場合 -->
<a href="https://ad.example.com" target="_blank" rel="noopener noreferrer sponsored">
  スポンサーサイトへ
</a>

WordPressでrel属性を設定する方法

WordPressでは、リンクのrel属性を手動でも自動でも設定できます。

ブロックエディタで手動設定する

ブロックエディタでリンクを挿入したあと、リンクの設定パネルを開くと「リンクrel」という入力欄があります。ここにnofollowやsponsoredと入力すれば、そのリンクにrel属性が追加されます。

外部リンクに自動でrel属性をつける

毎回手動で設定するのは手間なので、functions.phpに以下のコードを追加すると、外部リンクに自動でnoopenerとnoreferrerが追加されます。

// 外部リンクに自動でrel属性を追加
function add_rel_to_external_links($content) {
    $site_url = home_url();
    $pattern = '/<a\s(.*?)href=["\'](?!' . preg_quote($site_url, '/') . ')(https?:\/\/[^"\']+)["\'](.*?)>/i';
    $replacement = '<a $1href="$2"$3 rel="noopener noreferrer">';
    return preg_replace($pattern, $replacement, $content);
}
add_filter('the_content', 'add_rel_to_external_links');

AIOSEOを使っている場合は、プラグインの設定画面からnofollowの一括設定もできます。

まとめ：rel属性 早見表【保存版】

リンクを貼るときに迷ったら、この表を見返してください。

rel属性は一度理解すれば設定自体はシンプルです。この表をブックマークしておけば、リンクを貼るたびに迷うことがなくなります。