僕にとってはこの話題はとっても旬なのですが、ちょうどWordPressをいじっていた際にリンクにtarget="_blank"を付けるとrel="noopener noreferrer"が付いてしまうことに気が付いた。
問題はnoreferrerが付いてしまう事で、場合によってはこのnoreferrerが邪魔になってしまう。
頻繁に拝見させていただく海外SEO情報ブログでたまたまこの話題が取り上げられていた。
www.suzukikenichi.com読み進めていくとtarget="_blank"を使う際はrel="noopener"がとても重要としている。noreferrerの件で頭の中がいっぱいになっていたのだけど、target="_blank"と使う際の注意として色々ためになることを初めて知った。日々勉強。下のリンクはグーグルのデベロッパーサイト。
developers.google.com外部サイトのリンクって例えばどういうときに使うだろうか
そんなことを思った今、使っている。
どうやらtarget="_blank"にはセキュリティ上の脆弱性があるとか。はてなブログで使用するブログカードにはtarget="_blank"が使われているけれど、rel="noopener"は使われていない。では、このブログカードを使うということはセキュリティ上の脆弱性にダイブしているも同然という事なのだろうか。そこら辺の答えが知りたいのだけど僕には謎だ。
リンク記入例
上記のグーグルデベロッパーサイトの中でこのように記されている。レポートを確認して、Lighthouse で特定された各リンクに rel="noopener" を追加します。 一般的に、外部リンクを新しいウィンドウまたはタブで開く場合は、必ず rel="noopener" を追加してください。
引用：サイトで rel="noopener" を使用して外部アンカーを開く
https://developers.google.com/web/tools/lighthouse/audits/noopener?hl=ja
書き方としては、
<a href="https://examplepetstore.com" target="_blank" rel="noopener">...</a>
要はtarget="_blank"とrel="noopener"をセットにしてしまえば良いという事なのだろう。別にこのことに対して反発する理由もないので、target="_blank" rel="noopener"を1セットで使い慣れたら良いだけの話だ。
それはそうなのだけど、WordPressでtarget="_blank"を使うと、rel="noopener noreferrer"が必ずついてしまう事にどうしたもんかなと悩んでいる。target="_blank"を使わなければrel="noopener noreferrer"が付くことがないのだけど、外部リンクを開く時に「使用しているタブ」で開かれると結構うざったい。
そこで「新しいタブで開く」をしてしまうと結局はtarget="_blank"で開くのと同じことになってしまう。
別タブで開く場合にはrel="noopener"
そのため、target="_blank" がついた（信用できるとは限らない外部向け）リンクには、rel="noopener" を付け加えることを原則としておくのがいいだろう。
さらに、たとえば社内情報共有システムやイントラネットから外部サイトへのリンクでは、rel="noreferrer" を使うのもいいだろう。その場合、rel="noopener noreferrer" のように記述すればいい。
引用：グーグルのエンジニアが警告、「別タブで開く」リンクは実はヤバいんだって！？【SEO情報まとめ】
https://webtan.impress.co.jp/e/2020/03/13/35510
外部サイトをぺたぺたと自分のサイトにリンクしないことが一番良いのだろう。けれども、外部サイトのリンクを貼る際には信用ありなしに関わらず、target="_blank"で開くリンクにはrel="noopener"を付ける事がセキュリティ上の脆弱性から自身を守る方法とされている。
現在target="_blank"を使用しているリンクがあるならば、是非チェックしてみてはいかがでしょうか。
