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

BLOG WordPress

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

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

本記事の内容

こんにちは、ヒデハルです。
ブログ歴は15ヶ月ほど。

WordPressでリンクを設置すると、「rel=“noopener”」が自動で付与されちゃいます。

これって何の意味があるか、気になりますよね?

結論をいうと、外部リンクを新しいタブで開く場合、「rel=“noopener”」は、セキュリティとパフォーマンスの観点で大切です。

そこで今回は、“noopener”の必要性と、類似する“noreferrer”について解説します。

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

結論は、外部リンクを新しいタブで開く時には、セキュリティとパフォーマンスの観点であった方がよいです。

「rel=“noopener”」は自動で付与される

WordPressで、リンクを新しいタブで開く設定にすると、自動で付与されます。

WordPressの投稿画面で、クイックタグ[link]をクリックして↓

設定画面で、[リンクを新しいタブで開く]を選ぶと↓

すると、以下の赤線のように、「rel=”noopener”」が自動で付与されます↓

ちなみに青線の「target=“_blank”」がリンクを新しいタブで開くための属性。

「rel=“noopener”」の意味とは?

リンクを新しいタブで開く場合、以下の観点で重要です。

  • セキュリティ
  • パフォーマンス

» 参考:Googleのデベロッパーサイト

セキュリティ観点

実は「target=“_blank”」にはセキュリティ的に問題があり、リンク先に悪意のあるコードが含まれていると、フィッシング詐欺被害を受ける可能性がある事が知られてます。

リンク先のページでは window.opener を使用して元ページにアクセスしたり、window.opener.location = newURL によって元ページの URL を変更したりができるので、、

リンク先のページに悪意をもったJavaScriptが記載されていれば、リンク元であるあなたのページを好きに改ざんできちゃうわけです。

これはTabnabbing(タブナビング)と呼ばれる脆弱性で、以下のデモがわかりやすい。
» リンクへのrel=noopener 付与による Tabnabbing 対策

この脆弱性への対策として、WordPressで「target=“_blank”」を指定すると、自動的に「rel=“noopener”」が付与されるようになりました。

「rel=“noopener”」をつけることで、その名のとおり、リンク先がwindow.openerを使うことを阻止できますから。

パフォーマンス観点

Googleのデベロッパーサイトによると、以下の記載があります。

target=”_blank” を使用して任意のページから別のページにリンクしている場合、リンク元のページとリンク先のページは同じプロセスで動作します。 そのため、リンク先のページで負荷の高い JavaScript が実行されていると、リンク元のページのパフォーマンスが低下するおそれがあります。

よって、パフォーマンスの観点からしても、「target=“_blank”」を指定する時には、「rel=“noopener”」を付与しておくのがいいでしょう。

ここまでの話をまとめると

信用できるとは限らない外部リンクを新しいタブで開くときには、「rel=“noopener”」は付けときましょう。

コードでいうと以下ですね。

<a href="リンク先URL" target="_blank" rel="noopener">テキスト</a>

内部リンクはどうなの?

内部リンクを新しいタブで開く際には、「rel=“noopener”」をつける必要はありません。だって、内部リンク=自分のページ(安心)ですからね。

ここで改めて考えてみると、、

それなら、リンクを新しいタブで開かないのがいいんじゃないでしょうか

「target=“_blank”」を使わなければ、脆弱性やらパフォーマンスやらを気にしなくていいわけですから。

私は本件のことを知ってからは、WordPressのリンク設定で、「リンクを新しいタブで開く」にチェックを入れないことに決めました。

補足:「rel=“noreferrer”」の意味とは?

類似する「rel=“noreferrer”」も紹介しておきましょう。

「rel=“noreferrer”」の意味とは?

referrer(リファラ)とは参照元のこと。

「rel=”noreferrer” 」とは、「参照元の情報をリンク先に送らないで下さいね!」と指示するための属性タグです。

電話で例えると、番号非通知で電話をかける感じ。着信側は誰からかかってきたのかわかりません。

リンク元の情報を渡さないことで、渡したくない情報(ユーザーIDなど)がURLリンクに含まれていても大丈夫です。

単純に自分のサイトからの流入であるとバレたくないケースにも使えます。

「rel=“noreferrer”」が必要なら直打ちしましょう

WordPress4.8ぐらいから、「リンクを新しいタブで開く」にすると、自動的に「rel=“noreferrer”」が付与されたときがあったようです。

ただし、本記事を書いてる時点(2020/8月、WordPress5.5)では、「リンクを新しいタブで開く」にしても、「rel=“noreferrer”」は自動で付与されません。

よって、もし外部リンクに「rel=“noreferrer”」をつけたいときは、HTMLに直打ちしましょう。コードは以下のとおり。

<a href="リンク先URL" rel="noreferrer">テキスト</a>

「rel=“noreferrer”」の注意点

アフィリエイトリンクを設置するならば、「rel=“noreferrer”」はつけないようにしましょう。

アフィリエイト側にとっては、リンク元の情報は必要ですよね?

「rel=“noreferrer”」が付いてることによって、アフィリエイト側が「どのページから成果が発生したのか」を見失ってしまう可能性が高くなるからです。

アフィリエイターは気をつけて下さいね。

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

記事のポイントをまとめます。

  • 外部リンクを新しいタブで開くと、セキュリティとパフォーマンスの観点でリスクがある。
  • 「rel=“noopener”」をつけると、上記のリスクを回避できる。
  • WordPressなら「rel=“noopener”」が自動で付くので残しておこう。
  • 「rel=“noreferrer”」はリンク元の情報をリンク先に渡さないための属性。
  • 設定したいなら、HMTLに直打ちすること。
  • アフィリエイトリンクには「rel=“noreferrer”」を付けちゃダメ。

上記の感じ。

なお、rel属性の“nofollow”と、metaタグの“noindex”は、ネーミングは似てますが、役割は全く違います。

この2つは、SEO対策にもなりますので、以下の記事でご確認下さい。

参考になれば幸いです😌

参考AddQuicktagの設定と使い方|WordPressのおすすめプラグイン

参考WordPressブログの始め方を初心者に解説。アフィリエイトで稼ぐ!