【基本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"」の場合は、別ウインドウは１枚だけしか開きません。
何度クリックしても開いたウインドウにページが読み込まれます。
一見「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が記述されているかを確認した方が良いでしょう。
