外部リンクを別タブで開くようにするJavaScript(jQuery不要)

主にWordPress記事内の外部リンクに対して、リンク先を別タブで開く設定をJavaScriptのみで行う方法を解説します。
jQueryなど特定のライブラリを必要としない、素のJavaScriptのみで実装するため、利用しているテーマやプラグインには依存しません。

利用背景

当ブログではMarkdownで本文を投稿し、出力時にPHPのパーサーを利用してHTMLに出力変換しています。
ただし、リンクに関してはHTMLを直書きしないとtarget属性を指定できないため、記事内の外部リンクをクリックするとそのまま画面遷移してしまう問題がありました。
当初利用を検討していたWordPressテーマ「Simplicity2」では、外部リンクを別タブで開く機能が備わっていませんでした。
そこでJavaScriptを用いて対策を行ったのが本記事の内容となります。
次の項で設置するコードを載せますが、WordPressのテーマによりコードの設置場所や方法が異なるため各自でご確認ください。

ちなみに現在利用しているWordPressテーマ「Coccon」では、この機能は標準で備わっています。

設置するJavaScriptコード

(function(window, document, location) {
  window.addEventListener('DOMContentLoaded', function() {
    var anchor = document.querySelectorAll('.entry-content a');
    for (var i = anchor.length; i--;) {
      if (location.hostname !== anchor[i].hostname) {
        anchor[i].target = '_blank';
        anchor[i].rel = 'nofollow noopener';
      }
    }
  });
})(this, this.document, this.location);

コード要所解説

window.addEventListener('DOMContentLoaded', function() {・・・});

でDOM要素読み込み完了時に実行される処理を指定します。
jQueryの$(function(){・・・});と同じです。

var anchor = document.querySelectorAll('.entry-content a');

でWordPress記事本文内のリンク要素を全て取得。
「.entry-content」の部分は使用するテーマにより変わる可能性もあるため、適宜調整してください。

if (location.hostname !== anchor[i].hostname) {・・・}

でホスト名を比較して、内部リンクか外部リンクかを判別します。if文内の処理、

anchor[i].target = '_blank';
anchor[i].rel = 'nofollow noopener';

でリンクを別タブで開くようにtarget属性に「_blank」を設定しています。
なお、rel属性に「noopener」を設定しているのはセキュリティ対策のためで、リンク先のJavaScriptからwindow.openerで画面操作されるのを防ぐためです。 「nofollow」はSEO対策で、リンク先へサイト評価を引き継がないための設定となります。

※サポート切れのIE11ではrel属性に「noreferrer」も指定しないとopener対策になりません
※ただしnoreferrerを指定するとアフィリエイトリンクに影響が出るため適用は自己判断で

以上です。