- target=”_blank”とは何？
- target=”_blank”を使う際に注意点はあるのか。noreferrrer, noopenerとの関連性は？
- target=”_blank”には脆弱性があるのか。また2024年現在では非推奨?
この記事では上記のような問いについて答えていきたいと思います。
先に結論から。
- target=”_blank”(ターゲットブランク）は、別タブでリンクを開く属性です。
<a href="example.net" target="_blank">サンプルサイトへ</a>のように記述します。 詳細説明はこちら - target=”_blank”は最新ブラウザで利用する場合は特に脆弱性はありませんが、アップデートされていないブラウザだと、脆弱性があります。（タブナビング攻撃）安全に使うには、noopener属性と併用して利用する必要があります。 詳細説明はこちら
- target=”_blank”は非推奨ではありません。（2024年現在）
target= _blank(ターゲットブランク）とは？
target=”_blank”（ターゲットブランク）という属性は、リンクを別のタブやウィンドウで開きたい場合によく使用されます。
target=”_blank”を使うと、リンク先のページが現在のタブや窓ではなく、新しいタブやウィンドウで開かれます。ユーザーは現在のコンテンツから離れることなく、リンク先のページを確認することができます。
使い方は簡単で、HTMLのaタグ内にtarget=”_blank”と記述するだけです。
<a href="example.net" target="_blank">サンプルサイトへ</a>上記のように設定すると、「サンプルサイトへ」というリンクをクリックすると、example.netのページが新しいタブやウィンドウで開かれます。
target=”_blank”のメリット
target=”_blank”を利用するメリットとしては、以下の通りです。
- ユーザーの利便性の向上
- アフィリエイトのCTRの向上
ユーザーの利便性の向上
ウェブサイトやWebアプリケーションを利用する際、後で別のページを参照したくなることがあります。そのような場合、target=”_blank”属性を使うと、リンク先のページを現在のページとは別のタブやウィンドウで開くことができ、ユーザー体験の向上につながります。現在のページから離れることなく、リンク先のページを確認できるため、ユーザーの作業の流れが途切れません。
アフィリエイトのCTRの向上
また、アフィリエイトなどの外部リンククリックについて、CTR(クリック率)を上がりやすくなります。ユーザーが現在のページから離れずにリンク先を開けるため、クリックしやすくなるからです。
一方で、スマートフォンなどのモバイルデバイスでは、target=”_blank”の使い方には注意が必要です。モバイルの場合、別タブで開かれても現在のページが移り変わってしまうため、PCとは異なる挙動となります。ユーザーにとっては混乱を招く可能性があるので、状況に応じてtarget=”_blank”の使用を検討しましょう。
target=”_blank”を使うデメリット：セキュリティ脆弱性
古いブラウザでは、target=”_blank”のリンクを使用すると、タブナビング攻撃などの脆弱性が存在していました。これは、新しいタブで開かれたページが親ウィンドウの情報にアクセスできてしまうため、フィッシング詐欺などに利用されてしまう可能性があります。
タブナビング攻撃に関しては、下記記事で解説しています。
noopenerとは？noreferrerとの違いやセキュリティリスクについても解説します
しかし近年、ほとんどの最新までアップデートされているブラウザでは、target=”_blank”のリンクを開く際に自動的に”rel=”noopener””属性が付与されるようになっています。この”noopener”属性によって、新しいタブで開かれたページが親ウィンドウの情報にアクセスできなくなるため、セキュリティ上の問題が解消されています。
具体的には、mdn web docsのtarget=”_blank” implies rel=”noopener” behaviorの項目をご確認ください。
参考）開発者向けのウェブ技術 > HTML > HTML 要素リファレンス > a要素
つまり、最新のブラウザではtarget=”_blank”を使用する際に、特別に”rel=”noopener””を指定する必要はありません。
ただし、ユーザーのブラウザがアップデートされていない場合”noopener”属性が設定されない可能性があるため、念のため”rel=”noopener noreferrer””を指定しておくことで、セキュリティに対処しておく必要があります。
<a href=""https://example.com" rel="noopener" target="_blank">安全な別タブリンクはこう書きます</a>WordPressとtarget=”_blank”の仕様について
WordPressでは、WordPress 5.1以降、外部リンクにtarget="_blank"を設定すると、自動的にrel="noopener noreferrer"が付与されるようになりました。
この仕様変更により、WordPressで編集する際、特に意識しなくても別タブ設定時は安全に設定することができます。
noopenerは、新しいタブで開かれたページが元のページにアクセスできないようにします。
noreferrerはリファラ情報を送信しないようにします。詳しくは下記記事を参考にしてみてください。
noopenerとは？noreferrerとの違いやセキュリティリスクについても解説します
norefererは、外部ページにリファラを渡さないような設定となります。
一方、WordPress 5.1以前のバージョンを使用している場合、これらの属性を手動で追加する必要があるため、リンクの設定には特に注意が必要です。
よくある質問
target=”_blank”はSEO対策に影響しますか？
Google公式がtarget=”_blank”を非推奨としている根拠はないため、特にSEOに対する影響はないです。
Google公式が不正なリンクとして提示しているのは、隠しリンクなどです。
ネット上では、セキュリティ的な問題でtarget=”_blank”を使うのは問題だという議論はありますが、rel=”noopener”と併用する場合はセキュリティリスクはないため、この指摘は正しくありません。
target=”_blank”を使用する際の注意点は？
「target=”_blank”のセキュリティ脆弱性」でも解説しましたが、アップデートされていないブラウザを利用している場合に、セキュリティ的脆弱性が生まれる可能性があります。
サイトを利用する対象となるユーザーのブラウザのバージョンが低いと想定される場合(=長くブラウザをアップデートができない医療機関が利用するサイト等）は、意識してnoopenerを指定するとよいでしょう。
target=”_blank”は非推奨ですか？
W3CのHTML Living Standardでは、非推奨とされていません。
過去には非推奨とされてきた歴史があるようで、ネットで探すと非推奨だ、という記述がありますが、2024年11月現在では、非推奨ではありません。
また、実務的な観点からも非推奨にする理由は特にありません。
ただし、セキュリティ基準が特に厳しく、CMSなどで万が一 noopenerと併用し忘れるリスクが存在する場合は、運用としてtarget=”_blank”を使わないというルールを決めてもよいでしょう。WordPress以外のCMSでは、target=”_blank”を指定した場合に、必ずしもrel=”noopener”が指定されない可能性があります。
target=”_blank” と一緒によく利用されるnoreferrerとの違いは？
noreferrerは、名前の通りリファラーを渡さないような設定となります。
| 属性値 | 意味 |
|---|---|
| target=”_blank” | 別タブで開くことができる属性 |
| rel=”noopener” | 別タブで開いた際に、元の記事を操作できないようにする属性値 |
| rel=”noreferrer” | リンク先にどこからアクセスしたかわかるリファラ情報を渡さないようにする設定 |
| rel=”nofollow” | dofollowリンクを送らないようにする設定 |
target=”_blank” と一緒によく利用されるnoopenerとの違いは？
target=”_blank”は、別タブで開く設定となります。
noopenerは別タブで開いた際に、開いたページから元のページの情報をJavaScript上で抽出できないようにするためのタグです。
そのため、セットで使われることが多いです。
| 属性値 | 意味 |
|---|---|
| target=”_blank” | 別タブで開くことができる属性 |
| rel=”noopener” | 別タブで開いた際に、元の記事を操作できないようにする属性値 |
| rel=”noreferrer” | リンク先にどこからアクセスしたかわかるリファラ情報を渡さないようにする設定 |
| rel=”nofollow” | dofollowリンクを送らないようにする設定 |
target=”_blank”とtarget=”blank”の違いは？
target=”_blank”は、別タブをクリックした時に、その都度新しい別タブが開かれます。
target=”blank”(アンダースコアなし）は、別タブをクリックした時、2回目以降はそのタブが更新される形になります。
例を挙げます。あるページAで、別タブで開くボタンが3つあるとします。
target=”_blank”を利用すると、異なる別タブが3つ開きます。
target=”_blank”を利用すると、最初の1つのみ別タブで開かれ、最後の2つは開いた別タブの1つが更新される形になります。
特別な理由がない限り、target=”_blank”を指定するのがよいでしょう。
target=”_blank”の代わりに別タブを指定する方法はありますか？
target="_blank"を使用すると、リンクが新しいタブやウィンドウで開かれることを指定できますが、他の方法でリンクを新しいタブで開くことは基本的にブラウザの動作に依存します。
ただし、JavaScriptを使用して新しいタブを開く方法もあります。
例えば、JavaScriptのwindow.open()メソッドを使うことで、特定のURLを新しいタブで開くことができます。以下は、その例です。
<a href="#" onclick="window.open('https://example.com', '_blank')"</a>
ここで、'_blank'という引数を指定することで、新しいタブで指定したURLが開かれます。
注意点として、ポップアップブロッカーが有効な場合、プログラムからのタブのオープンが阻止されることがありますので、ユーザーの操作（例えば、クリックイベント）から呼び出す必要があります。
直接的にtarget="_blank"の代わりに使用する方法ではありませんが、JavaScriptを使うことで似たような挙動を実現することができます。
target= _blank 効かない時はどうしたらいいですか？
target="_blank"を指定しても新しいタブでリンクが開かない場合、以下の点を確認してみてください。
- ブラウザの設定: 一部のブラウザではポップアップや新しいタブの開放をブロックする設定がある場合があります。ブラウザの設定を確認し、新しいタブのポップアップを許可するように設定してみてください。
- JavaScriptの影響: JavaScriptのコードが新しいタブで開くことを妨げている可能性があります。他のスクリプトがリンクの動作に干渉していないか確認してください。
- 外部リンクか内部リンクか: 一部のセキュリティ設定により、特定のドメインへのリンクが新しいタブで開かない可能性もあります。例えば、同一ドメインの場合に動作が異なる場合があります。
- HTML構造の問題:
<a>タグが正しく設定されているか確認してください。 - 5. ブラウザ拡張機能: 一部のブラウザ拡張機能が新しいタブの動作に影響を及ぼすことがあります。拡張機能を無効にしてみて、再度試してみると良いでしょう。
- 6. リンクのクリックイベント: JavaScriptでクリックイベントを設定している場合、
event.preventDefault()を無効にするようにしてください。
参考文献
