HTMLの「aタグ」につくターゲット指定「blank」の話です。
「aタグ」について
ウェブサイトでは、文字や画像をクリックすると、他のページが表示されます。
このときに使われているのが「aタグ（アンカータグ）」です。
javascript の onclick で function を呼び出して、location.href で同じことができますが、このページで書くのは「aタグ」だけ。
「aタグ」は「a href=」で始まり、そのあとに続く引用符の中に、移動先のアドレスを書く仕様です。
絶対パスと相対パス
同じサイト内へのリンクなら、「相対パス（相対アドレス）」を使うケースが多いでしょう。
絶対パスだと、アドレスをすべて記述しなくてはいけないので、文字数が多くなるからです。
それに、サイトを引っ越した際に、すべてのリンクを書き直す必要が出てきます。
相対パスなら、そのファイルがある地点を基準にしているので、「https://～」を省略でき、サイトを引っ越した後の作業も減らせます。
例えば、「a.html」と「b.html」が同じ「alpha」というフォルダ内にあるなら、「a」から「b」へのリンクは「<a href="b.html">文字や画像</a>」で済みます。
その「alpha」というフォルダが「public_html」内にあり、「a.html」から「public_html」直下にある「index.html」へのリンクを貼りたい場合は、「<a href="../index.html">文字や画像</a>」となります。
「public_html」内にある「beta」フォルダ内の「c.html」に、「a.html」からリンクを貼りたい場合は、「<a href="../beta/c.html">文字や画像</a>」となります。
絶対パスの場合、どこにあるファイルなのかは関係ありません。
「<a href="https://xn--p8j0c8ie3w.com/beta/c.html">文字や画像</a>」といった具合に、省略せずにアドレスを記述します。
そのため、リンクを貼ったファイルの置き場所を変えても、リンク切れが起きないメリットがあります。
一方、ネットに繋がっていないと動作確認できないデメリットが発生しますし、先に書いたような引っ越し時の作業も必要になります。
本ページの主な内容は、アフィリエイトのリンクから「blank」が無くなった件ですが、もしかしたらリンクの解説が必要な人もいるかと思い、このような説明から入っています。
ターゲット指定の変遷
リンク先アドレスの書き方は、前項で書いた通りです。
これに、「target=」や「rel=」が付けられた「aタグ」があります。「rel=」はリンク先との関係性を示すもので、「target=」はリンク先ページの開き方に関するものです。
ここでは「target=」の種類について解説します。
まず、「target="_blank"」を「aタグ」に付けると、リンク先を別タブで開くことになります。
今、見ているタブは そのままで、新しく開いたタブに、リンク先が表示されるということ。
ブラウザのタブ
スマホ用ブラウザのタブ
今だからこそ「別タブ」と言っていますが、以前はブラウザを新たに立ち上げ、そこに表示させるものでした。これは、ブラウザにタブが無かった頃の話です。
当時、「blank」のリンクを踏み続けると、画面がブラウザだらけになり、1つずつ閉じるのが面倒でした。
タブという機能が付いたおかげで、一気に閉じれるようになったのです。
とはいえ、新しく開いてくれるから、助かることもあります。
例えば、ページ内容を見比べたいときなどですね。
他に、ブラウザゲームのように閉じるわけにはいかないケースもありますし、読み込みし直すのに時間がかかる問題もあるでしょう。
作り手側の心境としては、他サイトへのリンクを貼ったものの、「また、自分のサイトに戻ってきてほしい」といったところでしょうか。
「blank」以外に、「_self」「_top」「_parent」などがあり、フレーム分けされたサイトで使用されていました。
見た目的には、スタイルシートでのカラム分けに近いですが、フレーム分け情報しかないHTMLの存在など、違う点は幾つもあります。
現存するフレーム分けサイトで有名なのは、阿部 寛さんのホームページでしょうか。
ソースを見れば、「frameset」が使われているのがわかります。
表示比率は「cols=18,82」とあるので、左のメニューが18％、右のメイン表示箇所が82％の幅になります。
フレームの「name=」は、メニューが「left」、メイン表示箇所が「right」なので、メニューにあるリンクのターゲット指定には「right」が入っています。
そうすることで、メイン表示箇所だけを変えることができるのです。
フレーム分けとSEO
このフレーム分けサイトの減少と、Googleの普及は反比例していたように思います。
というのも、当時のGoogleのクローラーは、HTMLのファイル単位で情報を取得していたからです。
断言しているのは、そう思えるようなGoogleの検索結果だったから。
以下は、阿部 寛さんのサイトのアドレスで、上から順に「フレーム分け情報のページ」「メニュー」「トップページ」となっています。
http://abehiroshi.la.coocan.jp/index.htm
http://abehiroshi.la.coocan.jp/menu.htm
http://abehiroshi.la.coocan.jp/top.htm
この中で、検索結果に出てくるのは、トップページだけ。
それがどういうことかと言うと、上のリンクを踏めばわかりますが、メニューありきでデザインしているのに、メニューが表示されないということ。
これでは、トップページ以外を見たくても、リンクが無いので移動できません。
これがフレーム分けサイトが減っていった理由の1つでしょう。
フレーム分けには、アクセス解析の面でもデメリットがあります。
アドレスが変化しないので、どのページが見られているのか、わからないのです。
ずっと「index.htm」を開いたまま、「right」に読み込むページを変えている状態なので、「ページを遷移した」という認識はされない。そういう話です。
今は変わっているようですが……
フレームを使ったサイトでは、必ず frameset（親）ページの <head> セクションで、トラッキングする個々の子フレームの </head> タグの直前にトラッキング コードを配置してください。本文と同等と考えて <noframe> タグ内にトラッキング コードを配置すると、コードは実行されず、データも記録されません。
引用元：フレームを使ったサイト - アナリティクス ヘルプ
アフィリエイトのリンクコード
アフィリエイトのリンクコードには、「rel属性」なしで「blank」が入っているのが普通でした。
それが、2019年の9月初旬に、相次いで変更されています。
A8.netから変更連絡のメールが来たのは、9月4日。変更したのは9月2日。
アクセストレードは9月5日、バリューコマースは9月6日、リンクシェアのTGアフィリエイトは9月11日でした。
「blank」の脆弱性
「blank」の脆弱性に関しては、2019年の3月には話題になっていたと思います。
それは、JavaScriptを用いることで、リンク元のウィンドウを変えられるというもの。
怪しげなサイトでリンクを踏んだら、リンク先が新しいタブで開く一方で、さっきまで見ていたタブがアダルトサイトに変わっていた……。
そんな感じでしょうか。
このリンク元の操作を防ぐ方法に、「rel="noopener"」があります。
これを「aタグ」に加えれば防止できるので、「blank」の削除ではなく、「noopener」の追加を選択したASPもあります。
target="_blank" にはセキュリティ上の脆弱性もあります。リンク先のページでは window.opener を使用して親ウィンドウのオブジェクトにアクセスしたり、window.opener.location = newURL によって親ページの URL を変更したりできます。
引用元：サイトで rel="noopener" を使用して外部アンカーを開く｜Google Developers
「noreferrer」
「rel属性」に「noreferrer」も追加したASPもあります。
「noopener」は「No Opener」で、「noreferrer」は「No Referrer」と書けば、リファラに対して「No」なのがわかるでしょう。
つまり、リンク先にリファラを送信しない記述です。
リファラは、SNSで言うところの「あしあと」みたいなものです。どこから訪問してきたのか示すデータで、それを残さないことになります。
この「noreferrer」でも、「window.opener.location.href」に効果がありました。
確認したブラウザは「Firefox v69.0.3」「Google Chrome 77.0」です。まぁ、テスト用ページから、テスト用ページへの遷移ですが。
WING（AFFINGER5版）のrel属性の削除機能
WordPress では、テーマにもよるでしょうが、この「noreferrer」と「noopener」を削除する機能が付いています。
「WING（AFFINGER5版）」の場合、「AFFINGER5 管理」→「その他」の手順で実行できます。
「nofollow」と「noindex」
「rel属性」に付けられるものとして、他に「nofollow」や「noindex」があり、それぞれ「Follow」や「Index」に対して「No」しています。
端的に言えば「支持していないから、インデックス化しないでくれ」みたいな意思表示でしょうか。
普通にリンクを貼れば、被リンク扱いになり、検索アルゴリズム的に、リンク先のサイト評価が高まる。
だけど、「nofollow」があると そうならないし、「noindex」も付ければクローラーが巡回しない。
そんな風に捉えられている節があります。なお、Googleの見解は下記の通り。
リンクにその他の適切な値がなく、そのリンクとサイトを関連付けたくない、またはリンク先のページをサイトからクロールさせないようにする場合は、nofollow の値を使用します
引用元：Google に外部リンクの関係性を伝える - Search Console ヘルプ
「nofollow」と「noindex」は、「metaタグ」にも記載できます。
このページはインデックス化してほしくない、評価しないでほしいときに使用します。
例えば、プライバシーポリシーのような他サイトにも似た文言があるページや、閲覧者を限定したいページなどがそうです。
他と似た内容はコピーコンテンツと見なされ、サイトの評価を落とす可能性があるので、そう言われているはず……。
スマホにおける「blank」問題
一部の端末で、「noopener」なしの「blank」付きリンクは作動しない。
そんなことが囁かれたのは、2019年の8月初旬だったでしょうか。
再現性がないようなことが言われ、沈静化していったように記憶しています。
まとめ
長々と「blank」について書いてきましたが、結論としては「blank」の存在を否定するものになります。
「blank」は、要らない。
そう書いてしまうと、説明してきたことが虚しいですが、そう思うのだから仕方がありません。
ただ、あくまでアフィリエイトリンクにおいて、「blank」は必要ないという話です。
アフィリエイトの目的は、リンク先におけるコンバージョンです。
それなら、自分のサイトを開いたままにし、別のタブを開くメリットは少ないのでは ないでしょうか。
逆に、自分のサイトに戻ってこれるという選択肢を残すことで、リンク先に対する集中力を削ぎ、コンバージョンを阻害するデメリットがあります。
それは売り場への案内を頼まれた係員が、ずっと客の傍にいるようなもの。
相手を買い物に集中させたいのなら、そっといなくなった方がいいでしょう。
中には、ずっと付き添っていてほしい人もいるかもしれないので、絶対にとは言い切れませんが。
※ 属性の追加や削除が、リンクコードの改変に当たるか否かは、各ASPで確認した方がいいでしょう。参考用に、A8.netの『広告リンクコードの変更についてのお知らせと改変について』のリンクを貼っておきます。
※ 厄介なのは「noreferrer」なんですが、楽天アフィリエイトは入る仕様になっています。