「target=”_blank”」とは、リンク先を別タブで開くよう指定できるHTMLタグの1つです。
今回は「target=”_blank”」に焦点を当て、その概要や使い方、問題点、対処法などをご紹介します。気になるポイントを一挙確認してしまいましょう。
「target=”_blank”」とは？
「target=”_blank”」とは、リンク先を別タブで開くよう指定できるHTMLタグの1つです。
リンク先を別タブで開くよう指定できるメリットとしては、以下のような例があります。
②現ページ内でなんらかの編集作業をしている場合、通常リンクをクリック(例えば、画面内のプレビュー)すると、編集データが自動保存されていない場合は、編集データが消えてしまうため、それを防ぐ
「target=”_blank”」の使い方
「target=”_blank”」は、以下のようにaタグに挿入します。
「target=”_blank”」の問題点
ここでは「target=”_blank”」の問題点について2点解説します。
パフォーマンスにおける問題点
「target=”_blank”」を挿入して任意のページから別のページにリンクしている場合、リンク元とリンク先のページは、全く同じプロセスを通して実行されます。
そのため、リンク先に大きな負荷のかかるJavaScriptが実行されていると、リンク元にも悪影響を及ぼし、ページ評価やページの表示速度などページパフォーマンスが低下する場合があります。
ページパフォーマンスの低下は、SEO的にマイナス要因のため、上述は必ず意識したいポイントです。
セキュリティにおける問題点
「target=”_blank”」のリンクは別タブで開かれるため、リンク元とリンク先のページの両方が1つのブラウザ内に存在する状態になります。
ここで注意すべき点は、リンク元とリンク先のページが1つのブラウザで存在すると、もしリンク先でJavaScriptの「window.opener」が使用された場合、リンク元のコンテンツを簡単に改竄できてしまうという点です。
つまり、悪意のある第三者がコンテンツをいくらでも改竄できてしまうのです。
※window.openerとは、サブウィンドウ内のアクションでメインウィンドウ（親ウィンドウ）を操作できるスクリプトです。
「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=”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を検討する際にはぜひ一度ご相談ください。