WordPressのメニューのカスタムリンクに rel=noopener をつけるには？
最近話題になっている rel="noopener" 。
target="_blank" には必ずセットで rel="noopener"（No Opener）をつけてねってGoogle先生が言っていますね（多分2018年頃から）。
セキュリティ&パフォーマンス的にとても大事だからなんですね〜
んで、WordPress5.1 から記事中の外部リンク（target="_blank"）にも自動で rel="noopener noreferrer" がつくようになりました。（2019年2月頃）
noopener が必須なのは分かるけど、noreferrer は無くて良くない？なんて話もちらほら出たりしてますね。気持ち、すごく分かる。
それはさておき。
WordPressのメニューでカスタムリンクを外部リンクにして、noopener したい時はどうするんじゃ？
これですね！表示オプション。
ここで リンクターゲット、自分とリンク先の関係/間柄（XFN）にチェックを入れます。いやー気づかなかったw
リンクターゲットを「新しいタブで開く」にしよう
リンクターゲットを表示したことで、「リンクを新しいタブで開く」というチェックボックスが現れました。チェックを入れると当然 target="_blank" が出力されます。
そして、この target="_blank" にした時点で WordPress が気を利かせて rel="noopener noreferrer" を自動付与 してくれます。
<a target="_blank" rel="noopener noreferrer" href="https://www.example.com/">運営会社</a>
ただこの場合、リンク先はサイトの運営会社なので、noreferrer だとあちら側のアクセス解析でこちらから来たことが分からない。それは困るじゃありませんか……🥺
また、Web担当者フォーラムさんのこの記事でも以下のように言及されてます。（太字は私による）
さらに、たとえば社内情報共有システムやイントラネットから外部サイトへのリンクでは、rel="noreferrer" を使うのもいいだろう。その場合、rel="noopener noreferrer" のように記述すればいい。
こうしておけば、そのリンクをたどってもブラウザはアクセス先のサーバーにリファラーを送信しない。そのため、アクセス解析データやログデータから「なるほど、この会社では内部ネットワーク名がこういう命名パターンなのか」「内部ネットワークにこういうホスト名でWebサーバーが動いているのか」といったことをリンク先サイトの管理者に知られなくて済む。
つまり相手方にこちらの素性を知られても問題ない場合（ほとんどがそうだと思うけど）は、noreferrer はつけなくても良いんじゃないかなーと思います。よね？
「自分とリンク先の関係/間柄（XFN）」に noopener を入力しよう
そこで追加で自分とリンク先の関係/間柄（XFN）に noopener と入力してみましょう。するとあら不思議。html は無事 rel="noopener" だけになりました✨ リファラ送るぞ〜
<a target="_blank" rel="noopener" href="https://www.example.com/">運営会社</a>
てな訳で、メニューのカスタムリンクに target="_blank" したいリンクを入れる時は、リンクターゲット、自分とリンク先の関係/間柄（XFN）の両方を設定した方が良いかもね、というお話でした。
ちゃんちゃん。
余談: noopener のサポートブラウザ
さて、noopener、2018年当初は IE11、Edge は非対応で大丈夫なんか…と思ってましたが、現時点（2020/05/08）では Edge は対応しているようです。
よかったよかった👏
…IE11よ…
まだユーザー多いんだからサポート切れるまで頑張ってよ…🥺しくしく
さて、いかがでしたでしょーか！
ツッコミ感想ありましたら @bissybissy までどうぞ。
この記事が気に入ったらサポートをしてみませんか？