最初に、すぐにでもこの問題の解決方法を知りたい人のために一言で解決方法を示すとすれば、

リンクに rel=“noopener” を追加しましょう
です。

詳しくは、これから説明しますので、お時間がある方は是非ご覧ください。

目次

• ・【target=“_blank”問題】ってなに？
• ・問題が起きている環境
• ・なぜ？いつから問題が起きているのか
• ・解決方法は2パターン（rel=“noopener”を追加）
• ・Googleも言及
• ・大手ASPの対応（推奨対応方法）
• ・WordPressはどうすればいいのか？

【target=“_blank”問題】ってなに？

2019年8月頃にTwitterで【target=“_blank”問題】というのが話題になりました。
これはどういう問題なのかを説明します。

外部サイトへリンクする際に、新しいタブまたは新しいウィンドウでサイトを開きたいと思った場合

例: <a href=“https://www.google.com/” target=“_blank”>Google</a>

上記の例のように target=“_blank” を追加しますよね？

でも、上記の書き方だとリンクをクリックしてもサイトが開かない場合があるというのが、今回の話題になっている問題です。

問題が起きている環境

これは、一部の環境で起きている問題と言われています。
なお、一部の環境とされているのは、

（一部の）Android端末 + Google Chromeという組み合わせと言われています。

また、Twitterのアプリ内ブラウザについても怪しいようですが、特定はされていません。

影響範囲が少ない可能性はありますが、リンクが開かないというのは、サイト運営者としては大変困る現象です。

なぜ？いつから問題が起きているのか

これは、以前から存在するセキュリティの問題ではありますが、

外部サイトへリンクする際に、target=“_blank” でリンク先のページを開いた場合に、リンク先のページが悪意のあるページだとすると、リンク元のページのURLを変更したりすることが可能になります。

AサイトのリンクからBサイトを別ウィンドウで開くと、
（悪意のあるBサイトのプログラムによって）AサイトがCサイトに移動させられてしまう

というセキュリティの問題（脆弱性：ぜいじゃくせい）が存在します。
そのため、一部の環境で target=“_blank” のみの外部リンクの場合に、サイトが開かなくなっていると考えられます。

いつから起きているのかは、ハッキリとはしていませんが、

やはりTwitterで話題になった2019年8月頃から起きている現象だと思われます。

解決方法は2パターン（rel=“noopener”を追加）

この解決方法は2パターンあります。

【パターン1】target=“_blank” を削除してしまう

変更前:<a href=“https://www.google.com/” target=“_blank”>Google</a>

変更後: <a href=“https://www.google.com/”>Google</a>

target=“_blank” を削除してしまえば、リンクが開かないという問題はなくなります（元ページが操作されてしまうようなセキュリティの心配もありません）

ただ、この場合は新しいタブやウィンドウで開かれないため、そのタブやウィンドウを閉じてしまうと、元のページも閉じられることになってしまいます。

【パターン2】rel=“noopener” を追加する

変更前: <a href=“https://www.google.com/” target=“_blank”>Google</a>

変更後: <a href=“https://www.google.com/” target=“_blank” rel=“noopener”>Google</a>

rel=“noopener” を追加すれば、セキュリティの心配もなく、新しいタブやウィンドウで、正常に外部サイトへ遷移することができます。

この書き方については、Googleの開発者向けサイトでも「一般的に、外部リンクを新しいウィンドウまたはタブで開く場合は、必ず rel="noopener" を追加してください。」というように言及されています。

参考: https://developers.google.com/web/tools/lighthouse/audits/noopener?hl=ja

つまり、
別タブや別ウィンドウでなくても問題がない場合（上記のパターン1）
target=“_blank” を削除する（target=“_blank” を付与しない）

別タブや別ウィンドウで開きたい場合（上記のパターン2）
target=“_blank” に rel=“noopener” を追加する。

ということになります。

また、今後は
target=“_blank” と rel=“noopener” は必ずセットで使うようにしましょう。

解決方法は2パターン（rel=“noopener”を追加）

今回の問題で影響があったのが、アフィリエイト界隈の方々のようで、Twitterで話題にしたのもアフィリエイトを専業で行われている方々（アフィリエイター）でした。

それを受けまして、大手ASP（アフィリエイトサービスプロバイダー）も方針を発表がありました。

パターン1（target=“_blank” の削除）の対応または推奨対応方法

• ・A8.net
• ・afb
• ・バリューコマース

パターン2（rel=“noopener” の追加）の対応または推奨対応方法

• ・レントラックス
• ・felmat（フェルマ）

パターン1、パターン2のどちらでも可

• ・アクセストレード

大手ASPでも対応方法は分かれていますので、運営サイトをどちらのパターンで対応するのかは検討する必要があるかと思います。

WordPressではどうすればいいのか？

WordPressでは、バージョン4.7.4（2017年4月20日公開）から、外部リンクに対して自動的に rel="noopener noreferrer" が付与されるようになりました。

なので、一般的なWordPressの利用（投稿や固定ページで記事を作成）する場合は、ビジュアルエディタ（TinyMCE）で自動挿入が行われているはずです。

ただし、WordPressのバージョンが4.7.4よりも前のバージョンを利用していたり、バージョン4.7.4（2017年4月20日公開）よりも以前からWordPressでサイト運営を行なっている場合は、rel属性が付与されていない外部リンクが存在する可能性があります。

また、カスタムフィールドで外部リンクのURLを設定している場合もrel属性が付与されていない外部リンクが存在する可能性があります。

そのようなサイトをお持ちの場合は、弊社でご対応いたしますので、一度ご相談ください。