WordPressでリンクに付与される「rel=“noopener”」の意味とは?

BLOG WordPress

noopenerの正体を知りたい人「WordPressでリンクを設置すると、rel=“noopener”が自動で付与されるんですけど、これって何の意味があるんでしょうか?」

こういった疑問に答えます。

本記事の内容

  • rel=“noopener”の意味とは
  • rel=“noreferrer”の意味も解説

記事の信頼性

本記事を書いている私はブログ歴2年以上。記事数は350を超えました。WordPressに関する記事も多数アップしています。

今回は、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”」が付与される理由は、以下の2つ(参照: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 が実行されていると、リンク元のページのパフォーマンスが低下するおそれがあります。

上記のとおり。

このパフォーマンス低下への対策として、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年4月、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的に超重要。

以下の記事で解説してますので、この機に理解しておきましょう。

今回は以上です。

参考【副業】初心者がブログアフィリエイトで月1万円稼ぐコツ5選