rel="noopenertとは？
rel="noopenerは、aタグの一種で、外部リンクを新しいタブで開く際に使われます。身近な例だと、Wordpressで「新しいタブで開く」にチェックを入れると、自動的に付与されるものがrel="noopenerです。
従来、新しいタブでリンクを開く場合は、target属性のtarget=”_blank”を使いますが、それにrel="noopenerをつけるといった使用例がよく見られます。rel="noopenerとはいったい何なのでしょうか。
今回は、rel="noopenerについて、よく似ているrel=”noreferrer”とrel=”nofollow”を一緒に取り上げながら解説をしていきます。
noopenerの役割
noopenerには以下の2つの役割があります。
- target="_blank"の脆弱性対策
- ページパフォーマンスの低下を回避する
順に詳しく見ていきましょう。
target="_blank"の脆弱性対策
target="_blank"を使って新しいリンクを開いた場合、新しいタブからwindow.openerというオブジェクトを用いてリンク元の操作ができてしまいます。
リンク先のサイトが悪意のあるサイトや、ハッキングされているサイトだった場合に、リンク先から自分の見ていたリンク元ページにアクセス・操作される可能性があります。また、フィッシング詐欺に利用されるリスクもあるのです。
openerを否定するnoをつけたnoopenerを使うことで、元ページは操作されません。これにより、サイトのページを不正に改ざんされるのを防ぐことが可能です。
ページパフォーマンスの低下を回避する
target=”_blank”で開かれたページと元リンクのページでは、同じJavaScriptが使われています。したがって、開かれたリンク先の動作が重いと、元ページの動作も重くなる可能性があるようです。
rel="noopener"を設定することで、リンク先で負荷の大きいJavaScript処理が行われても、リンク元ページが影響を受けることを防げます。
noopenerの注意点
noopenerは現在ほとんどのブラウザに対応していますが、Internet Explorerなど一部の古いブラウザでは対応していない場合があります。対応していないブラウザを以下のWebページで把握しておくと良いでしょう。
https://caniuse.com/?search=noopener
rel=”noreferrer”とは？
rel=”noreferrer”はaタグの一種で、noopenerと似たような効果を持ちます。役割を細かく見ていきましょう。
rel=”noreferrer”の役割
rel=”noreferrer”には以下の2つの役割があります。
- 参照先に参照元リンクを渡さないようにする
- 古いブラウザへの対応
順に詳しく見ていきましょう。
参照先に参照元リンクを渡さないようにする
rel="noreferrer"を使うことで、参照先に対して参照元のリンクを渡さないようにすることが可能です。アフィリエイトで主に影響が見られ、参照元が正しく追跡できないので、どのページから成果報酬が発生したかが分からなくなります。
トラッキングへの影響はないため売上は発生しますが、売上の発生源が不明になるため、アフィリエイトには向かないリンクといえるでしょう。
古いブラウザへの対応
noopenerは古いブラウザへ対応していない場合があると説明しましたが、noreferrerは対応ブラウザが広いため、noopenerのカバーが可能です。noopenerと同様の効果をもつため、アフィリエイトサイト以外では使用感に問題はありません。
noreferrerの注意点
noreferrerでは参照元を追跡できないので、成果発生源を把握しておきたいアフィリエイトサイトには向きません。現在のWordPressでは「リンクを新しいタブで開く」にしても自動でnoreferrerは付与されないので心配不要です。
noopenerとnoreferrerの違い
noopenerは新しいタブでリンクを開く際に参照元にアクセスできるのを防止できる一方で、noreferrerは参照先に対して参照元のリンクを渡すのを防止するという違いがあります。
noreferrerでは、参照元のリンクを渡さないようにする効果があるので、アフィリエイトサイトには向かない一方、noopenerでは、アフィリエイトの成果発生元を遡れるので、アフィリエイトサイトでも使えることが分かりやすい違いです。
noopenerとnoreferrerの使い方
noopenerとnoreferrerはtarget=”_blankと組み合わせて使います。最新のWordPressでは「新しいタブで開く」を押すと自動でnoopenerがつくようになりました。ここでは、noopenerとnoreferrerの記載方法を見ていきましょう。
noopenerの記載方法
noopenerを使う際は以下の通りに記載しましょう。
a href="サイトのリンク/" target="_blank" rel="noopener"></a>
「サイトのリンク」の部分に、新しいタブで開きたいウェブサイトのリンクを挿入してください。
noopenerとnoreferrerを両方記載する方法
noopenerとnoreferrerを両方使いたい場合は、以下の通りに記載しましょう。
a href="サイトのリンク" target="_blank" rel="noopener noreferrer"></a>
こちらも「サイトのリンク」の部分に、新しいタブで開きたいウェブサイトのリンクを挿入しましょう。
rel="noopener"の対応状況
rel"noopener"はInternet Explorerのような古いブラウザでは対応していないと記載しましたが、現在の対応状況はどうなっているのでしょうか。詳しく見ていきましょう。
ブラウザ・Wordpressはほとんど対応済み
2019年3月にSafar12.1が公開され、本バージョン以降、rel=”noopener”に対応しています。
2020年7月にFireFox79が公開され、本バージョンから、rel=”noopener”が適用されるようになりました。
また、Googleは2021年1月にchrome88を公開し、このバージョン以降 rel=”noopener”が規定値となり、記述不要になったのです。
現在、主に使われているブラウザには対応されていることがわかります。
noopenerとnoreferrerを併用する必要性
現在では、noopenerはほとんどのブラウザで対応しているため、rel="noreferrer"を設定しなくても問題はありません。Internet Explorerのように、すでにサポートが終了したブラウザに対応させたい場合には、noreferrerも設定すると良いでしょう。ただし、noreferrerはアフィリエイトサイトには向かない面があるので、必要なければnoreferrerはつけない方が無難です。
設定しない場合SEOに影響があるのか？
noopenerとnoreferrerの役割を考えると、設定の有無でSEOに影響はないことが予想されます。SEOの話なので憶測になってしまいますが、今回の2つの場合では直接的な影響はほとんどないと考えられます。
ただし、似たような働きをするnofollowはSEOに影響のあるrel属性となっているため、注意が必要です。
そもそもrel属性とは？
relとはrelation（関係）の略称で、rel属性とは、現在のドキュメントとリンク先のドキュメントの関係性を示すものです。ハイパーリンクやファイルの読み込み、フォーム投稿の際の利用が主な例といえます。<link>、<a>、<area>、<form> で有効です。例えば、link要素の場合は、<link rel="stylesheet" href="style.css">のように記載をします。
rel属性の種類
rel属性にはさまざまな種類のものがあります。代表的なものは以下の通りです。
| alternate | 代替文書 （例えば別言語版、別フォーマット版など） |
| archives | アーカイブ |
| appendix | 付録となる文書 |
| canonical | 現在の文書の優先URLを指定する |
| author | 著者情報 |
| bookmark | 文書の固定リンク |
| chapter | 連続した文書における章となる文書 |
| contents | 目次となる文書 |
| copyright | 著作権表示のための文書 |
| dns-prefetch | ユーザエージェントがターゲットリソースの生成元の DNS 解決を先行して実施するよう指定 |
| external | 外部サイトへのリンクであることを示す |
| glossary | 用語集となる文書 |
| help | ヘルプへのリンク |
| icon | アイコンをインポートします |
| index | 索引となる文書 |
| modulepreload | ユーザエージェントが先行してモジュールスクリプトをフェッチし、文書のモジュールマップに格納しなければならないことを指定します |
| last | 連続した文書における最後の文書 |
| license | ライセンス文書 |
| next | 連続した文書における次の文書 |
| nofollow | 重要でないリンク |
| noopener target | 属性を持つリンクを開く際、Window.opener プロパティを設定しません |
| noreferrer | ユーザーがリンクを移動する際、リファラを送信しません |
| opener target | 属性を持つリンクを開く際、Window.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はある外部リンクを自分のサイトと関連付けたくないときに使用する値です。
nofollowを使用する目的は、リンクしているが信頼できるリソースとは言えない場合や、低品質なサイト、自サイトの内容と無関係なサイトへのリンクに設定することで、リンク評価を受け渡したり、Googleの検索エンジンにクロールされたりするのを防ぐことです。
Webサイトによっては、口コミやコメントによって、サイト運営者の意図とは外れたコンテンツになってしまうことがあります。コメント欄に書き込まれたリンクに自動でnofollowを付与することにより、コメント欄を悪用してPageRankを獲得するスパム行為を対策することが可能です。
尚、nofollowは「命令」としての扱いでしたが、2019年9月より「ヒント」としての扱いに変更されました。検索エンジンは検索結果の最適化のために、リンクから得られる情報も読み取っています。したがって「命令」だと改善の妨げになるとの判断で「ヒント」へ変更されたと考えることが可能です。
「ヒント」扱いになったことで、nofollowを付けていてもリンク先を評価する可能性が発生するようになりました。
rel="noopenerのまとめ
今回は rel="noopener"に関して、似た働きをするrel="noreferrer"とrel=" nofollow"も紹介しながら解説をしました。
これらのrel属性は意味を正しく理解して活用することで、悪意あるユーザーからサイトを守ることができます。正しく理解し、サイトの改善に使っていきましょう。
