リンクを貼る際の基本情報

リンクを貼る際の基本情報として押さえておきたいのは、以下の通りです。

• aタグ
• target属性
• リンクを貼る際のHTMLコードの書き方

順番に説明します。タグの基本情報から実践的な書き方まで解説しますので、ぜひチェックしてみてください。

aタグ

aタグとは、anchorタグの略称のことで、ハイパーリンクの出発点と終了点を指定する役割を担っています。ハイパーリンクの出発点とは、Webページ内に表示される画像や文字のことで、終了点とはリンク先となる他のページやファイルのことを指しています。

aタグは、後述するtarget属性やhref属性などさまざまな属性を有していることが特徴的です。そのため、リンク設定時に複数の属性を付与することができます。

target属性

target属性とは、Webページのリンク先の文書を開くためのフレームやウインドウを指定するための属性のことです。target属性では、フレームのname属性の値を指定することで、以下のフレームを設定することができます。

• _blank：新規ウインドウでリンクを開くことを示す
• _self：現在のフレームでリンクを開くことを示す
• _parent：現在のフレームの親フレームでリンクを開くことを示す
• _top：現在のウインドウでリンクを開くことを示す

それぞれのリンクフレームに役割があるため、1つずつ確認しておきましょう。

リンクを貼る際のHTMLコードの書き方

リンクを貼る際のHTMLコードの書き方は、以下の通りです。

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

一般的にリンクを貼る際のHTMLは、a href（エー・エッチレフ）のリンクタグが使用されます。上記のアンカーテキストにタグを入力することで、指示を与えることができます。

アンカーテキストは、リンク先のページ内容を示す重要な言葉です。また、アンカーテキストで表現されている内容が検索結果やアクセス数にも関係してくることがあります。

「target="_blank"」とは？

「target=”_blank”」では、aタグの属性の1つを指しており、クリックした先のページをどのように開くかを指定することができます。「_blank」は、ユーザーがクリックすると、別タブが開かれるようになるため、自分のサイトを残しつつ、別のサイトを表示させたい場合に適しています。

そのため、target=”_blank”ではわざわざ戻るをクリックしなくても別タブを開くことで、複数ページの同時閲覧が可能です。さっき見ていたページまで戻る必要がなくなるため、ユーザーのサイト離脱率を低下させる効果が期待できます。

「target="_blank"」以外のリンク指定方法

「target=”_blank”」以外のリンク指定方法として、以下の3つが挙げられます。

• target=”_self”
• target=”_sample”
• window.open

順番に見ていきましょう。

target="_self"

target="_self"とは、同じタブを開くといった指示を出すタグのことです。HTMLコードの書き方は、以下のとおりです。

<a href="リンク先のURL">同じタブで開きます</a>

上記記述でtarget="_self"が機能することがほとんどですが、戻るボタンをクリックする必要がないページの場合は、target="_self"が機能しないケースもあります。

target=”sample”

target=”_sample”とは、新たなウインドウを開いて表示させるといった指示を出すタグのことです。すでにsampleといった名前を持つフレームがあれば、そこにウインドウを開きます。

target=”_sample”は、料金やメニューなどをWebページに掲載したい販売業や小売業に有効的です。target=”_sample”はインラインフレーム内で表示するHTMLを指定し、target属性に独自の名称を付け、iframeタグを使用して表示すれば機能します。難しい書き方は必要ないため、簡単に使用できるタグです。

window.open

windouw.openは、HTMLのaタグにJavaScriptのメソッドを使用することで、新たなウインドウを開くことができるタグのことです。windouw.openを使用することで、戻るをクリックする必要なく、他のページへ移動することができます。

target=”_blank”同様、windouw.openでもユーザーの利便性が高まり、ページ離脱率を低下させる効果が期待できるでしょう。

「target=”_new”」との違い

target=”_blank”によく似たタグとして「target=”_new”」があります。target=”_new”とは、target=”_blank”同様、新しいタブでリンク先を表示させるといった属性のタグです。

しかし、target=”_blank”はリンクをクリックした数だけ表示されますが、target=”_new”

は2回目以降、1回目に開かれたタブが読み込まれるといった違いがあります。そのため、target=”_new”はtarget=”_blank”よりもページを閲覧しているユーザーの利便性を損なう可能性が低くなります。

ページやサイトの特性によって異なりますが、target=”_blank”とtarget=”_new”の使い分けは必要でしょう。

「target="_blank"」が効かない場合もある

target=”_blank”を使用しているとリンクが開かないという問題が起こる場合があります。開かない理由としては、target=” _blank”のデメリットである脆弱性が原因です。

target=”_blank”が効かない事象は、一部のAndroid端末やGoogle Chrome、パソコンで発生しやすくなっています。発生した場合は、後述するnoopener・noreferrerの指定やrel属性の指定を行えば、解決できます。

「target="_blank"」のメリット

target=”_blankは別タブを開いてくれるため、以前のページにわざわざ戻る必要がなく、利用できます。そのため、長時間必要なダウンロードファイルがあるときにも、時間を有効に使用できるでしょう。

また、わざわざ以前のページに戻る必要がないため、ユーザーのページ離脱率を下げることができます。target=”_blankは、閲覧ユーザーやWebページを開いている側もメリットを感じられるタグといえるでしょう。

「target=”_blank”」の2つのデメリット

「target=”_blank”」の2つのデメリットは、以下のとおりです。

• パフォーマンスの低下
• 脆弱性がある

順番に説明します。target=”_blank”のデメリットを確認し、有効的に活用していきましょう。

1.パフォーマンスの低下

target=”_blank”のデメリットとして、リンク元のページのパフォーマンスが低下することが挙げられます。リンク元のページとリンク先のページは同じプロセスで動いているため、リンク先のページで負荷の高いJavaScriptなどが実行されていることが原因です。

古いブラウザを使用しているユーザーがtarget=”_blank”を活用しているページを利用すると、不満を感じる恐れがあります。そのため、aタグでtarget=”_blank”を使用するのであれば、rel=”noopener”を同時に挿入してあげることで、パフォーマンスの低下を抑えることができます。

2.脆弱性がある

“target=”_blank” は、セキュリティ面に関して脆弱性があります。“target=”_blank” の脆弱性は、外部リンクが信用できない勝手リンクの場合に起こります。そのため、信用できるWebサイトのリンクではなく、外部サイトの勝手リンクを使用する場合は、rel=”noopener”を付けることで、脆弱性を抑えられます。

また、Googleの技術者も

「他のサイトへのリンクのtarget = “_ blank”は、サイトのパフォーマンスやセキュリティに問題が発生する可能性があります。修正するには、これらのリンクにrel = “noopener”またはrel = “noreferrer”を追加してください」

といった発信をしているため、脆弱性を抑える方法として有効的といえるでしょう。

「target=”_blank”」の脆弱性によって起こりうるリスク

“target=”_blank” の脆弱性は自社サイトがフィッシングとして利用されたり、ウイルスを仕込まれたりするなどのリスクがあります。たとえリンク先のページが信用できるWebサイトであっても注意が必要です。

日々Webサイトは閉鎖されていますが、閉鎖後に信用しているWebサイトに悪意のある人がウイルスや地雷を仕込む場合があります。そのため、“target=”_blank” を活用する際には信用している外部サイトだからといって、安易に利用するのはやめておきましょう。

「target=”_blank”」の3つの対処方法

「target=”_blank”」の対処方法は、以下の3つです。

• noreffererの指定
• noopenerの指定
• noopener・noreffererの同時指定

順番に説明していきます。対処方法を確認しておくことで、target=”_blank”を使用することで起こるリスクの回避に繋がるでしょう。

1.noreffererの指定

target=”_blank”の対処方法として、noreffererの指定が挙げられます。noreffererとは、親ページや元ページのリンク情報を他に流さないことを示すタグのことです。

noreffererの書き方は、以下のとおりです。

<a href="リンク先のURL" target="_blank" rel="noopener noreferrer">新規タブで開く</a>

noreffererの使用方法によっては、リンクが見れなくなるケースがあります。例えば、サイト分析をする際に、内部リンクにnoreffererを指定してしまうと、閲覧されたかどうかを確認することができません。

また、アフィリエイトリンクを設置する際にも注意が必要です。アフィリエイトリンクとは、企業の商品が自社ページから購入された際に報酬が支払われるサービスのことです。アフィリエイトリンクにnoreffererを指定してしまうと、参照元のページが分からなくなり、どのサイトに報酬を支払えばいいのか分からなくなります。

noreffererを指定することで不具合を生じることもあるため、使用するタイミングには注意しましょう。

2.noopenerの指定

target=”_blank”の対処方法として、noopenerの指定も有効です。noopenerには、target=”_blank”で参照されたページのwindow.openerが確認できなくなるといった役割があります。また、新たに開かれたページの負荷も軽くなるといった効果も期待できるのです。

そのため、target=”_blank”を活用してパフォーマンスの低下を感じている方は、noopener指定は必須といえるでしょう。

3.norefferer・noopenerの同時指定

target=”_blank”の対処方法として、norefferer・noopenerの同時指定も有効です。基本的に、norefferer・noopenerの同時指定はブラウザ対応時に活用します。

ブラウザによっては、norefferer・noopenerのどちらかが指定できないケースがあります。また、目的によってはnoreffererによるリファラが取れないのが困ると感じる方もいるでしょう。そういった場合にどちらも指定できるといった幅を持たせておくことで、目的によってnorefferer・noopenerを効果的に使い分けることができます。

rel=”noopenerへの対応状況

最後に、rel=”noopenerへの対応状況を以下の2種類あるツールでご紹介します。

• WordPress
• ブラウザ

順番に見ていきましょう。

WordPress

WordPressは、バージョン5.1からtarget=”_blankにrel=”noopenerが自動付与されています。そのため、わざわざrel=”noopenerを指定する必要なく、target=”_blankのリンクを使用することができます。

ブラウザ

FireFox79から、rel属性が付与されていない場合にrel=”noopenerが適用されることになりました。また、chorome88も同様に、記述不要になったのです。最新のブラウザの場合は、rel=”noopenerが適用されているケースが多くなっていますが、古いブラウザの場合は、自分で挿入する必要があります。

「target="_blank"」のまとめ

target=”_blankは、使用状況に応じて使い分けをしないと、効果が十分に発揮されません。すでにデメリットとして挙げられているパフォーマンスの低下や脆弱性があることなど、target=”_blankの課題はさまざまです。

しかし、norefferer・noopenerを適切に指定することができれば、有効的にtarget=”_blankの使用が可能です。target=”_blankを自社Webサイトへ活用する際には、norefferer・noopenerについて正しく勉強しましょう。