はじめに
問題提起
ウェブ制作や運用をしていると、リンクに rel=”noopener” や rel=”noreferrer” を付けるべきか迷うことはありませんか？特に内部リンクに付与するかどうかは誤解が多く、思わぬ影響が出る場合があります。
この記事の目的
この記事は、内部リンクに rel=”noopener noreferrer” を付ける必要性と、そのメリット・デメリットをわかりやすく解説します。外部リンクとの使い分け、SEOやアクセス解析への影響、CMS運用時の注意点まで順を追って説明します。
想定読者
サイト運営者、編集者、Web制作に関わる方、ブログを書いている方に向けています。専門知識がなくても理解できるよう、具体例を交えて丁寧に説明します。
本記事の構成
第2章〜第8章で、属性の説明、使い分け、内部リンクへの影響、運用上の注意、セキュリティと解析の両立、用語解説を扱います。必要な部分だけ読んでいただいて構いません。
rel=”noopener”とrel=”noreferrer”とは何か
概要
Webページでリンクを新しいタブ（target="_blank"）で開くと、リンク先のページが元のページをJavaScriptで操作できる場合があります。rel="noopener"は、そのリスクを防ぐための属性です。一方、rel="noreferrer"はリンク元のURL（リファラー）をリンク先に送らないようにする属性で、訪問元情報を隠せます。
rel=”noopener”の仕組み
noopenerを付けると、ブラウザが新しいタブのwindow.opener参照を切ります。これにより、リンク先が元ページのDOMを操作したり、リダイレクトさせたりする危険を防ぎます。外部の不審なサイトへ開く際は基本的に付けることをおすすめします。
rel=”noreferrer”の役割
noreferrerはHTTPヘッダーのRefererを送信しないようにします。リンク先にどのページから来たかを知らせたくない場合に有効です。プライバシー保護や、機密情報をURLに含むページからの遷移で役立ちます。
実例と使い分け
- 安全重視（外部リンク）：
<a href="https://example.com" target="_blank" rel="noopener noreferrer">リンク</a>とし、両方を付けると安心です。 - 単にリファラーを隠したい時：
rel="noreferrer"のみで十分です。
注意点
noreferrerを使うとリンク先で参照元情報が取れないため、解析ツールの計測に影響する場合があります。一部ブラウザではnoreferrerがnoopenerの効果も持つことがありますが、確実に防ぎたいなら両方付けてください。
外部リンクと内部リンクでの使い分け
概要
外部リンクと内部リンクでは扱いを分けると運用しやすく、安全かつ解析しやすい状態を保てます。ここでは実務的な使い分けと例をわかりやすく説明します。
外部リンク（他サイトへのリンク）
推奨：target=”_blank” と rel=”noopener noreferrer” を併用します。理由は二つあります。
– セキュリティ：rel=”noopener” がないと、開いたページが window.opener を使って親ページを操作できる恐れがあります（いわゆる “reverse tabnabbing”）。
– プライバシー：rel=”noreferrer” があるとリファラー情報を渡さず、ユーザーの閲覧履歴や参照元が露出しにくくなります。
例：外部サイト
内部リンク（自サイト内のページ）
原則：rel=”noopener” は通常不要です。主要ブラウザは target=”_blank” に対して opener を切る動作を行うため、ほとんどの場合安全です。rel=”noopener” を付けても問題はありませんが、必須ではありません。
注意点：rel=”noreferrer” は付けないでください。リファラーが消えるため、アクセス解析やユーザー遷移の把握が困難になります。内部の遷移を正しく追えなくなるため、サイト改善や導線設計に支障が出ます。
例（内部で新しいタブを開く場合）：社内ページ
CMSや運用時のチェックポイント
- 一部のCMSやプラグインは外部・内部問わず自動で rel=”noopener noreferrer” を付けることがあります。設定を確認して必要に応じて調整してください。
- 外部リンクは自動追加で安全性を担保し、内部リンクはリファラー保持を優先する設定が望ましいです。
実務では、安全性と解析の両立を意識して、外部と内部でルールを分けることをおすすめします。
rel=”noreferrer”が内部リンクに及ぼす影響
何が起きるか
rel=”noreferrer”を付けたリンクは、リンク先にリファラー情報（どのページから来たか）を渡しません。内部リンクに付けると、サイト内のページ間移動でもRefererヘッダーやdocument.referrerが空になります。これはブラウザ仕様による挙動です。
具体例
お問い合わせフォームを別タブで開くリンクにrel=”noreferrer”を付けたとします。フォーム側ではどのページから来たか分からなくなり、問い合わせの発生元ページを把握できません。サーバーのアクセスログやGoogle Analyticsでも、内部遷移の出所が不明になります。
影響範囲
- 内部アクセス解析の精度が落ちる
- コンバージョンの経路追跡ができなくなる
- A/Bテストや導線改善の判断材料が減る
対策と代替案
- rel=”noopener”を使う：同様のセキュリティ効果がありつつリファラーは残る場合が多いです。
- クエリパラメータで渡す：?from=page-slug で来訪元を明示する。
- sessionStorage/localStorageを使う：リンククリック時に保存して、フォーム側で読み取る。
- サーバー側でUTMやイベントを使う：クライアントの情報損失に備える。
内部リンクでは、基本的にrel=”noreferrer”は不要です。安全性と解析の両方を考え、適切な方法を選んでください。
CMSやWeb運用時の注意点
概要
多くのCMSやブログサービスは、リンクを新しいタブで開くときに自動で rel=”noopener noreferrer” を付与します。便利ですが、自サイト内リンクにも適用されるとリファラーが失われ、アクセス解析に影響します。
なぜ注意が必要か
内部リンクに rel=”noreferrer” が付くとブラウザはリファラーヘッダーを送信しません。たとえば、同じドメイン内のページ遷移でリファラーが消えると、解析ツールで『直接流入』と判定されます。これで導線の把握が難しくなります。
具体的な対策
- 可能なら外部リンクのみに rel を付与する設定に変更してください。
- テーマやプラグインで自動追加している場合はフィルターやフックで条件分岐を入れてください。
- すぐ対処できない場合は、JavaScriptで外部リンクのみ rel を追加する方法も有効です（後述の例参照）。
CMS別の対応例（簡潔）
- WordPress: functions.php にフィルターを追加してドメイン一致をチェックします。
- Movable Type / Ghost: テンプレートでaタグの出力ロジックを分けます。
- SaaS型（Wix等）: 設定で外部リンクのみの付与が選べるか確認してください。
運用チェックリスト
- 新しいタブ設定時に rel がどう付与されるか確認する
- 自社ドメイン間のリンクでリファラーが残るかテストする
- 解析データに不自然な『直接流入』増加がないか定期確認する
必要なら、簡単なコード例やWordPress向けの具体的な実装もお渡しします。ご希望があれば教えてください。
セキュリティと分析の両立には
概要
外部リンクはセキュリティのためにrel属性をつけ、内部リンクは基本的に何も付けずにtarget=”_blank”だけで十分です。ただし、アクセス解析でリファラを取りたい場合はrel=”noreferrer”を避け、rel=”noopener”だけを使う選択肢があります。
ポイント
- rel=”noopener”：新しいタブから元ウィンドウへの操作を防ぎ、リファラは残します。アクセス解析で有利です。
- rel=”noreferrer”：リファラを送らず、同時にwindow.openerも切ります。解析で参照元が失われます。
具体例
- 外部リンクで解析不要なら：
<a href="https://外部サイト" target="_blank" rel="noopener noreferrer">外部へ</a> - 外部リンクで解析を取りたいなら：
<a href="https://外部サイト" target="_blank" rel="noopener">外部へ</a> - 内部リンク（新しいタブで開く必要がある場合）：
<a href="/about" target="_blank">サイト内へ</a>。安全のためrel="noopener"を付けても構いません。
CMSや運用での実装ヒント
- テンプレートでリンク先ホストを比較し、外部なら自動でrel属性を付与する。
- JavaScriptでドキュメント内の外部リンクに一括で
rel="noopener"を追加する方法も有効です。
確認方法
- アクセス解析で参照元（referrer）の有無を確認する。
- ブラウザのコンソールで
window.openerがnullか確認する。
おすすめ設定
- 基本は外部：
rel="noopener noreferrer"、解析が必要ならrel="noopener"にする。内部は不要。これでセキュリティと分析をバランスよく保てます。
まとめ
-
外部リンク（target=”_blank”で新しいタブを開く場合）は、セキュリティ対策としてrel=”noopener”を必ず付けてください。rel=”noreferrer”は参照元情報（Referer）を消してしまうため、アクセス解析に影響します。解析を維持したい場合は付けないほうがよいです。
-
内部リンクには基本的にrel属性は不要です。内部で新しいタブを開く必要がある場合でも、参照情報が必要ならrel=”noopener”だけを使うのが無難です。
-
CMSやテンプレートで自動的にrel=”noopener noreferrer”が付与されているときは、設定を見直してください。自動付与が便利な一方で、解析データや内部運用に思わぬ影響を与えることがあります。
-
運用フローとしては、(1) サイト内リンクの監査、(2) テンプレートやプラグイン設定の確認、(3) アクセス解析の動作確認、(4) 社内ドキュメントの更新、の順で進めると安全です。
短くまとめると、セキュリティと解析のバランスを考え、外部リンクにはrel=”noopener”を基本、rel=”noreferrer”は必要時のみ使用する方針が現実的です。
用語解説
この章では、この記事でよく出てくる用語をやさしく説明します。具体例を添えて、用途や注意点もまとめます。
リファラー（Referer）
どのページから来たかを示す情報です。たとえば、サイトAのページ（https://siteA.com/page）からサイトBのページへリンクをクリックすると、サイトBには「https://siteA.com/page」が届くことがあります。アクセス解析やコンバージョンの計測で使います。
rel=”noopener”
新しいタブで開いたページが元のページのwindowオブジェクトにアクセスできないようにします。タブ乗っ取り（tabnabbing）の防止に役立ちます。target=”_blank”と一緒に使います。
rel=”noreferrer”
リンク先にリファラー情報を送らないようにします。送られたくない情報がある場合に使います。ただし、送らないためにアクセス解析の参照元が曖昧になります。
target=”_blank”
リンクを新しいタブで開きます。利便性のために使いますが、安全のためにnoopenerやnoreferrerを併用することが望ましいです。
Referrer-Policy
サーバーやページでリファラーの扱いを細かく指定する設定です。例：no-referrer（常に送らない）、origin（サイトのドメインだけ送る）、strict-origin-when-cross-origin（多くのブラウザの既定）など。
オリジンとフルURLの違い
オリジンは「https://example.com」のようにスキーム＋ドメイン＋ポートだけを示します。フルURLはページごとのパスやクエリも含みます。解析やプライバシーの観点で使い分けます。
UTMや個人情報の扱い
リンクのクエリにUTMなどの追跡情報を付けると参照元がわかりやすくなります。個人情報（氏名、メールなど）をURLに含めないようにしてください。リファラーで流出するリスクがあるためです。
