当ブログのコンテンツ・情報について、できる限り正確な情報を提供するように努めておりますが、正確性や安全性を保証するものではありません。
当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねますので、予めご了承ください。
WordPressでrel="noreferrer"を削除する方法と応用技
WordPressでハイパーリンクにtarget= "_blank"を設定すると、強制的にrel="noopener noreferrer"が付加されます。本記事ではtarget= "_blank"を設定したときにrel="noreferrer"が設定されないようにする方法を解説します。
目次
target= "_blank"とrel="noopener noreferrer"の関係
WordPressでtarget="_blank"を指定すると、自動的にrel="noopener noreferrer"が付加されます。これは、ユーザーのセキュリティとプライバシーを守るためです。
noopenerは新しいウィンドウで開いたページから、元のページにアクセスする権限を制限し、クロスサイトスクリプティング（XSS）攻撃のリスクを減らします。また、noreferrerは、リンク先のページにリファラー情報が渡されないようにします。しかし、特定のケースによってはrel="noreferrer"を使いたくない場合もあります。
rel="noreferrer"が必要ない、または使用したくない場面
rel="noreferrer"を必要としない、または使用したくないケースには、以下のようなものがあります。
リンク先にリファラー情報が必要な場合：SEOやアクセス解析において、リンク元情報が重要な場合があります。例えば、アフィリエイトリンクやアクセス解析をしている外部パートナーと情報を共有する必要がある場合です。
信頼できるサイト同士のリンク：リンク先のサイトが信頼できるサイトであれば、セキュリティ上のリスクが少なくrel="noreferrer"を使うメリットはあまりありません。
ユーザーエクスペリエンスを優先する場合：リファラー情報を基にリンク先ページの内容をカスタマイズしたい場合にもrel="noreferrer"が邪魔になることがあります。
WordPressでrel="noreferrer"を削除する方法
JavaScriptでの対応
JavaScriptで下記コードを実行します。
あわせて読みたい
WordPressでJavaScriptを読み込む方法3選
WordPressでJavaScriptを利用することで、動的なコンテンツ表示やインタラクティブな機能を追加することが可能です。本記事では、初心者でも簡単に実践できる3つのJavaS...
// ページ上のすべてのリンクを対象に処理を実行
document.querySelectorAll('a[target="_blank"]').forEach(link => {
// rel属性が存在する場合に処理
if (link.rel.includes('noreferrer')) {
// 'noreferrer'を削除し、他のrel属性（例えばnoopenerなど）は維持
link.rel = link.rel.replace('noreferrer', '').trim();
// rel属性が空になっている場合は属性自体を削除
if (link.rel === '') {
link.removeAttribute('rel');
}
}
});rel属性の応用技
外部リンクと内部リンクで付加する属性を自動的に決める方法
WordPressではtarget="_blank"を設定したときに、「別タブで開く」などにチェックを入れなくてはなりません。時として忘れてしまったり、または内部リンクなのにチェックを入れてしまうこともあるでしょう。
ここでは、常に「外部リンクにはtarget="_blank" rel="noopener"、内部リンクは何も設定しない方法」を紹介します。
document.addEventListener("DOMContentLoaded", function () {
// 現在のサイトのドメインを取得
const homeUrl = window.location.origin;
// すべてのリンクを取得
const links = document.querySelectorAll("a");
links.forEach(link => {
const href = link.getAttribute("href");
// href属性が存在し、リンクが外部リンクである場合
if (href && !href.startsWith(homeUrl) && !href.startsWith("#") && !href.startsWith("javascript:")) {
// 外部リンクにtarget="_blank"とrel="noopener"を設定
link.setAttribute("target", "_blank");
link.setAttribute("rel", "noopener");
} else if (href && href.startsWith(homeUrl)) {
// 内部リンクでtarget="_blank"やrel属性が設定されている場合、それらを削除
if (link.getAttribute("target") === "_blank") {
link.removeAttribute("target");
}
if (link.getAttribute("rel")) {
link.removeAttribute("rel");
}
}
});
});特定のリンクのみ指定の属性を付加する方法
特定のリンクのみ別の属性を付加することでも可能です。例えば、アフィリエイトリンクにはrel="sponsored"を付加するといったケースです。
下記コードでは例としてドメインが"www.google.co.jp"または"www.yahoo.co.jp"の場合、sponsoredを付加しています。
document.addEventListener("DOMContentLoaded", function () {
// サイトのホスト名を取得
const siteHost = window.location.hostname;
const specificDomains = ["www.google.co.jp", "www.yahoo.co.jp"];
// すべてのリンクを取得
const links = document.querySelectorAll("a");
links.forEach(link => {
const linkHost = link.hostname;
// 内部リンクか外部リンクかを判断
if (linkHost !== siteHost) {
// 外部リンクの場合
// 特定のドメインかどうかを確認
if (specificDomains.includes(linkHost)) {
link.setAttribute("rel", "sponsored noopener");
} else {
link.setAttribute("rel", "noopener");
}
// target属性が_blankでなければ追加
if (!link.hasAttribute("target") || link.getAttribute("target") !== "_blank") {
link.setAttribute("target", "_blank");
}
// rel属性にnoreferrerが含まれている場合、削除
const rel = link.getAttribute("rel");
if (rel && rel.includes("noreferrer")) {
link.setAttribute("rel", rel.replace("noreferrer", "").trim());
}
} else {
// 内部リンクの場合
// target="_blank"やrel属性がある場合は削除
if (link.getAttribute("target") === "_blank") {
link.removeAttribute("target");
}
if (link.hasAttribute("rel")) {
link.removeAttribute("rel");
}
}
});
});
まとめ
WordPressでrel="noreferrer"を削除する方法や応用技を活用することで、リンク設定を柔軟にコントロールできるようになります。セキュリティやSEOを考慮しながら、自分のサイトに適したリンク属性を設定することが重要です。JavaScriptを活用して、リンク属性を効率的に管理していきましょう。