Lighthouse | target=”_blank”での外部リンクにはnoopenerかnoreferrerを付ける
google ChromeのSEOチェック拡張機能「Lighthouse」で検出された問題点を確認して解決していきます
今回はBest Practicesカテゴリにあるリンクがcross-originに対応していない場合に減点される項目です
Links to cross-origin destinations are unsafe
翻訳すると
クロスオリジンの目的地へのリンクは安全ではありません
と、なります
cross-originは見ると目を背けたくワードのひとつですが、この項目への対応は簡単でtarget=”_blank”が設定されたHTTPSへの外部リンクタグには「rel="noopener」か「rel="noreferrer"」を付けましょうってやつですね
WordPressで自動生成される外部リンクには基本的に「rel="noopener noopener"」が付与されますが、自分で設置するリンクタグにつけ忘れたりしていますね
「rel="noopener」「rel="noreferrer"」の違いは？
「rel="noopener」はHTTPS経由の遷移先のページにtarget="_blank"で開く事にセキュリティ上の脆弱性がありその対策として生まれた宣言になります
「rel="noreferrer"」は遷移先のページにリファラーを送信しない設定で、「rel="noopener」に対応していない古いブラウザでtarget="_blank"の脆弱性から守る為に付けられる宣言ですh
修正方法
リンクタグに「rel="noopener"」を付けます
<a href="https://1-notes.com/" target="_blank" rel="noopener">ONE NOTE</a>または「target="_blank"」を外す事で問題は解消されます
ちなみにリンクひとつ付いてないだけでBest Practicesでは7点も減点されます！
