リンクを貼るときのひと手間、「target="_new"」の利点

HTML

リンクを貼るときの配慮

target="_new"、target="_blank"は、リンクを新しいタブまたはウィンドウで開く設定をするための属性値です。
これらの属性を付けることにより、ユーザーがリンクをクリックすると、元のサイトを残したまま別のサイトを新しいタブで表示させることができます。これにより、ユーザーは便利に他のコンテンツを探索でき、サイトオーナーは離脱のリスクを軽減できます。

セキュアな外部リンクへ（target="_new"が設定されています。）

ほかに下記のtarget属性値があり、デフォルトはtarget="_self"です。何も指定しない場合、リンクは通常現在の同じタブで開かれます。

設定	target 属性
同じウィンドウ、タブ、フレーム	target="_self"
それぞれ別の新しいウィンドウまたはタブ	target="_blank"
すべて同一の新しいウィンドウまたはタブ	target="_new"
最上階層のフレーム	target="_top"

また、他にも指定できるプロパティがあります。下記は記述のサンプルです。

<a href="https://example.com">リンク先のページ</a>
<a href="https://example.com" target="_new" title="詳細を見る">詳細を見る</a>
<a href="https://example.com" target="_new" aria-label="外部サイトへのリンク">外部サイトへのリンク</a>
<a href="javascript:void(0);" target="_new" onclick="myFunction();">カスタムアクション</a>

rel属性: 「rel="noopener noreferrer"」はセキュリティを強化するための属性ですが、他にも以下のような値がrel属性に設定できます。
- nofollow: 検索エンジンがこのリンクをフォローしないよう指示します。スパム対策に使用されます。
- external: リンクが外部リンクであることを示すために使用されることがあります。
title属性: リンクにマウスを重ねると表示されるツールチップテキストを設定します。例えば、リンクの内容や説明を提供するために使用されます。
aria-label属性: アクセシビリティ向上のために、スクリーンリーダーが読み上げるためのリンクのテキストを設定します。
onclick属性: JavaScriptコードを直接記述して、リンクをクリックしたときの動作をカスタマイズできます。ただし、セキュリティ上の懸念があるため、慎重に使用する必要があります。
download属性: リンクがファイルのダウンロードをトリガーする場合、この属性を使用してダウンロードファイルの名前を指定できます。例: download="myfile.pdf"
target属性: 値を設定することで、リンクを新しいウィンドウや指定したフレームに開くことができます。例: target="_self"（同じウィンドウで開く）、target="myframe"（指定したフレームで開く）。

これらの属性やプロパティを適切に使用することで、リンクの挙動やセキュリティ、アクセシビリティをカスタマイズおよび向上させることができます。

新規タブで開くメリット

target="_new"では、1つの新しいウィンドウが展開されますが、その後のリンク先は最初に展開されたウィンドウ上に置き換わって表示されます。

target="_blank"は押した数だけタブやウィンドウが開くのに対し、target="_new"は2回目以降は同じタブが読み込まれる分、余分なタブやウィンドウが開くのを抑えられます。

外部リンクを貼る際は、よりよいユーザビリティを提供できるtarget="_new"を指定することが推奨されます。

rel="noopener noreferrer"の記述は不要？

rel="noopener"は、新しいタブでリンクを開く際、こちら側である参照元情報にアクセスされるのを防止します。

rel="noreferrer"は参照先に対し、こちら側である参照元リンクを渡すのを防止します。

この２つはtarget="_new"やtarget="_blank"とセットで書く、決まり文句のようなイメージでしたが、2023年9月現在の情報によると主要なブラウザやWordPressでは、デフォルトでの設定に着々と換装されているようです。

このためInternet Explorerのように、すでにサポートが終了したブラウザに対応させたい場合などを除き、rel="noopener noreferrer"を設定しなくても大きな問題はないと言えそうです。

書く場合はこのように記述します。

<a href="https://naga-cafe.blogspot.com/2023/09/iframe-api-test.html" target="_new" rel="noopener noreferrer">IFrame Player API Test</a>

IFrame Player API Test

まとめ

リンクの自動付与などブログプラットフォームでは便利な機能がいろいろありますので、つい見落とし勝ちですが、もしデフォルトでtarget="_new"やtarget="_blank"が付かないのであれば、ひと手間を掛け、リンクのURLにこの記述を追加することをおすすめします。
なぜなら、これによりユーザビリティや離脱の回避など、ウェブサイトのパフォーマンスとユーザーエクスペリエンスに多くの利点をもたらしてくれるからです。

リンクを新しいタブで開くことは、ユーザーが元のサイトを維持しながら、他のコンテンツを探索できる便利な方法です。ユーザーはリンクをクリックしても元のページを離れることなく、リンク先のコンテンツを閲覧できます。これにより、ユーザーがサイトから離脱する可能性が低くなり、サイト滞在時間が延びることも期待されます。

また、セキュリティの観点からも「target="_new"」は重要です。適切に設定された「rel="noopener noreferrer"」属性を使用することで、悪意のあるサイトからの攻撃を防ぐことができます。

リンクを開く方法についての適切な選択肢を考慮し、ユーザーエクスペリエンスを向上させるために「target="_new"」を活用してください。