外部リンクには「rel="noopener"」が付く

WordPressの場合、外部リンクで別タブで開くようにしていたもの、つまり、「target="_blank"」を付けたものには「rel="noopener"」が自動的に付与されます。セキュリティの点からこのような仕様になっています。この辺の事情は調べればたくさん出てきます。例えばこちらの記事。

自分で設置したリンクなら投稿エディタの段階で"noopener"が自動的に付け加えてくれます。これでOKかと思いきや…。

[スポンサードリンク]

「rel="noopener"」が自動付与されないものもある

プラグインなどによって生成されたリンクではそうはなりません。例えば、このブログでは、「Auto-hyperlink URLs」というプラグインを導入しています。

これを使うと、URLだけをベタ書きしたものを自動的にハイパーリンクにしてくれます。この下、単にGoogleのURLを書いただけです。

https://www.google.co.jp/

自動的にハイパーリンクに変換されてクリックできるようになっています。

このソースを確認してみるとこうなっています。

「target="_blank"」が付いていますが、「rel="noopener"」は付いていません。「rel="noopener"を付けるべき」という観点からするとまずい状態です。

Auto-hyperlink URLs」を止めて、自分でちゃんと書き直せばいいのでしょうが、それは面倒です。

[スポンサードリンク]

「rel="noopener"」を付けてくれるプラグイン

こういう場合も、やはり、対応できるプラグインがありました。「External Links」というものです。

早速導入します。

有効化すると、肝画面のサイドバーに「外部リンクというメニューが追加されます。

これをクリックすると設定画面が出てきます。

色々と設定できるようですが、今回の目的では下のように設定します。

外部リンク」タブの中で、「設定を適用」と「"noopener"を追加」にチェックを入れます。「rel属性の追加」のところは他のものにもチェックが入っていると思いますが、それらは外しておきます。後は、「変更を保存」をクリックすればOKです。

これで、先程のリンクのソースを再び見てみます。

「rel="noopener"」が付加されています。他に「data-wpel-linl="external"」もふかされてますが、これはこのプラグインの管理用のものだと思います。

[スポンサードリンク]

他のプラグインによるリンクの確認

Auto-hyperlink URLs」プラグインによる外部リンクは上手く行きました。他のプラグインによるものも確認しておきます。

Pz-LinkCard

外部リンクをカード形式で表示してくれるものです。例えばこんな感じ。

これは、このブログ内の別の記事をPz-LinCardを使って表示させたものです。この記事がPz-LinkCardの紹介です。

では、これで作った外部リンクを見てみます。

※これはキャプチャ画像です。クリックできません。

External Links」を導入前の状態。

導入後。

無事、「rel="noopener"」が付いています。

WP Associate Post R2

Amazonなどのアフィリエイトリンクを生成してくれるプラグインです。詳細はこちらの記事で。

表示例。

External Links」を導入前のソースコード。

タイトル部。

三つのリンク。

External Links」を導入後。

「rel="noopener"」が付きました。「rel="nofollow"」は最初から付いており、その状態も保存されています。

これで大丈夫そうです。

この記事のタイトルとURLをコピーする

スポンサードリンク