target=”_blank”とは？適切な使い方や注意点を解説

サイトにリンクを設定する際に、外部サイトへのリンクだからと何気なくtarget=”_blank”を設定する場合がありますね。
本記事を執筆する私もtarget=”_blank”でリンクを設定する事が多々あります。

さて、外部リンクを設定する場合、全てtarget=”_blank”の設定で問題ないのでしょうか？
改めてtarget=”_blank”の正しい使い方や注意点を掘り下げて考えてみます。

target=”_blank”とは

target=”_blank”（ターゲットブランク）とは、リンク先が新しいウィンドウ（タブ）で表示されるように指定するリンクタグの属性のひとつです。
使用例は以下のように使用します。

<a href="example.com" target="_blank" rel="noopener">使用例です</a>

target=”_blank”を使用するメリット・デメリット

それでは、メリット・デメリットについて考えていきます。メリットはあってもデメリットがあるの？とお考えになったかもしれません。それぞれ見ていきましょう。

はじめにtarget=”_blank”でリンクを設定するメリットとして考えらえるのは以下の点ではないでしょうか。

• 元のページに戻りたい時にブラウザバックで戻らなくて済む
• （元のページの）ユーザーの離脱率を下げる

特に思い当たるのは、時間のかかるダウンロードするファイルや音楽など、別タブで表示されている方がありがたいですね。

閲覧ユーザーもサイト側も、上記のように双方メリットがあるように思えるtarget=”_blank”ですが注意したい点もあります。

セキュリティに対する注意点

target=”_blank”にはセキュリティに関する問題が指摘されています。
どのような事かというと、

同じブラウザ内でリンク元Aとリンク先Bが別々のタブで開いている場合があるとします。

リンク先Bでリンク元Aを操作できるJavaScriptのスクリプト「window.opener」が実行された場合、
リンク元Aが改竄されてしまうといった問題が起こる可能性があるのです。

このような改竄のリスクへの対処法としては
target=”_blank”を設定したリンクに、
リンク先から「window.opener」を使ってリンク元が参照できなくなるという「rel=”noopener”」を付ける事です。

更にもう一つ、リンク元の情報をリンク先におくらない属性「rel=”noreferrer”」を付けることで「rel=”noopener”」がサポートされていないブラウザにも対応できます。

使用例は以下です。

<a href="example.com" target="_blank" rel="noopener noreferrer">使用例です</a>

パフォーマンス低下の問題点

同じブラウザ内の別タブで開かれるtarget=”_blank”ですが、リンク先に負荷のかかるJavaScriptが実行されるとページの表示速度の延滞などリンク元のパフォーマンスにも影響を及ぼすようです。
ページのパフォーマンスはSEO対策をされている方にとって意識されている方も多いのではないでしょうか。
もし気になるようでしたらtarget=”_blank”を削除する事も検討されると良いですね。

target=”_new”との違いについて

target=”_blank”に似たリンクタグの属性に「target=”_new”」があります。
target=”_new”もtarget=”_blank”同様に新しいタブでリンク先を表示するといった属性ですが違いは次の通りです。

個人的にはtarget=”_new”はあまり使用した事がなかったのですが、改めて比較してみるとtarget=”_blank”は閲覧ユーザーにとって利便性を損なうケースが発生しそうですね。
また、target=”_new”も別タブで開くので「rel=”noopener”」を付ける事が推奨されています。

主要ブラウザとWordPressの対応状況

target=”_blank”に関する主要ブラウザの対応状況を確認しました。
2021年公開の「chrome88」以降ではtarget=”_blank”の指定されたリンクは、「rel=”noopener”」が規定値とされ、記述しなくても良くなりました。
その他、Safariは2019年3月に公開したv12.1より対応済み、FireFoxもFireFox79以降「rel=”noopener”」が規定値となっているようです。

また、WordPressですがWordPress5.1以降、target=”_blank”が設定されたリンクには「rel=”noopener noreferrer”」が自動付与されるようになっています。
主要ブラウザやWordPressでは、target=”_blank”の使用について、それほど気にしなくても良さそうです。

target=”_blank”の使用について

ここまでリンクタグのtarget=”_blank”についてメリットやデメリット、注意点などご紹介してきました。
使用する際にはセキュリティの観点から見ても「rel=”noopener noreferrer”」を付けた方が良さそうですが、WordPressのバージョンによっては気にすることなく使用できます。

また、target=”_new”との使い分けは好みや用途の問題ではないでしょうか。
気になった方はサイトのリンク設定を確認してみてください。
皆さまは外部サイトへリンクを設定する際にどちらを設定しますか？