rel=noopener、noreferrer、nofollow が実際にすること

短く言うと

リンクの rel 属性は、現在のページとリンク先ページの関係を表します。抽象的に聞こえますが、日々のWeb制作では、次の3つの値が頻繁に登場します。

<a href="https://example.com" target="_blank" rel="noopener noreferrer nofollow">
  External resource
</a>

この3つのトークンは、まるで1つのことをするかのようにまとめて貼り付けられがちです。しかし、そうではありません。

• noopener はブラウザーのセキュリティ制御です。
• noreferrer はプライバシーとアナリティクスの制御です。
• nofollow は検索エンジンへのシグナルです。

これらは組み合わせられますが、それぞれがなぜ存在するのかを理解しておくべきです。すべての外部リンクに3つすべてを追加することが常に間違いとは限りませんが、多くの場合は手抜きです。

rel=noopener はリバースタブナビングを防ぐ

rel="noopener" は、新しく開かれたページに window.opener を通じて元のページへアクセスさせないよう、ブラウザーに指示します。

これは主に、target="_blank" を使ってリンクを新しいタブやウィンドウで開く場合に重要です。

<a href="https://external.example" target="_blank" rel="noopener">
  Open external site
</a>

noopener がない場合、リンク先ページは次のような JavaScript を実行できる可能性があります。

window.opener.location = 'https://phishing.example';

この攻撃は一般にリバースタブナビングと呼ばれます。ユーザーが正規のリンクをクリックして別のサイトへ移動すると、元のタブが気づかないうちに偽のログインページや別の悪意ある宛先へ遷移させられます。

最近のブラウザーでは、この点が改善されています。現在のブラウザーの挙動では、target="_blank" は一般に rel="noopener" があるかのように扱われます。これは良いことですが、明示的な属性が無意味になるわけではありません。明示的な noopener は今でも有用です。理由は次のとおりです。

• 意図をコード上に記録できる。
• 古い、または特殊な閲覧環境を保護できる。
• すべての埋め込みWebビューが最新のデスクトップブラウザーのように振る舞うことに依存しなくて済む。
• コードレビューがしやすくなる。

新しいタブで開く外部リンクでは、rel="noopener" は妥当なデフォルトです。

noopener は SEO に影響するか？

いいえ、実質的な意味では影響しません。noopener はブラウザーの挙動のためのものです。検索エンジンに対して、そのページを支持しているか、リンクエクイティを渡すべきか、有料リンクかどうかを伝えるものではありません。

もし SEO ポリシーが noopener をランキング指示として扱っているなら、そのポリシーは見直す必要があります。

rel=noreferrer は参照元ページを隠す

rel="noreferrer" は、ユーザーがリンクをたどる際に Referer HTTP ヘッダーを送信しないよう、ブラウザーに指示します。

はい、このヘッダー名は歴史的な理由で Referer と綴りが誤っています。属性は noreferrer と綴ります。

通常、ユーザーがあなたのページから別のサイトへのリンクをクリックすると、リンク先は訪問元を示すリファラー値を受け取ることがあります。サイトの Referrer-Policy によって、それは完全なURLであったり、オリジンだけであったり、何も送られなかったりします。

たとえば、リンク先は次のような値を見るかもしれません。

Referer: https://www.example.com/pricing?plan=enterprise

または、次のようにオリジンだけかもしれません。

Referer: https://www.example.com/

rel="noreferrer" がある場合、そのナビゲーションではブラウザーはこのヘッダーを送信しないはずです。

<a href="https://external.example" rel="noreferrer">
  External site
</a>

実際には、最近のブラウザーでは noreferrer は noopener のようにも振る舞います。同じリンクで noreferrer を使うなら、通常はセキュリティ目的で noopener を追加する必要はありません。それでも多くのチームは、明確さのために両方を書きます。

<a href="https://external.example" target="_blank" rel="noopener noreferrer">
  External site
</a>

これは問題ありません。冗長ではありますが、読みやすい書き方です。

noreferrer が有用な場面

現在のページURLをリンク先に公開すべきでない場合は、noreferrer を使います。

よくある例は次のとおりです。

• プライベートなダッシュボードからのリンク。
• 未公開のプレビュー環境からのリンク。
• 機密性の高いクエリパラメーターを含むURLからのリンク。
• 管理ツール、モデレーションキュー、CRM画面、カスタマーサポートシステム内のリンク。
• リンク先が正確な参照元ページを知るべきでないリンク。

最後の点は、必ずしも秘匿だけの問題ではありません。データ最小化の問題である場合もあります。リンク先が参照元URLを知る必要がないなら、送らないようにします。

これは、プライバシーを意識したWebデザインの大きな流れにも合っています。ブラウザー、ユーザー、規制当局はいずれも、デフォルトで送信される周辺データを減らす方向へ進んできました。この領域を見直しているなら、2026年にCookieをめぐって何が変わったのか、そしてどう対応すべきかの記事でも、同じ一般的な変化を扱っています。見えないトラッキングを減らし、データの流れをより意図的にするという変化です。

アナリティクス上のトレードオフ

noreferrer は、リンク先サイトのアトリビューションを壊すことがあります。リンク先のアナリティクスでは、訪問がリファラルトラフィックではなくダイレクトトラフィックとして分類される可能性があります。

それはあなたにとって第一の問題ではないかもしれませんが、パートナーシップ、アフィリエイト関係、カスタマージャーニー、社内のクロスドメインエコシステムでは重要になることがあります。マーケティングチームが、パートナーサイト側で自社ドメインからのリファラルトラフィックを確認できると想定している場合、一律の noreferrer は混乱を生む可能性があります。

多くの通常の編集リンクでは、あらゆる場所に noreferrer を追加するよりも、サイト全体の Referrer-Policy ヘッダーを設定する方がよいアプローチです。たとえば次のようにします。

Referrer-Policy: strict-origin-when-cross-origin

このポリシーは、同一オリジンのナビゲーションでは完全なURLを送信し、安全なクロスオリジンのリンク先にはオリジンのみを送信し、HTTPS から HTTP へ移動する場合にはリファラーを送信しません。多くのサイトにとって実用的なデフォルトです。

本番環境でヘッダーがどう振る舞っているかを確認する必要がある場合、アナリティクスのダッシュボードから推測するより、生のHTTPチェックの方が明確なことがよくあります。本番環境でリダイレクトとHTTPヘッダーをデバッグするための小さなツールキットで紹介したワークフローは、referrer-policy のデバッグにもそのまま使えます。

rel=nofollow は検索エンジン向けであり、ブラウザー向けではない

rel="nofollow" は、リンク先ページを支持していることを示したくない、と検索エンジンに伝えます。

<a href="https://external.example" rel="nofollow">
  User-submitted link
</a>

もともと nofollow は、コメントスパムに対抗するために導入されました。考え方は単純でした。コメント内のリンクがランキング上の評価を渡さなければ、スパマーがブログやフォーラムを荒らす動機が小さくなるというものです。

現在、Google は nofollow を絶対的な指示ではなくヒントとして扱います。この違いは重要です。つまり、検索エンジンは文脈によって、そのリンクを発見やランキングシステムに利用する可能性がありますが、あなたはそのリンクを通常の編集上の支持として扱うべきではない、と明確に示していることになります。

nofollow を使う場面

リンクはするものの、リンク先を保証したくない場合に nofollow を使います。

妥当な例は次のとおりです。

• 信頼できないユーザー生成リンク。
• 公開コメントやプロフィール内のリンク。
• 悪い振る舞いの例として言及するサイトへのリンク。
• 支持ではなく参照のために含めるリンク。
• モデレーションが限定的な領域のリンク。

有料リンクやスポンサーリンクには、rel="sponsored" を優先してください。ユーザー生成コンテンツには、rel="ugc" を優先してください。必要であれば値を組み合わせることもできます。

<a href="https://example.com" rel="ugc nofollow">
  User profile link
</a>

公開フォーム、コメント、ディレクトリ、プロフィールページを運営している場合、リンク属性は悪用対策の一部にすぎません。スパムは通常、投稿フローのもっと早い段階で始まります。問い合わせフォームが最大のスパムリスクになる理由については別の記事で詳しく説明していますが、ここでも同じ教訓が当てはまります。弱いモデレーションを nofollow で補えるとは考えないでください。

nofollow がしないこと

nofollow は、ユーザーがリンクをクリックすることを防ぎません。ブラウザーがリファラーを送信することも防ぎません。リンク先を見えなくするものでもありません。target="_blank" を安全にするものでもありません。

また、URLが決してクロールされないことを保証するものでもありません。検索エンジンがそのURLを別の場所で見つければ、クロールされる可能性はあります。インデックスを防ぐ必要がある場合は、他人のリンク上の nofollow 属性ではなく、リンク先ページで noindex など適切な robots 制御を使ってください。

よくある組み合わせ

新しいタブで開く外部リンク

<a href="https://external.example" target="_blank" rel="noopener">
  External resource
</a>

これが基準です。新しい閲覧コンテキストを開くことで生じるセキュリティ上の問題に対処します。

リファラーデータも送信したくない場合は、次のようにします。

<a href="https://external.example" target="_blank" rel="noopener noreferrer">
  External resource
</a>

有料掲載

<a href="https://sponsor.example" rel="sponsored">
  Sponsor site
</a>

新しいタブで開く場合は、noopener を追加できます。

<a href="https://sponsor.example" target="_blank" rel="sponsored noopener">
  Sponsor site
</a>

有料リンクの開示を曖昧に代替するものとして nofollow を使わないでください。検索エンジンには現在、そのためのより具体的な値があります。sponsored です。

ユーザー生成リンク

<a href="https://user-submitted.example" rel="ugc nofollow">
  User-submitted site
</a>

これは、そのリンクがユーザーによって投稿されたものであり、通常の編集上の投票として扱うべきではない、と検索エンジンに伝えます。

内部リンク

ほとんどの内部リンクでは、これらの値は不要です。

通常の sculpting 戦術として内部リンクに nofollow を追加しないでください。たいていの場合、利益よりも混乱を生みます。ページをインデックスさせるべきでないなら、それを直接処理してください。ページをクロールさせるべきでないなら、robots ルール、認証、canonicalization、サイト構造について慎重に考える必要があります。

新しいタブで開く内部リンクについては、noopener は依然として無害であり、適切な場合もあります。ただし、よりよい問いは、そもそもその内部リンクをなぜ新しいタブで開く必要があるのか、という点です。

チームのための実践的なポリシー

シンプルな社内スタイルを決めておくと、ほとんどのミスを防げます。

1. target="_blank" を持つリンク、とくに外部リンクには rel="noopener" を追加する。
2. 参照元URLを隠すことが意図的な場合にだけ noreferrer を追加する。
3. リンク先を支持しない場合にだけ nofollow を追加する。
4. 有料リンクには sponsored を、ユーザー投稿リンクには ugc を使う。
5. アクセス制御、モデレーション、インデックス制御の代わりにリンク属性を使わない。

重要なのは意図です。rel 内のすべてのトークンは、具体的な問いに答えているべきです。

• セキュリティ: 新しいページを opener から分離すべきか？
• プライバシー: リンク先はリファラー情報を受け取るべきか？
• SEO: このリンクを編集上の参照として支持しているのか？

チーム内の誰もこれらの問いに答えられないなら、その属性はおそらくカーゴカルトHTMLです。

何が起きているかをテストする方法

noopener については、リンクを開き、リンク先が window.opener にアクセスできるかを確認します。制御されたテストページでは、noopener が有効な場合、window.opener は null であるべきです。

noreferrer については、リンク先側のネットワークリクエストを調べるか、テスト環境でリクエストロガーを使います。Browser DevTools でも送信リクエストヘッダーを確認できますが、多くの場合、サーバー側ログの方が信頼できます。

nofollow については、ブラウザーの挙動ではなく検索エンジンの解釈であるため、テスト結果はすぐには見えません。最も確実な確認はソースの検査です。レンダリングされたHTMLに期待する rel 値が含まれていることを確認してください。フロントエンドフレームワークがリンクを書き換える場合は、テンプレートだけでなく最終的なDOMを検査します。

結論

これらの属性は小さいものですが、セキュリティ、プライバシー、SEO が交差する場所にあります。互換性があるものとして扱うと、悪い習慣につながります。

新しいタブで開くリンクには noopener を積極的に使ってください。リファラーのプライバシーが重要な場合は、noreferrer を意図的に使ってください。支持に関する検索向けの表明を行う場合は、nofollow を使ってください。そして、リンクが有料またはユーザー生成である場合は、より具体的な現代的な値である sponsored と ugc を使ってください。

ほとんどのサイトでは、それで十分です。目的はすべてのリンクを装飾することではありません。目的は、それぞれのリンクが、ブラウザーと検索エンジンに必要なことを正確に伝えるようにすることです。