ITTI STAFF
BLOG

イッティWEBスタッフの制作ブログ

【基本Tips】JavaScriptで外部リンクにtargetやnofollow、noopenerを追記する

外部のリンクにtarget属性やrel属性のnofollowやnoopennerをJavaScript、jQueryを使って追記する方法です。

JavaScriptで外部リンクにrel="nofollow"を自動的に追記する前に、ついでにリンク属性についておさらいしてみます。

rel="noopener"とは

リンク先のページを別ウインドウで開く「target="_blank"」にはセキュリティ上の脆弱性があります。

javascriptを使ってリンク元の親ページのURLを操作する「Tabnabbing(タブナビング)」と呼ばれるブラウザの脆弱性の一つです。

rel=noopenerを追記することで、target="_blank"によるセキュリティとパフォーマンスの低下を防ぐことができます。

そのため、rel=noopennerは、target="_blank"とセットで使います。

HTML
<a href="" target="_blank" rel="noopener">

rel="nofollow"とは

「nofollow」があるリンク先のウェブページの評価を無効であることを検索サイトに伝えることができます。

SEOで外部リンクの売買が盛んな時に、外部リンク売買を抑制するために用意された属性です。

また、rel="nofollow"を記述することでリンクジュースを渡さないことにもなるため、ウェブサイトの初歩的なSEOとして用いられています。

一般的にはアフィリエイトのリンク先や、信頼のないページへのリンクに「rel="nofollow"」を記述することが推奨されています。

noopenerと一緒に使う場合は下記になります。

HTML
<a href="" target="_blank" rel="nofollow noopener">

rel="external"とは

リンクが「外部リンク」であることを伝えます。
セマンティックが気になる方は追記しても良いでしょう。

HTML
<a href="" target="_blank" rel="external nofollow noopener">

target="_blank"とtarget="_new"

リンク先を別ウインドウで開く場合は「target="_blank"」があります。target="_blank"のリンクはクリックされるたびに別ウインドウが開きます。

一方「target="_new"」の場合は、別ウインドウは1枚だけしか開きません。
何度クリックしても開いたウインドウにページが読み込まれます。

一見「target="_new"」は便利ですが、リンク先が開かれたことに気が付かないこともあり「target="_blank"」の方が好まれます。

JavaScriptによるリンクのrel属性の追記

ピュアJavaScriptで外部リンクに「target="_blank"」や「rel="noopener nofollow"」を追記することができます。

JavaScript
function ready(fn) {
  if (document.readyState != 'loading') {
    fn();
  } else if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', fn);
  } else {
    document.attachEvent('onreadystatechange', function() {
      if (document.readyState != 'loading')
        fn();
    });
  }
}
ready(function() {
  var website = window.location.hostnam;
  var internalLinkRegex = new RegExp('^((((http:\\/\\/|https:\\/\\/)(www\\.)?)?'
  + website
  + ')|(localhost:\\d{4})|(\\/.*))(\\/.*)?$', '');  
 
var anchorEls = document.querySelectorAll('a');
  var anchorElsLength = anchorEls.length;

for (var i = 0; i < anchorElsLength; i++) {
  var anchorEl = anchorEls[i];
  var href = anchorEl.getAttribute('href');
if (!internalLinkRegex.test(href)) {
  anchorEl.setAttribute('target', '_blank');
  anchorEl.setAttribute('rel', 'noopener nofollow');

    }
  }
});

jQueryによるリンクのrel属性の追記

jQueryで外部リンクにtarget=_blankやnofollow、noopenerを追記するコードは下記になります。

jQuery
$(function(){
  var website = window.location.hostname;
  var internalLinkRegex = new RegExp('^((((http:\\/\\/|https:\\/\\/)(www\\.)?)?'
  + website
  + ')|(localhost:\\d{4})|(\\/.*))(\\/.*)?$', '');
  $('a').filter(function() {
var href = $(this).attr('href');
  return !internalLinkRegex.test(href);
})
.each(function() {
  $(this).attr('target', '_blank');
  $(this).attr('rel', 'noopener nofollow');
  });
});

手早くリンクのrel属性をコントロールするには便利な方法です。

WordPressのプラグインによる弊害

WordPressは、別ウインドウで開くリンクには自動的にrel=noopenerを記述してくれます。

ただし、nofollowを自動的に追記してくれるプラグインを導入しているとrel=noopenerが記述されていないことがあります。

記事のリンクにrel=noopenerが記述されているかを確認した方が良いでしょう。

新しい記事

新宿のWEB制作会社イッティ

新宿のWEB制作会社イッティ