• By Super Admin
• 24 Dec, 2024
• Digital Marketing

Noopener and Noreferrer tags in WordPress: How does it affect my SEO

If you’ve recently come across the terms rel="noopener noreferrer" while managing your WordPress site, you’re not alone. These tags started appearing in WordPress (since version 4.7.4) on links set to open in new tabs (target="_blank").

Understanding Noopener and Noreferrer Tags in WordPress: How They Impact SEO and Security

If you’ve recently come across the terms rel="noopener noreferrer" while managing your WordPress site, you’re not alone. These tags started appearing in WordPress (since version 4.7.4) on links set to open in new tabs (target="_blank"). While it raised concerns in the SEO community initially, these tags have an important role in improving security without negatively impacting SEO.

Let’s break down what these tags are, how they work, and what they mean for your website.

What Are Noopener and Noreferrer Tags?

rel="noopener"

The rel="noopener" tag disowns the connection between the originating page and the new tab. Specifically, it nullifies the window.opener property when a link is opened in a new tab. This means the new tab does not retain any reference to the page that opened it, enhancing security.

rel="noreferrer"

The rel="noreferrer" tag is part of the HTML5 specification. It prevents the browser from sending referral data (such as the source URL) when a user clicks on a link. Essentially, it hides the source of traffic, ensuring no HTTP referrer header is sent to the destination website.

Do Noopener and Noreferrer Tags Affect SEO?

The short answer: No.

According to the Moz community, these tags primarily address security concerns and do not interfere with the flow of “link juice” or PageRank. Unlike rel="nofollow", which explicitly stops link equity from passing between pages, noopener and noreferrer are unrelated to SEO rankings.

WordPress even updated their implementation to only use rel="noopener" to avoid disruptions for analytics tools that rely on referral data.

Why Were These Tags Introduced?

Preventing Reverse Tabnabbing

One of the primary reasons WordPress introduced these tags was to mitigate a security vulnerability known as “Reverse Tabnabbing.” This phishing technique allows attackers to exploit the window.opener property to redirect users to malicious sites without their knowledge.

Here’s how it works:

• When a link opens in a new tab, the attacker uses window.opener to replace the original tab with a malicious URL.
• The user, believing they’re still on a trusted site, may unknowingly interact with the malicious content.

By using rel="noopener", this attack vector is eliminated, ensuring a safer browsing experience for users.

Practical Examples

To understand the functionality of these tags, we ran a real-world test using two links:

Without rel="noreferrer"

Referring from our Dummy Page

Log Entry:

142.68.XXX.XXX - - [18/May/2017:14:25:01 -0400] "GET / HTTP/1.1" 200 2932 "https://www.example.com/?p=2432&preview=true" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome58.0.3029 Safari/537.36"

With rel="noreferrer"

No Referrer Page

Log Entry:

::1 - - [18/May/2017:14:26:17 -0400] "OPTIONS * HTTP/1.0" 200 125 "-" "Apache/2.4.20 (Ubuntu) PHP/5.5.22-1ubuntu16.04 OpenSSL/1.0.1f (connection created locally)"

The second log entry strips the referring domain, IP address, and browser details, demonstrating how noreferrer works.