「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的にマイナス要因のため、上述は必ず意識したいポイントです。

SEOとは？基礎知識と初心者がやるべき対策をわかりやすく解説

自社サイトの流入数を増やし、ビジネスを成長させるにはSEO対策(検索エンジン最適化)が欠かせません。このページでは初心者の方でもわかりやすいように、「SEO対策がそもそもどのようなものなのか？」を解説します。基本的な概念をどこよりもわかりやすくご紹介するので、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ヘッダーを遷移先のページに渡さないという効果があります。

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

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

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

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

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

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

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

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