target="_blank" (ターゲットブランク)はリンクタグの「属性」の一種で、ブログやアフィリエイト初心者は知らない方も多いかと思います。
最近、アフィリエイターやブロガーの間でいわゆる「target="_blank" 問題」が話題になっています。
「target="_blank"問題」は適切に対処しないと、サイトのセキュリティ問題や、アフィリエイト報酬への影響が懸念されます。
下記に当てはまる方にぜひ読んで頂きたいです。
こんな方におすすめ
- 「target="_blank"」ってそもそも何?
- 「私には関係がない」と思っている。
- 「target="_blank"」の解決方法が分からない
- 「target="_blank"」を残す、残さない?
- noopener、noreferrer、nofollowの設定方法は?
- ASPの見解や具体的な解決方法を知りたい
この記事では、target="_blank"の問題点と危険性、ASPの見解、および運営メディアごとの解決策を初心者にも分かりやすく解説します。
ただし、あくまで個人的な見解なので参考程度に留めていただき、最終判断や行動は自己判断で対応されることをおすすめします。
target="_blank" とは?
リンクの開き方のこと
まず最初にtarget="_blank"を簡単におさらいしましょう。
target="_blank"はハイパーリンクを「新規ウィンドウ(新規タブ)で開く」ことを意味するHTMLのaタグ(リンクタグ)の属性の一つです。
HTMLの属性とは?
HTMLの属性は簡単に言えば「詳細設定」のことです。
ちなみに、blankの前のアンダーバー(_target)が抜けると正しく動作しないので要注意です。
target="_blank"の例
通常、target="_blank"は主に外部リンクに対して付けます。例えば次のような感じです。
<a href="example.html" target="_blank">リンクテキスト</a>
実は、target="_blank"には2つの危険性があるのをご存知でしょうか?
target="_blank" の危険性
target="_blank"には下記2つの問題が指摘されています。
注意ポイント
- セキュリティへの影響
- アフィリエイト報酬への影響
①セキュリティへの影響
target="_blank"にはセキュリティ上の脆弱性の問題があります。
それは、target="_blank"で開かれたページは元のページ情報を持つため、リンク先のページから元ページを操作できるということです。
所有サイトへの危険性
具体的な方法は割愛しますが、例えば外部サイトにtarget="_blank"のみでリンク貼った場合は、相手サイトによって自サイトのURL改変やフィッシング詐欺に利用される危れもあります。
参考:かもメモ「HTML 本当は怖い target="_blank" 。rel="noopener" ってなに?」(https://chaika.hatenablog.com/entry/2018/12/06/110000)
②アフィリエイト報酬への影響
さらに、target="_blank"には一部スマホとブラウザの組み合わせによっては、アフィリリンク先に遷移できないケースがあるようです。
アフィリエイターの間では報酬の方に注目し、先ほどのセキュリティの問題が軽視されがちですが、どちらも大事です。
アフィリ報酬が減る危険性
アフィリリンクに遷移できない(開かない)=報酬発生しないので深刻な問題ですね。
危機管理能力の高いブラウザ開発メーカーなら「顧客やサイト運営者を危険から守る」という名目で、「target="_blank"単体で挿入するリンクタグ」に対して対策するのは当然です。
そのため、現在は正常に遷移できるスマホやブラウザの組み合わせであっても、遅かれ早かれ対応される可能性が高いと思います。
▶2021年は、Core Web Vitalsにも対応しよう。【Q&A LSI Search】Q&Aサイトの潜在キーワード取得ツール
では、どのように対策すればいいのでしょうか?次に具体的な対策をご紹介します。
target="_blank" の対策
2通りの対策
target="_blank"の対策は大きく分けて2つあります。
2つの対策
- target="_blank"を消す
- target="_blank"を残し、rel="noopener"を追加する
①と②はどちらがより良い対策なのでしょうか?どちらもメリット、デメリットがあるので、その違いについて次に紹介します。
①target="_blank"を消す
target="_blank"を消すことは、例えるなら「危険なものは消す」考え方です。
消す方法は下記いずれかでOKですが、①の方がより確実です。
2種類の消し方
- target="_blank"を丸ごと削除
- target=""に変える
target="_blank"を消した場合、リンクをクリックすると直接遷移します。つまり、新規ウィンドウやタブが開かず、そのままページがリンク先URLに切り替わります。
target="_blank"を消すことのメリット・デメリットは以下の通り。
メリット
シンプルな対策なので間違いにくく、タブが開かれないので「戻る」ボタンで戻りやすい。
デメリット
target="_blank"を消す一番の懸念点は、自サイトからリンク先に直接遷移(=サイト離脱)が増えることです。
それにより、サイトの「離脱率の増加」or「サイト滞在時間の減少」の可能性が高まると考えます。
サイトの記事内容にもよりますが、一般的には「離脱率が低いほど」「サイト滞在時間が長いほど」SEO的に有利です。
つまり、target="_blank"を消す対策は「SEO的に不利になる可能性」があると思います。
また、リンク先が重いサイトの場合は閲覧ページが直接遷移するので、検索ユーザーを待たせることになるのでユーザビリティ的にもふさわしくないと思います。(もうすぐ5Gなのでその問題は無くなりますが)
②target="_blank"を残し、rel="noopener"を追加する
もう一つの対策は、target="_blank"を残して、rel="noopener"を追加することです。
noopenerとは?
rel="noopener"もaタグの属性の一つで、target="_blank"の「セキュリティ対策用の設定」です。
メリット
target="_blank"と同様にリンク先が新規タブ・ウィンドウで開くので、リンク先に飛んでも自サイトは閉じないので、離脱カウントされず滞在時間がカウントされ続けるということです。
その後、自サイトへのアクセスがない状態で一定時間(30分)経過後に離脱判定されます。つまり、先ほどのケースに比べて「離脱率が減り、閲覧時間が伸びる」可能性が高いです。
また、重いサイトでも(PCの場合は)別ウィンドウで開くので検索ユーザーを待たせる事がないため、利便性が高いです。
デメリット
ブラウザによってはスマホで簡単に自サイトへブラウザバックできない。(戻るボタンで自サイトに戻れない)いちいちタブを切り替えないと戻れない可能性があります。
ただし、Androidスマホ+Chromeブラウザならtarget="_blank"同様にブラウザバックできます。
なお、rel="noopener"の意味については下記に詳しい説明が書かれています。
参考:https://developers.google.com/web/tools/lighthouse/audits/noopener
以上がtarget="_blank"への対処方法です。
次に混同しがちなrel=""の3つの中身(タグ要素)を分かりやすく整理しました。
3つのrel要素の設定方法
3つのrel要素(nofollow noreferrer noopener)の意味
実はrel要素で一番良く使われるのはnoopener、nofollow、noreferrerの3つです。これら3つの設定は必須、かつ混同されがちなので、しっかり解説しておきます。
3つのrel要素の意味
要素名 | 意味 |
rel="nofollow" (ノーフォロー) | リンクに対してリンクパワーを与えない設定。外部リンクに設定することでリンクジュース(ページ評価)を外部に渡さない。内部リンクの質が高まり、SEO的に有利に働く可能性が高い。 |
rel="noreferrer" (ノーリファラー) | 参照先に対して参照元のリンク情報を渡さない設定。noopener未対応ブラウザの代用(※1)としてセットで用いられます。リファラ(※2)を計測できない可能性も。 |
rel="noopener" (ノーオープナー) | target="_blank"の「セキュリティ対策用の設定」target="_blank"とセットで入れる。 |
※1:一部ブラウザ(ChromeとOpera以外)ではrel="noopener"が未対応のため、rel="noreferrer"も同時に挿入するという使い方がされています。
ただし、2016年時点の下記記事を参照にしているので、最新の状況はわかりません。
出典:リンクのへの rel=noopener 付与による Tabnabbing 対策(https://blog.jxck.io/entries/2016-06-12/noopener.html)
※2:リファラとは参照元のURLのことです。例えば、下記のように発生報酬の画面でリファラ(報酬発生URL)が表示されなくなります。
後述しますが、rel="noreferrer"があると、成果発生したURLは特定できなくなりますが、ASPによる報酬発生の追跡(トラッキング)には影響なさそうです。
3つのrel要素(nofollow noreferrer noopener)の使い分け
target="_blank"、および3つのrel要素(nofollow、noreferrer、noopener)について、内部リンク、外部リンクごとの設定をまとめたのが下表です。
要素名 | 内部リンク | 外部リンク |
①rel="nofollow" | 不要 | 設定推奨 |
②rel="noreferrer" | 設定推奨 | |
③rel="noopener" | ④次第 | |
④target="_blank" | ③次第 |
内部リンクには、target="_blank"とrel要素(nofollow noreferrer noopener)は一切不要です。
外部リンクには、SEO的に①rel="nofollow"を入れた方が良く、④target="_blank"を入れる場合は、③rel="noopener"と②rel="noreferrer"をセットで入れた方が良いと思います。
外部リンクへの設定方法
外部リンクに対してまとめると下表になります。
target="_blank" 有り | rel="nofollow noopener noreferrer"(もしくはrel="nofollow noopener")を入れる |
target="_blank" 無し | noopener noreferrerを消して、rel="nofollow"を入れる |
ワードプレスはnoopener noreferrerが自動付与
最新のワードプレスはtarget=”_blank”の入った文字リンクに対し、WordPress v4.7.4 以降から rel="noreferrer noopener"自動付与される仕様に変わったので対策不要です。
つまり、target="_blank"の入ったリンクはワードプレス保存時に、rel="noreferrer noopener"が自動付与されるということです。
しかし、特殊なボタンリンクなど有料テーマ依存するパーツの場合、対応していない場合もあるので、都度確認した方が良いです。
また、SIRIUSや無料ブログでは自動付与の機能が無いため、個別に変更が必要です。
基本的にアフィリエイト広告を貼る場合は、ASPの規約に則る必要があります。そこで、次にASPの見解についてご紹介したいと思います。
ASPの見解
ASPは基本的にタグ改変は非推奨
ASP的にはどのような対応を取ればよいかに関しては、下記ブログ運営者の北野様が様々なASPに対して詳細に問い合わせして頂いているようです。感謝!
出典:「フリーランスライター・編集者 北野 啓太郎のブログ」(https://swinginthinkin.com/wordpress/affiliate-noopener-noreferrer/)
ASPごとの見解について上記ブログを引用すると、次のような状況とのこと。
rel=”noopener noreferrer” はリファラが計測ができない。target=”_blank” を外してOK【レントラックス】
target=”_blank” を外すのはダメ! rel=”noopener noreferrer” が付くと保証できない【A8.net、バリューコマース】
「target=”_blank”」を外すことに関して
- A8.net「ご遠慮ください」
- バリュコマース「公認することができません」
「rel=”noopener noreferrer”」が付与されることに関して
- A8.net「正常に作動しなくても保証できません」
- バリュコマース 「すべてのお支払いができなくなる場合もある」
つまり、ASPごとに広告規約を正しく把握した上でタグ改変した方が良さそうですね。
そして困ったことにA8を含めた主要ASPでは、レントラックスを除いて基本的にはタグ改変はダメみたいです。
元々正しいタグが書かれていれば問題ないですが、そうでない場合がほとんどなので、私も含め迷う方も多いかもしれません。
そこで、基本に立ち返ってASPが言っている「タグ改変」の定義を再確認してみました。タグ改変が何を指し、どこまでがOKで、どこからNGなのか、代表例としてA8について紹介します。
A8の広告素材の規約
出典:A8サポートガイド(https://support.a8.net/as/supportguide/manual/step4.php)
A8.netでは生成された広告素材を広告主に無断で変更することを禁止しています。
バナー画像の変更、テキスト広告の文言変更、広告コードからリンク部分のみを使用すること等が該当します。
A8.netの広告規約では次の3種類の広告素材を変えることを禁止しています。
ポイント
- バナー画像の変更
- テキスト広告の文言変更
- 広告コードからリンク部分のみを使用
それぞれ何を指しているのか詳しく解説します。
①バナー画像の変更
バナー画像とは上記のように画像にアフィリエイトリンクが組み込まれているものです。
このバナー画像のリンク先はそのままで、画像だけを変更するのはNGということ。
②テキスト広告の文言変更
次にテキスト広告は、次のように文章にアフィリエイトリンクが組み込まれたものです。
テキストリンクのリンク先はそのままで、文言だけを書き換えるのはNGと言っています。
③広告コードからリンク部分のみを使用
広告コードとは、例えば先ほどのバナー、リンクのHTMLのことです。
バナー
<a href="https://px.a8.net/svt/ejp?a8mat=35HSKI+A6E8RU+17H0+5ZU29" target="_blank" rel="nofollow">
<img border="0" width="125" height="125" alt="" src="https://www21.a8.net/svt/bgt?aid=190626786615&wid=404&eno=01&mid=s00000005634001007000&mc=1"></a>
<img border="0" width="1" height="1" src="https://www11.a8.net/0.gif?a8mat=35HSKI+A6E8RU+17H0+5ZU29" alt="">
テキストリンク
<a href="https://px.a8.net/svt/ejp?a8mat=35HSKI+A6E8RU+17H0+62MDE" target="_blank" rel="nofollow">一度使ったら手放せません。検索順位チェックツールGRC</a>
<img border="0" width="1" height="1" src="https://www10.a8.net/0.gif?a8mat=35HSKI+A6E8RU+17H0+62MDE" alt="">
この中から、赤色のマーカー部分のリンク部分だけを抜き出して、例えばサイト独自のボタンに組み込むことを禁止しています。
また、テキストリンクのタグの中身を見ると、target="_blank"が入っているのに、rel="noopener"やrel="noreferrer"が入っていません。
つまり、タグ改変が必要けど、規約上はタグ改変ができないジレンマがあるわけです。
タグ改変の例外
実は広告素材の規約では言及してないことがあります。
それは、メール用広告です。メール用広告は例えば次のようなものです。
自由テキスト
https://px.a8.net/svt/ejp?a8mat=35HSKI+A6E8RU+17H0+639IR
つまり、例外として考え付くのは「メール用広告のURLをリンクタグに入れ込む」ことです。それが唯一、広告コードの変更に当たらない方法だと勝手に推測しています。
ただし、デメリットとしてはリファラが取れないので、どの記事から報酬発生したか分からなくなります。
そして、そういう使い方を許可しているかどうかも含めて自己責任でやる必要がありそうです。
実は黙認(グレー)の領域
おそらく、電話やメールなどで正式な問い合わせをすると、ASPはタグ改変はNGと言わざるを得ないと思います。(変更OKと公表した場合、タグ変更をミスって計測できなくなると、責任問題に発展しかねないので)
しかし、直接担当者が付いている方は一度はその手の疑問を直接投げかけたこともあるかもしれません。
私個人の場合、詳細は伏せますがYESともNOとも取れない「あいまいな回答」を頂いたこともあります。
なので、結局target="_blank"に関しての対応策は2つだと思います。
- リスク承知でメール用タグを使う
- リスク承知でテキストリンクを書き換える
おそらく、①、②いずれも問題はないとは思いますが…保証はできません。
迷ったら稼いでいる人を参考に
ちなみに、この件に関して下記ツイートをしました。
target="_blank"の件もそうなんですが、判断に迷ったらトップの人の行動を見るといいです。インターネット上の情報は見放題。Ctrl+UでHTMLまで全て見れる。SEOで1位のサイトとか、ビックキーワードで1位のサイト、実力ある方のサイトとか参考になります。迷ったらCtrl+Uです。
— タカ@アフィリラブ (@afimana7) August 16, 2019
今回の件はASPも対応策を正式発表していないので、ビッグキーワードで上位サイトを調べて見るもの一つの方法です。その際は、サンプル数を十分多く取ること(10サイト程度)です。
では、次に具体的なタグ改変の方を紹介します。
具体的な設定方法
置換方法の基本
置換する場合、置換前は変更前のタグ、置換後は変更後のタグにします。
変更前のタグ
<a href="https://px.a8.net/svt/ejp?a8mat=35HSKI+A6E8RU+17H0+62MDE" target="_blank" rel="nofollow">一度使ったら手放せません。検索順位チェックツールGRC</a>
<img border="0" width="1" height="1" src="https://www10.a8.net/0.gif?a8mat=35HSKI+A6E8RU+17H0+62MDE" alt="">
target="_blank"を削除する場合
例:変更後のタグ
<a href="https://px.a8.net/svt/ejp?a8mat=35HSKI+A6E8RU+17H0+62MDE" rel="nofollow">一度使ったら手放せません。検索順位チェックツールGRC</a>
<img border="0" width="1" height="1" src="https://www10.a8.net/0.gif?a8mat=35HSKI+A6E8RU+17H0+62MDE" alt="">
target="_blank"を残す場合
例:変更後
<a href="https://px.a8.net/svt/ejp?a8mat=35HSKI+A6E8RU+17H0+62MDE" target="_blank" rel="nofollow noopener noreferrer">一度使ったら手放せません。検索順位チェックツールGRC</a>
<img border="0" width="1" height="1" src="https://www10.a8.net/0.gif?a8mat=35HSKI+A6E8RU+17H0+62MDE" alt="">
では、ワードプレスとSIRIUSで具体的な置換方法を紹介します。
ワードプレスの場合
ワードプレスは一括置換のプラグイン「Search Regex」を使いましょう。
タグの一部削除、追加どちらでも使えます。基本的にもとに戻せなくなるので、使う前はバックアップを必ず取っておきましょう。
Search patternに変更前のタグ、Replace pattenを入力後、Searchボタンを押します。
そして該当項目が出てきたら、よく確認した上で「Replace&Save」を推せば一括置換されます。
Search Regexは長期間アップデートされていないため、セキュリティ的に弱いと言われており、必要が無くなったら削除した方が無難です。
SIRIUSの場合
サイト数も記事数も少ない場合は、正しいタグを作った上で、一つ一つ手作業で正しいタグに入れ替えるので対処できます。
しかし、1サイトに数10記事以上だと結構大変なので一括置換機能を使うことを推奨します。
一括置換は記事編集画面を開いた状態でショートカットキーだとCtrl+R、もしくはSIRIUS上部メニューの「編集」➝「記事の置換」から利用できます。
検索する文字列に改変前のタグ、置換する文字列に改変後のタグを入れます。
検索対象は全てのページに設定しておきましょう。
まとめ
target="_blank"の2つのリスク(セキュリティの脆弱性、アフィリ報酬減るリスク)についてお伝えしました。
対処方法はtarget="_blank"を消す、もしくはtarget="_blank"を残してrel="noopener noreferrer"追加のいずれかです。
前者の場合はSEO的に不利になる可能性があり、いずれの場合もASPの広告変更の規約に引っかかりそうですが、対処せざるを得ません。
また、付随して設定すべき3つのrel要素(nofollow、noreferrer、noopener)の意味や、具体的な設定方法も詳しく解説しました。
迷っている方の参考になれば幸いです。最後までお読み頂き、ありがとうございました。
こちらも気になる方はどうぞ。