この記事では2019年に話題となったtarget=”_blank”問題について改めて整理しました。
私も昨年の夏ごろに慌てて対応しましたが、いくつか放置していたサイトの対応を最近になってようやく完了させました。そのときの作業の内容を整理しこの記事にまとめてみた次第です。
今からサイトを作り始めるという人にとってはあまり関係のない話ですが（理由は後述）、過去にサイトを量産して作りっぱなしにしている人や過去記事のメンテナンスをしていない人は早急に対応しておいたほうがいい問題です。
target=”_blank”問題とは？
target=”_blank”とは、リンクをクリックした際に別タブで開くことを意味するaタグの属性のひとつです。
2019年にかけて、target=”_blank”問題がアフィリエイト界隈で話題となりました。この問題は大きく以下の二つです。
- セキュリティの問題
- アフィリエイトリンクが開かない（＝報酬が発生しない）
ひとつはセキュリティの問題です。これは、target=”_blank”で新しく開かれたタブ・ウィンドウではリンク元の情報を保持するためリンク元を操作できてしまうという問題です。
【参考】サイトで rel=”noopener” を使用して外部アンカーを開く： https://developers.google.com/web/tools/lighthouse/audits/noopener?hl=ja
もうひとつはアフィリエイターにとって死活問題となりますが、一部の環境（OSとアプリの組み合わせ）でリンクが開かないという問題です。
訪問者が商品を購入しようとアフィリエイトリンクをクリックしても購入ページが開かないというのではアフィリエイターにとっても報酬が発生しないということで大きな話題となりました。
この問題の具体的な対応方法は以下になります。
リンクの指定方法
この問題を解決するためには、target=”_blank”を含んだリンク部分を修正する必要があります。
最低限知っておきたい対応方法
以下のtarget=”_blank”を含んだリンクを修正する場合について考えてみましょう。
【修正前】 <a href=”https://xxx.com” target=”_blank”>
target=”_blank”を取る場合と残す場合の最低限知っておきたい対応方法は以下になります。
| 対応 | 修正後 |
|---|---|
| target=”_blank”を取る場合 | <a href=”https://xxx.com” > |
| target=”_blank”を残す場合 | <a href=”https://xxx.com” target=”_blank” rel=”noopener”> |
target=”_blank”を残す場合は、rel=”noopener”を指定する必要があります。
3つのrel属性を組み合わせたパターン
これに加えてaタグのrel属性をどうするかによりもう少しパターンが増えてきます。
よく使う3つのrel属性をまとめると以下になります。
| 値 | 意味 |
|---|---|
| noopener | target=”_blank”と共に使用し、セキュリティ上の問題に対処するための設定です。 |
| nofollow | クローラーにページ内のリンクを辿らせず、リンク先にリンクパワーを与えないようにする設定です。上手く利用することでSEO上有利に働くと言われています。 |
| noreferrer | 参照先に対して参照先のリンクを渡さないようにする設定です。アフィリエイトリンクに付与した場合、どのURLから成果が発生したか特定できなくなります。成果の発生自体には影響なし。 |
これらのrel属性について踏まえもう一度下記リンクを修正する場合の修正例を以下の表にまとめます。
【修正前】 <a href=”https://xxx.com” target=”_blank”>
| 対応 | No. | rel属性 | 修正後 |
|---|---|---|---|
| target=”_blank”を取る場合 | (1) | なし | <a href=”https://xxx.com” > |
| (2) | rel=”nofollow” | <a href=”https://xxx.com” rel=”nofollow”> | |
| target=”_blank”を残す場合 | (3) | rel=”noopener” | <a href=”https://xxx.com” target=”_blank” rel=”noopener”> |
| (4) | rel=”nofollow noopener” | <a href=”https://xxx.com” target=”_blank” rel=”nofollow noopener”> | |
| (5) | rel=”noreferrer noopener” | <a href=”https://xxx.com” target=”_blank” rel=”noreferrer noopener”> | |
| (6) | rel=”nofollow noopener noreferrer” | <a href=”https://xxx.com” target=”_blank” rel=”nofollow noopener noreferrer”> |
(1) target=”_blank”を取る場合の一番シンプルなパターンです。
(2) (1)にrel=”nofollow”を付与したパターンです。
(3) target=”_blank”を残す場合の一番シンプルなパターンです。
(4) (3)にnofollowを追加したパターンです。
(5) (3)にnoreferrerを追加したパターンです。WordPress4.7.4以降では、target=”_blank”が入ったリンクに対してはこのrel=”noreferrer noopener”が自動付与されるという仕組みになっています。
(6) (3)にnofollowとnoreferrerを追加したパターンです。楽天アフィリエイトの広告タグはこの形式です。
取る場合、残す場合、だいたいこの中のパターンに収まるのではないでしょうか。
成果が発生したURLを特定したい人はrel=”noreferrer”は付与しないようにする必要がありますが、運営サイト数の少ない人や初心者の人であれば正直そこまで気にし過ぎずどれでもいいのかなという気がします。
個人的には、target=”_blank”を取る場合は(2)、残す場合は(4)にすることが多いですね。
内部リンクについて
内部リンクについては、target=”_blank”が付いていたとしても対応は不要です。
ただ、自分のサイト内をあえて別タブで遷移させる必要性はあまりないので、内部リンクの場合は、target=”_blank”は不要でしょう。3つのrel属性についても不要です。
広告タグの貼り直し
上記リンクの指定方法を踏まえたうえで、必要に応じて広告タグの修正を行います。
このtarget=”_blank”が問題になって以降、ASP各社、target=”_blank”を削除するなどして広告コードを変更しているので、タグを再取得して貼り直すのがベターです。
数が多すぎてひとつひとつ貼り直すのが大変な場合は、下記で紹介しているリンクの修正方法を参考に一括変換するというやり方もあります。
ASPではバナー広告などのタグについては修正は基本的にNGとしているところが多いですが、例外的に、このtarget=”_blank”の問題を受けてaタグに関する一部の属性の追加・削除のみ認めているところもあるので、修正する場合は各ASPで確認のうえ自己責任で行うようにしてください。
リンクの修正方法
ワードプレスとシリウスでのリンクの修正方法を紹介します。
ワードプレスでの修正方法
ワードプレスでの修正方法を説明します。
よって、4.7.4以降のバージョンを使用し記事を作成する分については、target=”_blank”の問題を意識する必要はありません。記事中のリンクにtarget=”_blank”がある場合は、ビジュアルエディタ、テキストエディタどちらを使用していても、外部リンク、内部リンク問わずrel=”noreferrer noopener”が付与されます。
しかし、既に公開済みの過去記事についてはワードプレスのバージョンを上げても自動付与されるわけではないため、以前のバージョンで作成したものについては対応が必要です。
また、各ワードプレステーマ固有のショートコードを使用してボタンリンクなどを作成している場合も対応が必要です（テーマ独自の対応を行っている可能性もあります）。
プラグインで一括置換え
該当部分を一括置換えする場合は「Search Regex」という有名なプラグインが便利です。
プラグインのメニューから「Search Regex」を検索しインストール＆有効化をします。
左側のメニューより「ツール」→「Search Regex」をクリックします。
Search Regexの使用方法は、「Search pattern」に置き換え前の文字列、「Replace pattern」に置き換え後の文字列を入力し、「Replace & Save」をクリックするだけです。
以下のtarget=”_blank”を含んだリンクをSearch Regexで置換える場合について見てみましょう。
【修正前】 <a href=”https://xxx.com” target=”_blank”>
target=”_blank”を取る場合の一番シンプルな置換えパターンは以下のようになります。
| Search pattern | Replace pattern |
|---|---|
| target=”_blank”> | > |
また、target=”_blank”を残す場合の一番シンプルな置換えパターンは以下のようになります。
| Search pattern | Replace pattern |
|---|---|
| target=”_blank”> | target=”_blank” rel=”noopener”> |
置換え例はあくまで一例です。現状のリンクの形式により置換え方法はいろいろあると思うので柔軟に対応してみてください。
本来置換える必要のない部分まで置換えてしまわないよう文言の指定には十分注意してください。
noreferrerが嫌な場合
また自動で付与されるnoreferrerが嫌な場合は下記記事で紹介されているようにfunctions.phpにコードを追加して制御するという方法もあるようです。
シリウスでの修正方法
シリウスでの修正方法を説明します。
シリウスの場合は、リンク作成時にtarget=”_blank”の指定の有無が選択でき、target=”_blank”が指定されている場合、現状ではnoopenerが自動で付与されるようになっています。
「サイトオプション」→「全体設定」の「リンクタグの調整」から確認・変更できます。
よって、最新バージョンのシリウスで新規にサイトを作成していく分にはワードプレス同様特にtarget=”_blank”の問題について意識する必要はなくなっています。
しかし、Ver1.572以前で作ったサイトについては対応する必要があります。
バージョンを最新にしてサイトの再生成
一番簡単な対応方法はシリウスのバージョンを最新にしてサイトを生成し直すことです。
noopenerが正しく付与されているか確認したい場合は、「プレビュー」→「テンプレート編集」→「HTMLソースの確認(プレビュー)」でソースの確認ができます。
この方法だとtarget=”_blank”を含んだリンク（広告タグを含む外部リンクおよび内部リンク）にはすべてnoopenerが付与されます。
手動で修正する
target=”_blank”を削除したい場合などは手動で修正しましょう。
置換え機能を使う
修正箇所が多い場合は置換え機能を使うこともできます。
「編集」タブの「記事の置換」をクリックします。
「検索する文字列」と「置換する文字列」に文字列を入力し「置換」をクリックします。
ランキング機能を使用している場合
ランキング機能を使用している場合は、公式リンクの部分にtarget=”_blank”があります。
必要に応じて、PC用テンプレートのtarget=”_blank”の箇所を修正します。
ランキングの編集画面を開き、「PC用テンプレート」をクリックします。
ソースコードの最初のほうにあるランキングのタイトル名の箇所にtarget=”_blank”があります。
また、ソースコードの最後のほうにある公式ページへのリンク部分にもtarget=”_blank”があります。
まとめ
以上、今回はtarget=”_blank”の問題について整理し対応方法について紹介しました。
記事本文中でも触れたように、現在は、各ASPではこのtarget=”_blank”の問題について対応済みです。新規に広告タグを作成する場合はそれをそのまま使えば問題ないです。
また、ワードプレスやシリウスについても対応が取られているので、最新のバージョンを使っていれば細かい属性を指定したい場合を除き特に気にする必要はなくなってきています。
しかし、昔作ったサイトを放置しているような場合は、上記の方法で対応する必要があります。思わぬ収益の取りこぼしが発生している可能性もあるので面倒ですが対応しておいた方がよいでしょう。
