リンクaタグ rel="noopener noreferrer"の意味

HTML

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

2021年11月26日

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"の両方を指定したい場合は、以下のようにそれぞれの間に半角スペースを空けて記述します。

 

WordPress5.1以降では、「新しいタブで開く」をクリックすると、rel=“noopener noreferrer”が自動付与される
 

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

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管理画面からどのページから成果発生したかがわかるのですが、それがわからなくなるということです。

a8 コンバージョンリファラレポート

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

◆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が対応しています。

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

ただし、すでにサポートの終了したIE(Internet Explorer)にも対応させたいといった場合などは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/)

ですがまだまだ古いバージョンのブラウザを使用していたり、他のブラウザを使用しているユーザーも多いので、個人的には新しいタブで開く(target="_blank")を設定する場合は、rel="noopener"は付けておいても良いと思います。
 

 

まとめ

まとめです。今回はrel="noopener noreferrer"の意味・役割やアフィリエイト広告への影響についてをご紹介しました。

rel="noopener noreferrer"はおまじないとして使用している方も多いと思いますが、それぞれの意味や役割をしっかりと知った上で使用するとよいでしょう。

なお、アフィリエイトとは何かを知りたい方は「【アフィリエイトとは】メリット・デメリットと仕組みを解説」をご参考いただけますと幸いです。

WordPressについては「【WordPressの始め方総まとめ】ワードプレスブログの作り方」をご参考ください。

今回は以上になります。最後までご覧頂き、ありがとうございました。

 

合わせて読みたい記事

これからサーバー・ドメインを契約してホームページを作りたいという方は「【総まとめ】個人ホームページの作り方・Webサイト自作方法」をご参考ください。

おすすめのレンタルサーバーについては「【おすすめレンタルサーバー比較総まとめ】WordPress対応5社

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

【おすすめレンタルサーバー比較総まとめ】WordPress対応5社

国内シェア上位のエックスサーバー、ロリポップ、さくらのレンタルサーバ、およびConoHa WING、mixhostを中心にWordPressおすすめレンタルサーバーを比較・紹介していきます。これからWordPressでホームページやブログを開設するためにレンタルサーバー選びを検討している方はこちらをご覧ください。

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【総まとめ】WordPress(ワードプレス)ホームページ作り方

【総まとめ】WordPress(ワードプレス)ホームページ作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

-HTML