rel="noopener"とは？
rel="noopener"は、リンクのrel属性に指定する値の一つです。リンク先を新しく開く際に、リンク先から元の画面へアクセスするwindow.openerという経路を切り離す役割があります。WordPressでの出力は、編集画面やバージョン、テーマ、プラグインなども踏まえて、実際にできたリンクで確認します。
現在のHTML仕様に対応するブラウザーでは、a要素にtarget="_blank"を指定すると、原則としてnoopenerと同じ動作になります。rel="noopener"を明記する場合も、元の画面との関係を切り離すための指定と考えましょう。
今回は、rel="noopener"、rel="noreferrer"、rel="nofollow"について、それぞれの役割と使い分けを解説します。
noopenerの役割
noopenerについては、元の画面へのアクセス対策と、動作の軽さを分けて確認しましょう。
- target="_blank"の脆弱性対策
- 動作の軽さとは分けて確認する
順に詳しく見ていきましょう。
target="_blank"の脆弱性対策
元の画面を示すwindow.openerがリンク先へ渡る条件では、リンク先から元の画面に影響を与えられる場合があります。現在のブラウザーの暗黙のnoopenerや、リンクに明記したnoopenerは、この経路を切り離します。
リンク先が悪意のある内容に変わった場合、元の画面を別のページへ移動させるなど、window.openerを悪用するリスクに注意が必要です。対応状況と、実際のリンクの指定を確認しましょう。
noopenerは、window.openerを通して元の画面を操作する経路を切り離すための指定です。サイト全体の安全性は、更新やアクセス管理なども含めて確認します。
動作の軽さとは分けて確認する
別タブの動作は、ブラウザーのプロセス構成や、開いているページの処理内容などにも左右されます。target="_blank"なら必ず同じJavaScriptや同じプロセスを使うとは判断できません。
noopenerの主な役割は、リンク先から元の画面へアクセスする経路を切り離すことです。表示が重い場合は、元ページとリンク先の処理も別に調べましょう。noopenerを付けるだけで動作が速くなるとは限りません。
noopenerの注意点
対応状況は、rel="noopener"を明記した場合と、target="_blank"で暗黙に適用される場合を分けて確認します。古いブラウザーやアプリ内のブラウザーも対象にする場合は、利用する環境で確かめてください。
https://caniuse.com/?search=noopener
rel=”noreferrer”とは？
rel="noreferrer"も、rel属性に指定する値の一つです。リンク先へ移動するときに参照元の情報を送らず、noopenerと同じ役割も含みます。
rel=”noreferrer”の役割
rel=”noreferrer”には以下の2つの役割があります。
- 参照先に参照元リンクを渡さないようにする
- noopenerの役割も含む
順に詳しく見ていきましょう。
参照先に参照元リンクを渡さないようにする
noreferrerを指定すると、リンク先への移動時に、参照元を伝えるHTTPのRefererヘッダーを送信しません。参照元の情報を使うアクセス解析などでは、この違いを踏まえる必要があります。
成果の記録や報酬の判定は、利用するサービスやリンクの仕組みによって異なります。noreferrerだけで、売上が必ず記録される、または必ず報酬を失うとは判断せず、利用先の仕様を確認してください。
noopenerの役割も含む
現在のHTML仕様では、noreferrerにはnoopenerの役割も含まれます。両方を記載するかに加え、リンク先へ参照元の情報を送る必要があるかを確認して選びます。
noreferrerの注意点
noreferrerを使う場合は、参照元の情報を利用する計測への影響を確認します。WordPressでは、過去にnoreferrerを付けていた処理や、その後の変更もあるため、現在の版や編集方法を踏まえ、公開ページの実際のリンクを確認しましょう。
noopenerとnoreferrerの違い
noopenerは、リンク先から元の画面へアクセスするwindow.openerを切り離します。noreferrerは、それに加えて、移動時に参照元の情報を送らない指定です。
noopener自体は、参照元の情報を送信しないための指定ではありません。実際にどこまで参照元が伝わるかは、ほかの参照元ポリシーの設定などにも左右されます。計測や報酬の条件は、利用するサービスの案内で別に確認しましょう。
noopenerとnoreferrerの使い方
新しいタブで開くリンクでは、必要な役割に応じてnoopenerやnoreferrerを指定できます。WordPressが常に同じ値を自動で付けるとは決めず、編集後のリンクで確認しましょう。以下は、a要素で指定する書き方の例です。
noopenerの記載方法
noopenerを使う際は以下の通りに記載しましょう。
<a href="サイトのリンク/" target="_blank" rel="noopener">リンク先の説明</a>
「サイトのリンク」の部分に、新しいタブで開きたいウェブサイトのリンクを挿入してください。
noopenerとnoreferrerを両方記載する方法
noopenerとnoreferrerを両方使いたい場合は、以下の通りに記載しましょう。
<a href="サイトのリンク" target="_blank" rel="noopener noreferrer">リンク先の説明</a>
こちらも「サイトのリンク」の部分に、新しいタブで開きたいウェブサイトのリンクを挿入しましょう。
rel="noopener"の対応状況
対応状況は、現在使っているブラウザーと版を対象に確認します。属性値の明示的な対応と、target="_blank"の暗黙の保護を分けて見ることが大切です。
ブラウザーとWordPressの確認ポイント
現在のHTML仕様とMDNの解説では、a要素のtarget="_blank"は、原則としてnoopenerと同じ動作になります。
一方、WordPressの、targetを持つリンクにnoopenerを追加する従来の関数は、公式資料で6.7.0以降は非推奨とされています。
実際のHTML出力は、編集画面、テーマ、プラグインなどの組み合わせでも変わります。過去のバージョンの説明だけで判断せず、利用する環境で確認しましょう。
実装の確認では、公開ページで生成されたリンクと、そのリンクを開く対象の環境を合わせて見ます。
noopenerとnoreferrerを併用する必要性
現在の仕様では、noreferrerだけでもnoopenerの役割を含みます。noopenerとnoreferrerを併記するかは、元の画面へのアクセスと参照元情報の送信を、どのように扱いたいかで決めます。対応状況の確認には、現在サポートされているブラウザーを使いましょう。
設定しない場合SEOに影響があるのか？
noopenerとnoreferrerは、元の画面との関係や参照元情報の送信を制御するものです。Googleへリンクとの関係を伝えるnofollow・sponsored・ugcとは、目的を分けて考えましょう。
広告や有料掲載のリンクにはsponsored、コメントなど利用者が投稿したリンクにはugcがGoogleから案内されています。nofollowは、ほかの値が適さず、リンク先と自サイトを関連付けたくない場合などに使います。
そもそもrel属性とは？
relとはrelation（関係）の略称で、rel属性とは、現在のドキュメントとリンク先のドキュメントの関係性を示すものです。ハイパーリンクやファイルの読み込み、フォーム投稿の際の利用が主な例といえます。<link>、<a>、<area>、<form> で有効です。例えば、link要素の場合は、<link rel="stylesheet" href="style.css">のように記載をします。
rel属性の種類
rel属性にはさまざまな値があり、使える要素も値ごとに異なります。以下の一覧は、過去の案内や拡張で使われた名称も含みます。新しく使うときは、現在のHTML標準での位置付けと、利用する環境の対応を確認してください。
| alternate | 代替文書 （例えば別言語版、別フォーマット版など） |
| archives | アーカイブ |
| appendix | 付録となる文書 |
| canonical | 現在の文書の優先URLを指定する |
| author | 著者情報 |
| bookmark | 文書の固定リンク |
| chapter | 連続した文書における章となる文書 |
| contents | 目次となる文書 |
| copyright | 著作権表示のための文書 |
| dns-prefetch | ユーザエージェントがターゲットリソースの生成元の DNS 解決を先行して実施するよう指定 |
| external | 外部サイトへのリンクであることを示す |
| glossary | 用語集となる文書 |
| help | ヘルプへのリンク |
| icon | アイコンをインポートします |
| index | 索引となる文書 |
| modulepreload | ユーザエージェントが先行してモジュールスクリプトをフェッチし、文書のモジュールマップに格納しなければならないことを指定します |
| last | 連続した文書における最後の文書 |
| license | ライセンス文書 |
| next | 連続した文書における次の文書 |
| nofollow | リンク先を支持・推奨しない関係を示す |
| noopener | リンク先を新しく開く際、window.openerを設定しない |
| noreferrer | ユーザーがリンクを移動する際、リファラを送信しません |
| opener | 新しく開く画面と元の画面の関係を保持する指定。用途を確認する |
| pingback | Pingback 1.0 仕様に基づき、ピングバック（トラックバック）用の URI を指定します |
| preconnect | リンク先のリソースにあらかじめ接続するように指定します （link 要素でのみ使用可能） |
| prefetch | リンク先のリソースをあらかじめキャッシュするように指定します （link 要素でのみ使用可能） |
| preload | リンク先のリソースを事前に読み込むように指定します （link 要素でのみ使用可能） |
| prerender | リンク先のリソースを読み込んでオフスクリーンでレンダリングしておくように指定します |
| prev | 連続した文書における前の文書 |
| start | 連続した文書における最初の文書 |
| search | 検索機能を提供するリソース |
| section | 連続した文書における節となる文書 |
| subsection | 連絡した文書における小節となる文書 |
| stylesheet | スタイルシート |
| sidebar | サイドバー |
| tag | 文書に指定されたタグのページ |
SEO的に重要なrel="nofollow"
nofollowはある外部リンクを自分のサイトと関連付けたくないときに使用する値です。
Googleは、広告・有料掲載にはsponsored、利用者の投稿したリンクにはugcを案内しています。これらが適さず、リンク先と自サイトを関連付けたくない場合などに、nofollowを使います。
コメント欄や掲示板では、投稿されたリンクを運営者が確認できるようにし、必要に応じてugcなどで関係を示します。属性を付けることに加え、スパム投稿への対応も行いましょう。
Googleは、これらの属性を付けたリンクは一般にたどらないと案内しています。ただし、同じページが別のリンクやサイトマップなどから見つかり、クロールされることがあります。
検索結果に登録させたくない自社のページがある場合は、nofollowを付けたリンクだけで対応できるとは考えず、noindexなど、目的に合う方法を別に確認します。
rel="noopenerのまとめ
ここまで、元の画面へのアクセスを切り離すnoopener、参照元の情報を送らないnoreferrer、Googleへリンクの関係を伝える値の違いを説明しました。
noopener・noreferrerと、Googleへリンクの関係を伝える値では役割が異なります。目的に合う値を選び、生成されたリンクと、利用する環境での動作を確認しましょう。
参考資料（2026年10月29日確認）：MDN：noopener／noreferrer／HTML標準：リンクの種類／WordPress：従来のリンク属性処理／Google：外部リンクの関係の示し方。
