rel="noopener noreferrer"の意味とアフィリエイト広告への影響

WordPressを利用している際にリンクaタグで外部サイトを設定する際に、HTMLで見るとtarget="_blank"に加えてrel="noopener noreferrer"という記述が追加されているのを見たことがある方も多いのではないでしょうか？

実際に意味を分かって使用されている方は少ないかもしれません。

そこで今回は、外部リンクを作成する際に記述するrel="noopenner noreferrer"の意味・役割についてを解説していきます。

WordPressで外部リンクを作成たら、aタグの中に「rel="noopener noreferrer"」とついているんですが、なんなんでしょうか？

こちらはセキュリティの設定です。つけるとセキュリティは上がりますが、アフィリエイターの方だとnoreferrerをつけると参照元ページが取得できなくなるので気をつけましょう。

この記事を読むと分かること

rel="noopener noreferrer"の意味や役割について
noreferrerによるアフィリエイト広告への影響について
noopener noreferrerは両方とも設定すべきなのかについて
(補足): 「rel=”noopener”」が規定値になっているブラウザについて

rel=”noopener noreferrer”とは？

WordPressでは4.7.4から「新しいタブで開く」にチェックを入れると自動的にrel=”noopener noreferrer”が付加されるという仕様に変更されています。

結論から言うと、この2つはセキュリティを向上させる役割があります。

WordPressを利用しなくても、aタグを使って外部リンクをtarget="_blank""を使って新しいタブで開くの設定する際に、rel属性に"noopener"や"noreferrer"を指定することがよくあります。

rel属性に"noopener"と"noreferrer"の両方を指定したい場合は、以下のようにそれぞれの間に半角スペースを空けて記述します。

<a href="外部ページのURL" target="_blank" rel=”noopener noreferrer”>ここにテキストが入ります</a>

1	<a href="外部ページのURL" target="_blank" rel=”noopener noreferrer”>ここにテキストが入ります</a>

以下ではそれぞれの役割について、より詳しく解説していきます。

rel="noopener"の役割：セキュリティ改善効果

まずrel="noopener"の役割としては大きく、セキュリティの改善効果が挙げられます。

target="_blank"を指定して新しいリンクを開いた場合、リンク先(開かれた新しいタブ)からwindow.openerというオブジェクトを用いてリンク元(元タブ)の操作ができてしまいます。

つまり、リンク先に指定したサイトが悪意あるサイトであったり、ハッキングされているサイト(実質悪意あるサイトの振る舞いをするサイト)だった場合に、リンク先から自分の見ていたリンク元ページが操作されるリスクがあると言うことです。

これを利用してフィッシング詐欺に利用する手法のことをTabnabbing attackと言いますが、rel="noopener"を設定することでこれを防ぐことができます。

Tabnabbing attackについて詳しく知りたい方はこちらの記事がわかりやすかったので、参考にされると良いと思います。(参考)https://blog.jxck.io/entries/2016-06-12/noopener.html

パフォーマンスの改善効果もあります

セキュリティ改善効果以外に、パフォーマンスの改善効果も挙げられます。

通常“target=”_blank” を使用してあるページから新しいタブを開いた場合、リンク先のページで負荷のかかるJavaScriptなどの処理が行われると、リンク元のページも同様に負荷がかかり処理スピードが遅くなる場合があります。

rel="noopener"を設定することで、リンク先で負荷の大きいJavascript処理が行われても、リンク元ページが影響を受けなくなりパフォーマンス改善されます。

rel="noreferrer"の役割

つぎにrel="noreferrer"の役割ですが、こちらは"noopener"の機能に加えて「参照元のリンク情報を渡さないようにする」という役割があります。

※その他、noopenerに対応していないブラウザ対策として使用する場合もあります。

参照先に対して参照元のリンクを渡さないようにする

rel="noreferrer"を設定することで、リンク先に対して参照元のリンク情報を渡さないようにすることができます。

これはアフィリエイトとしてリンクを利用している場合などに関係してきます。

たとえば、「https://webst8.com/blog/wordpress-start/」というページから「a8.net」のアフィリエイトリンク経由で「yyyyy.com」というページに移動した際に、通常はa8管理画面からどのページから成果発生したかがわかるのですが、それがわからなくなるということです。

◆WordPress4.7.4アップデート内容
該当のWordPressのバージョンにおいてA8.netの広告タグを貼り付けた際に、広告タグ内に自動で「rel="noopener noreferrer"」が挿入されるようになりました。

・これによる、トラッキングへの影響はありません。　売上はこれまで通り発生いたしますのでご安心ください。
・コンバージョンリファラレポートの「リファラ」情報がA8.netにて取得できなくなりました。

　急に「リファラ」情報が取得できなくなった、という事象が発生した場合、　WordPress4.7.4へのアップデートに伴う上記タグの自動付与の影響が考えられます。
WordPress4.7.4アップデートに伴う影響について | a8スタッフブログ

ですので、基本的にアフィリエイター視点で考えると"noreferrer"は記載しない方がより多くの情報を把握できると言えます。

noreferrerを付与しない方法は「wordpress noreferer 削除」などで検索すると色々出てきますのでご確認ください。
（ご利用のテーマによっては最初から削除する設定になっている場合もあります。）

ちなみに、新しいタブで開く(target="_blank")の設定をしていない場合は本内容は関係ないので無視して大丈夫です。

合わせて読みたい記事

アフィリエイトとは何かを知りたい方は「【アフィリエイトとは】メリット・デメリットと仕組みを解説」をご参照ください。

なお、WordPressでのブログアフィリエイトの始め方は「【WordPressの始め方総まとめ】ワードプレスブログの作り方」で詳しい解説をしています。

noopener noreferrerは両方とも設定すべき？

なお、先ほどnoreferrerは「"noopener"に対応していないブラウザ対策として使用する」と言いましたが、現在ではほとんどのモダンブラウザでnoopenerが対応しています。

引用元: Can I use?(https://caniuse.com/?search=noopener)

その為、現在ではrel="noreferrer"を設定しなくてもほとんど問題ありません。

ただし、すでにサポートの終了したIE(Internet Explorer)にも対応させたいといった場合などはnoreferrerも設定してあげた方が良いです。

引用元: Can I use?(https://caniuse.com/?search=noreferrer)

(補足): ブラウザによっては「rel=”noopener”」が規定値になっている

また補足ですが、最近の主要ブラウザ(Google Chrome、Safari、Firefoxなど)では「target="_blank"」が指定されているaタグやareaタグに対して、規定値として「rel=”noopener”」が適用されるようになっています。

規定値として「rel=”noopener”」が適用されるブラウザ例

Google Chrome 88以降〜　(2021年1月リリース)
Safari 12.1以降〜　(2019年3月リリース)
Firefox 79以降〜　(2020年7月リリース)

To conform to a change in the HTML standard, anchor tags with target="_blank" will now imply rel="noopener" by default, this helps prevent tab-napping attacks.

引用元: New in Chrome 88(https://developer.chrome.com/blog/new-in-chrome-88/)

Updated the link behavior for "target=_blank" to include rel="noopener" implicitly.

引用元: Safari 12.1 Release Notes(https://developer.apple.com/documentation/safari-release-notes/safari-12_1-release-notes)

To prevent the DOM property window.opener from being abused by untrusted third-party sites, Firefox 79 now automatically sets rel=noopener for all links that contain target=_blank.

引用元: Firefox 79: The safe return of shared memory, new tooling, and platform updates(https://hacks.mozilla.org/2020/07/firefox-79/)