【target_blankってなに、、、？】イチからジュウまで徹底解説！

2024.05.24

WEB制作

#SEO内部施策 #webサイト #アクセス解析の指標

なかなか聞き慣れない単語、「target_blank」。HTML（WEBページを作成するためにつくられた言語）に触れる機会の多い方にとってはお馴染みかもしれませんが、よく理解して利用しないと思わぬデメリットを被ることも？本稿でははじめてHTMLに挑戦するような初心者から、熟練の上級者の方まで、「target_blank」を本質的に理解していただけるように、どのサイトより分かりやすく解説します。

1 target_blankとは　WEBページにリンクを貼る際の基礎講座

基本的に、リンクを貼る際のHTMLコードは次の通りです。

<a href=”リンク先のＵＲＬ”>アンカーテキスト</a>

ここにおいて

・aタグ（anchorタグ）に様々な属性 ex)target属性、href属性を付与することができる

・target属性に任意の値を指定することで、ページのリンク先の文書を開くためのフレームやウインドウを指定できる

ことを理解しておいてください。

target_blankとは

target_blankでは、aタグの属性の1つを指し、クリックした先のページをどのように開くかを指定できます。_blankは、ユーザーがクリックすると、別タブが開かれるようになります。

前項のコードに当てはめると下記のようになりますね。

これでみなさんもtarget_blankを一応使えるようになりました。さあ、ここからですよ！

target_blank以外のリンク指定方法

target_blankの具体的なメリデメや注意点をご紹介する前に、それ以外のリンクの指定方法について学習しましょう。主に下記３つが挙げられます。

target_self

これは、同じページ上で新しいURLを開きたい場合に指定します。_blankとの違いを強調するとすれば、違うタブで開くのが_blank、同じタブで開くのが_selfです。なお、_selfはaタグのリンク表示先におけるデフォルト値なので、省略して記述しても同じタブで開かれます。

target_sample

これは、新たなウインドウを開きたい場合に指定します。すでにsampleという名前を持つフレームがあれば、そこにウインドウを開きます。同じページ内で特定の枠内だけ画面が切り替わるようにしたい場合に利用されることから、料金やメニューなどをページ内に掲載したい販売業に有効といえます。

window.open

aタグに、JavaScriptのwindouw.openを使用することで、新しいウィンドウで開きます。つまり、役割はtarget_blankと同じですね。

target_new

target_blankとよく似たタグとして有名なのがこのtarget_newです。これは_blank同様、新しいタブでリンク先を表示させる属性のタグです。しかしながら、_blankがリンクをクリックした数だけ表示される一方で、_newは2回目以降、1回目に開かれたタブが読み込まれます。この使い方は好みや用途によりますが、気になる場合にはサイトのリンク設定を確認しましょう。

2 target_newのメリット・デメリット

2-1 メリット（効果）

メリットとして挙げられるのは次の二点でしょう。

・元のページに戻りたい時にブラウザバックで戻らなくて済む

・（元のページの）ユーザーの離脱率を下げる

特に、動画データや音楽データなど、ダウンロードに時間がかかるコンテンツについては別タブで表示される方がありがたいですよね。

_blankを指定するだけで、そのサイトのユーザビリティが格段に向上、結果として自サイトの評価を大きく高めることにつながるのです。

2-2 デメリット（注意点）

デメリットとして挙げられるのは次の二点でしょう。

・パフォーマンスの低下

・脆弱性

前者については、リンク元のページとリンク先のページは同じプロセスで動いていることに起因し、リンク先のページで負荷の高いJavaScriptなどが実行されている場合には元ページのパフォーマンスが下がりうります（特に古いブラウザの場合）。

後者については、指定したリンクが信用できるサイトでなかった場合 ex)フィッシングサイト、リンク元であるWebページが操作され、改竄されてしまうことがあります。

3 target_blankを安全に使うための方法

3-1 target_blankの対処方法

では、2-1であげたようなデメリットを解消する方法はないのでしょうか。結論としては、下記の3つが挙げられます。

noreffererの指定

noreffererとは、元サイトのリンク情報を外部に流さないよう指定するタグのことです。しかしながら、内部リンクにnoreffererを指定してしまうと、サイト分析の際の確認に困りますし、アフィリエイトリンクにnoreffererを指定してしまった場合には、報酬の支払先がわからなくなります。noreffererも万能ではないことに注意が必要です。

noopenerの指定

noopenerは、target_blankで参照されたページのwindow.openが確認できなくなるよう指定します。また、新たに開かれたページの負荷も軽くなる効果が期待できます。

noopener・noreffererの同時指定

ブラウザによっては、norefferer・noopenerのどちらかが指定できないケースがあるため、どちらも指定できる幅を持たせておくことで、目的によってnorefferer・noopenerを効果的に使い分けることができます。

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

2021年公開のchrome88以降ではtarget_blankの指定リンクは、noopenerが規定値となり、記述する必要がなくなりました。また、Safariは2019年3月に公開したv12.1より対応、FireFoxもFireFox79以降noopenerが規定値となっているようです。

WordPressは、WordPress5.1以降、target_blankの指定リンクにはnoopener noreferrerが自動付与されるようになっています。

総括（まとめ）

target_blankを使用すれば、任意のリンクを別タブで開くよう指定できますが、大きな問題点もあることがわかりました。それに対して、noopener、noreferrerを加えるというひと手間で、ほぼ完全に対策ができるということもわかりました。ブラウザやWordPressのバージョンによっては気にすることなくtarget_blankを使用できますが、すべてに人にとって快適なサイトを作るためには、必要な対策を実施することが必須ですし、それには開発者としてのユーザー目線/セキュリティ意識が最も重要といえるでしょう。

target_blankを使いこなしてより良いインターネットライフを！