WordPressでリンクを設置すると、rel=“noopener”が自動で付与されるんですけど、これって何の意味があるんでしょうか？
hideこういった疑問に答えます。
今回は、rel=“noopener”の意味を解説します。
WordPressでリンクを設置すると、「rel=“noopener”」なるものがHTMLコードに自動で付与されちゃいます。
これって何の意味があるか、気になりますよね？
結論をいうと、この「rel=“noopener”」は、（外部）リンクを新しいタブで開く場合に、セキュリティの低下やパフォーマンスの低下を防ぐためのもの。
SEOに直接影響ありませんが、知っておいて損はありません。
ブロガーさんは、ぜひご覧ください。
WordPressのリンクに付与される「rel=“noopener”」の意味とは？
WordPressで記事を書いていて、内部リンクや外部リンクを設置することがありますよね。
このリンクを設置したときに、リンク先のページを新しいタブで開く設定にすると、「rel=“noopener”」が自動で付与されるわけです。
実際の画面で見てみましょう。
WordPressの投稿画面で、リンクを設定するボタンをクリックします。
ブロックエディタの場合
表示される設定画面で、[新しいタブで開く]を選びます。
テキストエディタの場合
表示される設定画面で、[リンクを新しいタブで開く]を選びます。
すると、以下の赤線のように、「rel=”noopener”」が自動で付与されます。
図だと見えにくいかもしれないので、テキストで書いてみました↓
<a href="リンク先URL" rel="noopener" target="_blank">テキスト</a>「target=“_blank”」が、リンク先ページを新しいタブで開くための属性です。
この「rel=“noopener”」が付与される理由は、以下の２つです（参照：Googleのデベロッパーサイト）。
- 理由①：セキュリティの低下を防ぐ
- 理由②：パフォーマンスの低下を防ぐ
理由①：セキュリティの低下を防ぐ
リンク先ページを新しいタブで開く設定にすると（「target=“_blank”」属性をつけると）、セキュリティの問題がでてきます。
リンク先のページでは window.opener を使用して元ページにアクセスしたり、window.opener.location = newURL によって元ページの URL を変更したりができるので、、
（外部）リンク先のページに悪意をもったJavaScriptが記載されていれば、リンク元であるあなたのページを改ざんできちゃうわけです。
これは、Tabnabbing（タブナビング）と呼ばれる脆弱性です（参照：ウィキペディア、Jxckの解説記事）。
この脆弱性への対策として、WordPressでは、リンク先ページを新しいタブで開く設定にすると、自動的に「rel=“noopener”」が付与されるわけです。
「rel=“noopener”」をつけることで、その名のとおり、リンク先がwindow.openerを使うことを阻止できますから。
理由②：パフォーマンスの低下を防ぐ
リンク先ページを新しいタブで開く設定にすると（「target=“_blank”」属性をつけると）、パフォーマンスの問題が出てきます。
Googleのデベロッパーサイトによると、以下の記載があります。
target=”_blank” を使用して任意のページから別のページにリンクしている場合、リンク元のページとリンク先のページは同じプロセスで動作します。 そのため、リンク先のページで負荷の高い JavaScript が実行されていると、リンク元のページのパフォーマンスが低下するおそれがあります。
Googleのデベロッパーサイト
上記のとおり。
このパフォーマンス低下への対策として、WordPressでは、リンク先ページを新しいタブで開く設定にすると、自動的に「rel=“noopener”」が付与されるわけです。
以上、「rel=“noopener”」の意味を解説しました。
リンク先のページを新しいタブで開く設定にしなくていいと思う
ここまでお伝えしたように、リンクを新しいタブで開く設定にしたときに、「rel=“noopener”」を付けないと、セキュリティーやパフォーマンスの問題がでてくるわけですが、
WordPressをお使いであれば、「rel=“noopener”」が自動的に付与されるので安心です。
とはいえ、、
そもそも、「リンクを新しいタブで開く」設定にしなければ、この手の問題を気にすることさえなくなるわけです。
なので、私の場合は基本的に、リンクの設定は新しいタブで開かないようにしています。
つまり、「リンクを新しいタブで開く」にはチェックをつけないってことです。
それに今だと、ほとんどのサイトは、パソコンよりスマホからの流入の方が多い。スマホだと、リンクを新しいタブで開こうが開くまいが、読者の操作はほぼ変わりませんからね。
以上の理由から、私の場合は、リンクの設定は新しいタブで開かないようにしています。
参考まで。
補足:「rel=“noreferrer”」の意味とは？
類似する「rel=“noreferrer”」も紹介しておきましょう。
「rel=“noreferrer”」の意味とは？
referrer（リファラ）とは参照元のこと。
「rel=”noreferrer” 」とは、「参照元の情報をリンク先に送らないで下さいね！」と指示するための属性タグです。
電話で例えると、番号非通知で電話をかける感じ。着信側は誰からかかってきたのかわかりません。
リンク元の情報を渡さないことで、渡したくない情報（ユーザーIDなど）がURLリンクに含まれていても大丈夫です。
単純に自分のサイトからの流入であるとバレたくないケースにも使えます。
「rel=“noreferrer”」が必要なら直打ちしましょう
WordPress4.8ぐらいから、「リンクを新しいタブで開く」にすると、自動的に「rel=“noreferrer”」が付与された時期があったようです。
ただし、現在（2022年４月、WordPress5.9）では、「リンクを新しいタブで開く」にしても、「rel=“noreferrer”」は自動で付与されません。
よって、もし外部リンクに「rel=“noreferrer”」をつけたいときは、HTMLに直打ちする必要があります。
コードは以下のとおり。
<a href="リンク先URL" rel="noreferrer">テキスト</a>「rel=“noreferrer”」の注意点
アフィリエイトリンクを設置するならば、「rel=“noreferrer”」はつけないようにご注意ください。
アフィリエイト側にとっては、リンク元の情報は必要。
もし「rel=“noreferrer”」が付いていると、アフィリエイト側が「どのページから成果が発生したのか」を見失ってしまうおそれがあるからです。
前述のように、WordPressをお使いであれば、「rel=“noreferrer”」が自動で付与されることはありませんが、知識として知っておきましょう。
まとめ：「rel=“noopener”」はリンクを新しいタブを開いたときのセキュリティ保護
今回は、WordPressで「リンクを新しいタブで開く」設定にしたときに、自動で付与される「rel=“noopener”」について解説しました。
この「rel=“noopener”」は、（外部）リンクを開いたときのセキュリティー低下を防ぐためのもの。
あとは、パフォーマンス低下を防ぐ効果もあります。
くりかえしですが、WordPressの場合は、「rel=“noopener”」は自動で付与されるのでご安心ください。
ただし、そもそも「リンクを新しいタブで開く」設定にする必要はないかなと私は考えています。
サイト閲覧の主流になったスマホだと、新しいタブで開く設定にしようがしまいが、読者からすると変わりませんからね。
参考情報
なお、今回紹介した“noopener”や“noreferrer”の他に、rel属性の“nofollow”と、metaタグの“noindex”というのがあります。
ネーミングは似てますが、役割は全く違うもの。そして、SEO的に超重要。
以下の記事で解説してますので、この機に理解しておきましょう。
» 【SEOで必須】noindex・nofollowとは？metaタグの書き方や設定方法
今回は以上です。