「target=”_blank”」とは?概要や使い方、問題点、対処法なども解説!

「target=”_blank”」とは?概要や使い方、問題点、対処法なども解説!

「target=”_blank”」とは、リンク先を別タブで開くよう指定できるHTMLタグの1つです。

今回は「target=”_blank”」に焦点を当て、その概要や使い方、問題点、対処法などをご紹介します。気になるポイントを一挙確認してしまいましょう。

「target=”_blank”」とは?

「target=”_blank”」とは、リンク先を別タブで開くよう指定できるHTMLタグの1つです。

リンク先を別タブで開くよう指定できるメリットとしては、以下のような例があります。

①現ページ内で音楽を再生している場合、通常リンクをクリックすると、音楽が中断してしまうためそれを防ぐ
②現ページ内でなんらかの編集作業をしている場合、通常リンクをクリック(例えば、画面内のプレビュー)すると、編集データが自動保存されていない場合は、編集データが消えてしまうため、それを防ぐ

「target=”_blank”」の使い方

「target=”_blank”」は、以下のようにaタグに挿入します。

<a href=”リンク先URL” target=”_blank”>株式会社ipe</a>

「target=”_blank”」の問題点

ここでは「target=”_blank”」の問題点について2点解説します。

パフォーマンスにおける問題点

「target=”_blank”」を挿入して任意のページから別のページにリンクしている場合、リンク元とリンク先のページは、全く同じプロセスを通して実行されます。

そのため、リンク先に大きな負荷のかかるJavaScriptが実行されていると、リンク元にも悪影響を及ぼし、ページ評価やページの表示速度などページパフォーマンスが低下する場合があります。

ページパフォーマンスの低下は、SEO的にマイナス要因のため、上述は必ず意識したいポイントです。

セキュリティにおける問題点

「target=”_blank”」のリンクは別タブで開かれるため、リンク元とリンク先のページの両方が1つのブラウザ内に存在する状態になります。

ここで注意すべき点は、リンク元とリンク先のページが1つのブラウザで存在すると、もしリンク先でJavaScriptの「window.opener」が使用された場合、リンク元のコンテンツを簡単に改竄できてしまうという点です。

つまり、悪意のある第三者がコンテンツをいくらでも改竄できてしまうのです。

※window.openerとは、サブウィンドウ内のアクションでメインウィンドウ(親ウィンドウ)を操作できるスクリプトです。

(参考:Tools for Web Developers)

「target=”_blank”」の対処法

セキュリティにおける問題点に対処するには、「target=”_blank”」が設定されたaタグの属性に、rel=”noopener”もしくはrel=”noreferrer”を付けることで第三者からの改竄を防ぐことができます。

rel=”noopener”は、別プロセスとして動作させ、window.openerからのアクセスを防止する機能があります。しかし、ブラウザによってはnoopenerがサポートされていない場合があります。その場合は、noreffererを指定しましょう。

rel=”noreferrer”は、rel=”noopener”と同様の働きをしますが、referrerヘッダーを遷移先のページに渡さないという効果があります。

設定は以下のように行います。

・<a href=”https://ipeinc.jp” target=”_blank” rel=”noopener”>株式会社ipe</a>
・<a href=”https://ipeinc.jp” target=”_blank” rel=”noreferrer”>株式会社ipe</a>

「target=”_blank”」によく似たHTMLタグ

ここでは、「target=”_blank”」によく似たHTMLタグについて解説します。

HTMLタグ 概要
target=”_new” リンクを新しいタブ・ウィンドウで開くよう設定するタグ
target=”_self” 次のページを別タブで開くことなく、遷移できるよう設定するタグ(通常のページ遷移)
target=”_top” ウィンドウがフレームに分割されていれば、分割を全て解除し、ブラウザ全体に表示されるよう設定できるタグ
target=”_parent” ウィンドウがフレームに分割されていれば、1段だけ分割を解除し、その親フレームに表示されるよう設定できるタグ

「target=”_blank”」を設定してユーザー離脱を防止しよう!

このページでは、「target blank」に焦点を当て、その概要や重要性、記述例、注意点、確認方法などについて解説しました。

「target=”_blank”」を使用すれば、リンク先を別タブで開くよう指定できますが、デメリットもあります。

設置する際は、パフォーマンスやセキュリティ上の問題点に注意するようにしましょう。

「target=”_blank”」や「SEO」でお悩みの場合は株式会社ipeにご相談ください。株式会社ipeではSEOでの大手クライアント実績多数!SEOを検討する際にはぜひ一度ご相談ください。

この記事の著者

監修者 土田悠真

早稲田大学卒業後、東京地方検察庁に入庁。その後、株式会社ipeに入社。9か月でコンサルティングチームのリーダーに就任。年商150億円超えの中古品マーケットプレイス、商品数500万品超えのファッションECサイトをはじめとし、様々なジャンルのサイトをコンサルティング、分析を行う。ツイッターはこちら。
@seotsuchida

DOWNLOAD
サービス資料ダウンロード(無料)
大手実績多数の弊社サービスの概要や料金、フォロー体制など、この資料にまとめております。
資料ダウンロードはこちら
CONTACT
お問い合わせ
SEOなどサービスについてご相談がある方、人事・採用へのご不明点・ご質問など、気軽にお問い合わせください。
お問い合わせはこちら
お電話でのお問い合わせ 
03-6455-5871 9:00~18:00(平日)