PC・Web

【メリット・デメリット】aタグのtarget属性につける「"_blank"」の必要性を考える

ポイント

aタグのtarget属性「"_blank"」には、メリットもデメリットも...?

aタグの属性値の設定は、SEOにも大きな影響がある?

WEB初学者の中には、aタグのtarget属性に「"_blank"」を設定するべきか否か、悩んでいる方もいるかと思います。

リンク先に飛べるんだったらどっちでもいいんじゃない?て思って、特に考えていない方もいることでしょう。

今回は、aタグのtarget属性に「"_blank"」を設定することについてのメリット・デメリットを解説します!

SEO的な観点からもどちらが最適か考えてみます。

aタグの設定「target="_blank"」とは?

aタグの設定「target="_blank"」とは?

a(anchor)タグはご存知の通り、ハイパーリンクの出発点と到達点を指定する役割を持ちます。

要は「テキストや画像などのコンテンツにリンクを付与する」役割を持ったHTMLタグです。

内部リンク(ページ内リンク)や、外部リンクを設定する際には必ず利用します。

aタグには、リンク先のURLを指定する「href」や、ページ内リンクを設定する際に用いる「name」など、さまざまな属性があります。

その属性の中に、リンク先のサイトを表示させる際の設定で用いる「target」という属性があるんですが、このtarget属性を簡潔に説明すると「リンク先をどのウィンドウ(同じタブor新しいタブ)で表示するか」を設定できる機能を持っています。

このtarget属性を、aタグの記述部分に対して「target="_blank"」と設定してあげると、新しいタブでリンク先が開くようになります。(blankの前の「_(アンダーバー)」は忘れないでくださいね。)

記述イメージとしてはこんな感じですね↓

一見、リンク先に無事飛べるのであればどちらでも同じではないかという印象を持たれがちですが、状況によっては、それぞれの設定に大きく違いが出てきます

target="_blank"を設定するメリット

target="_blank"を設定するメリット

まずは、「target="_blank"」を設定する(リンク先を新しいタブで開く)メリットからあげていきましょう。

自サイトからの離脱防止につながる

別タブでリンク先が開いてくれるということは、元のタブは自サイトが表示されたままになっています。

「target="_blank"」は主に、外部リンクを指定する際に用います。

その時、同じタブで外部リンクに遷移してしまうと、自サイトから離脱されてしまいます。

記事の内容をしっかり読んでくれていたユーザーなら、ブラウザバックなどで自サイトへ戻ってきてくれるでしょうが、そうでもないユーザーは、リンク先の外部サイトを見た後、そのまま戻ってきてくれない可能性が大いにあり得ます。

新しいタブで外部リンクを開くことで、ユーザーはそのタブを閉じるだけ、もしくは切り替えるだけですぐに自サイトに戻ってきてくれます。

新しいタブで開くことは、離脱防止につながりますね。

ブロガーとしての私も、外部リンクを貼る場合は自分のブログからも離脱してほしくないから、リンク先は新しいタブで開かせたいって気持ちがあります。

ひとりごと

これは私の感覚なんですが、ブラウザバックするのって、タブを閉じるよりも面倒なんですよね。PCの場合、タブはブラウザの上部に並んでくれてるんで、クリックするだけで簡単に画面を切り替えられますから。それに比べてブラウザバックは、多少なりとも読み込みが発生して、ページの表示に少し時間がかかったりします。

target="_blank"を設定するデメリット

target="_blank"を設定するデメリット

「target="_blank"」の設定にはデメリットもあります。

というか、昨今はデメリットの方が多かったり...

どちらもGoogleのデベロッパーサイト(←このリンク「target="_blank"」設定しています!)に書いてあることなので、ご紹介しておきます。

パフォーマンス低下の恐れあり

他のページは、あなたのページと同じプロセスで実行される場合があります。他のページが多くのJavaScriptを実行している場合、あなたのページのパフォーマンスが低下する可能性があります。

https://web.dev/external-anchors-use-rel-noopener/

はい、書いてある通りパフォーマンス低下の恐れがあります。

リンク先が激重サイトだった場合、こちら側も影響を受けかねないということですね。

パフォーマンス低下はSEOにも悪影響?

パフォーマンスの低下は、SEOにも影響を与えかねません。

パフォーマンスの低下を招きかねない激重サイトに対しては、設定しない方がよいかもしれません。

セキュリティ面での懸念あり(脆弱性)

他のページはwindow.openerプロパティを使用してあなたのwindowオブジェクトにアクセスできます。これにより、他のページがあなたのページを悪意のあるURLにリダイレクトする可能性があります。

https://web.dev/external-anchors-use-rel-noopener/

そして、セキュリティ面でも脆弱性があるといわれています。

「target="_blank"」を設定した際、自サイトもリンク先のサイトも、両方が同ブラウザ内に存在することになりますよね。

その場合、リンク先のページに悪意をもったJavaScriptが記載されていると、リンク元である自サイトを好き放題改ざんされてしまう危険性があるとされています。

そうなると、信頼性の高いサイトであるかを見極めて、設定する必要がありそうです。迂闊に「target="_blank"」は設定できませんね。

デメリットの対策

デメリットの対策

パフォーマンス面・セキュリティ面でデメリットが考えられるaタグですが、rel属性に「noopener」、そして「noreferrer」を設定すればよいとされています。

noopener

rel属性にnoopenerを付けると、新しいタブが別スレッドで開かれます。

本来、ブラウザは単一のスレッドでページを開いたりJavascriptを実行したりしますが、この設定を行うことでそれぞれのタブの処理を別で行わせられます。

これによって、リンク先のタブがリンク元のタブを制御出来なくなり、悪意あるJavaScriptも機能しなくなります。

また、パフォーマンスの影響も受けなくなるとされているため、「target="_blank"」を設定する際は、noppenerも合わせて設定しましょう。

noreferrer

rel属性にnoreferrerをつけると、リンク先に対して、リンク元の情報を渡さない設定にできます。

要は、リンク元のURLに、ユーザーIDなどのパラメータが付与されていた場合、これらの情報を渡さなくてすむということです。

悪意ある外部サイトの場合、これらのパラメータを悪用される恐れもありますからね。

前述のnoopenerと合わせて、「rel="noopener noreferrer"」と設定しておくとよいかと思います。

noreferrerの設定は、一部アフィリエイトで問題が発生するかも?

noreferrerを設定すると、リンク先にパラメータの情報を渡さないと説明しましたが、これは場合によってはよくないケースもあります。

それは「アフィリエイト」を行う場合です。

アフィリエイトは成果が発生する際、リンク元に貼られてあるアフィリエイトリンクのユーザーIDなどを元に、対象サイトを特定して成果としてカウントされます。

この処理が、noreferrerが付与されているとうまく機能しない恐れがあります。

そして、WordPressを利用している場合、リンクに「target="_blank"」を設定していると、rel属性に「noopener」と「 noreferrer」が自動的に付与される仕組みになっているようです。

WordPressでアフィリエイトを行う場合、リンク先を新しいタブで開く設定にしている場合は、noreferrerを付与させない設定を行うか、そもそも新しいタブで開かないよう対処する必要が出てきます。

まとめ

「target="_blank"」を設定する場合のメリット・デメリットについてご紹介しました。

離脱を防ぎやすいというメリットはあるものの、パフォーマンス面やセキュリティ面のことを考えると、ただ闇雲に設定することはデメリットの方が多いのではないかと思いました。

WordPressではrel属性に「noopener」と「noreferrer」が自動で付与される機能が付いていますが、自身でベタ書きコーディングをする場合は、aタグの属性設定は注意して行いましょう。

また、アフィリエイトを行う場合は、noreferrerが付与されていると、成果が発生しないなどの問題も起こりかねません。対策を施しましょう。

-PC・Web
-,

© 2022 アプリめし