今回はWeb担当者やデザイナーがうっかり設定してしまっているtarget=”_blank”の正しい設定方法について説明します。
誤った方法で設定したままだとセキュリティの観点からも危険なのでこの機会に正しい設定方法を身につけましょう。
目次 ➖
target=”_blank”とは？
target=”_blank”（ターゲットブランク）とは、リンクをクリックした際に新しいタブ（ウィンドウ）でページを表示するために指定するリンクタグの属性の一つです。
実際に使用する際には下記のように記述します。
<a href=”example.com” target=”_blank” rel=”noopener”>使用例です</a>
target=”_blank”を使用するメリットは？
target=”_blank”はリンク先のページを新しいタブ（ウィンドウ）で開くことができるため容量の重いファイルをダウンロードする際や外部リンクを開く際に便利です。
例えば、外部リンク先を別タブで表示させる場合、自分の記事の流れで外部のサイトを見に行っているだけなのですぐに自分の記事に戻ってこられるようにしておいた方がユーザービリティの向上につながり離脱率を下げる効果が期待できます。
また、外部のサイトに行っている間も自分の記事（サイト）が開かれている状態のため滞在時間を稼ぐことができ、SEO評価的にもプラスに働く可能性が高いです。
そのほかにも会社案内用の資料やカタログなどのPDFファイルなどは別タブで表示することで、ユーザーがファイルをダウンロードしている間に自分の記事を読み進めることができるようにするためにtarget=”_blank”を利用するケースが多いです。
target=”_blank”を使用する際の注意点
ユーザビリティ向上につながるtarget=”_blank”ですが、一方でデメリットもあります。
今回はSEO的な観点とセキュリティの2つの観点から解説していきます。
自社サイトのパフォーマンスが低下してSEOでマイナス評価に？
target="_blank"属性を使用して別のサイトのページにリンクすると、サイトのパフォーマンスとセキュリティに問題が発生する可能性があります。
- 他のページは、あなたのページと同じプロセスで実行される場合があります。他のページが多くのJavaScriptを実行している場合、あなたのページのパフォーマンスが低下する可能性があります。
- 他のページは
window.openerプロパティを使用してあなたのwindowオブジェクトにアクセスできます。これにより、他のページがあなたのページを悪意のあるURLにリダイレクトする可能性があります。<参照：Googleデベロッパーサイト>
上記で記述されている内容を要約すると、外部リンク先のサイトがJavaScriptなどを多用しておりサイトのパフォーマンスが悪い場合、自分のサイトのパフォーマンスにも悪影響を与えるということです。
セキュリティ面で脆弱性がある？
target=”_blank”はセキュリティに脆弱性があると指摘されています。
具体的にどういった内容なのかを解説すると、target=”_blank”で指定した外部サイトを開いた際にその外部サイト先でリンク元である自分のサイトを操作することができる「window.opener」というJavaScriptが実行された場合、リンク元である自分のサイトを改竄することができるのです。
これにより自分のサイトがフィッシングサイトとして利用されたり、ウイルスを仕込まれたりするなどのリスクが高くなるため信用できるリンク先であったとしても注意が必要です。
target=”_blank”を正しく使用するための対処法
target=”_blank”の対処法は下記の3つあります。
1.noreffererの指定
1つ目の対処法としてnoreffererの指定が挙げられます。
noreffererとは親ページや元サイトのリンク情報を外部に流出させないために指定するタグです。
noreffererの使用方法によっては問題が生じる場合があるので注意が必要です。例えばサイト分析用のアナリティクスタグを設置している場合、内部リンクに対してnoreffererを指定していると閲覧されたかを正しく計測できません。
また、アフィリエイトリンクを設置する場合もアフィリエイトリンクにnoreffererを指定しまうと参照元のページがわからなくなってしまい報酬が支払われなくなってしまいます。
そのためnoreffererを指定する場合にはどのリンクに対して指定するのか、もしくは指定しないのかを検討する必要があります。
2.noopenerの指定
2つ目の対処法はnoopnerを指定することです。
これはリンク先の外部サイトからwindow.openerを確認できなくするための記述で、自分のサイトが外部リンクのパフォーマンスに影響されることを防ぐための役割があります。
また、新たに開いた外部リンク先のサイトの負荷も軽減することができるなどパフォーマンスの向上も期待できる一面もあると言われています。
そのためtarget=”_blank”でパフォーマンスの低下を感じている場合はnoopenerをしているすると良いかもしれません。
3.norefferer・noopenerを両方設定
target=”_blank”に対してnorefferer・noopenerを同時に設定することも可能です。
しかし、ブラウザによっては対応していない場合もあります。また、目的によってはnoreffererによる参照元が取れないと困るケースもあるので必要に応じて使い分けることができるようになっておくことが重要です。
まとめ
今回はtarget=”_blank”の正しい設定方法について解説しました。
target=”_blank”は正しく使用できればユーザビリティやパフォーマンスの向上を期待することができ、SEO的にも良い評価を受けられる可能性が高くなります。
一方で、セキュリティの脆弱性も指摘されているため、そういった側面についても理解した上で自分のサイトを正しく安全に運用していきましょう。
