What Is rel=”noopener noreferrer” Attributes Means? How it Affect SEO

Outgoing links are an integral part of any website. But did you know that two simple attributes—rel=”noreferrer” and rel=”noopener”—can significantly impact how those links function?

In this comprehensive guide, we’ll cover everything you need to know about these powerful attributes, including:

• Definitions of rel=”noreferrer” and rel=”noopener”
• When to use each attribute
• How they impact SEO
• Best practices for WordPress and affiliate links
• Key differences from rel=”nofollow”

Let’s dive in!

What is rel=”noreferrer” and When Should You Use It?

The rel=”noreferrer” attribute prevents the browser from passing referral information to the target page.

For example, let’s say your site links to example.com. Normally, example.com would see that click as a referral in their Google Analytics reports. But with noreferrer, that referral data is removed.

Instead, analytics will label that visit as direct traffic.

Here is the HTML code with the noreferrer attribute:

<a href="https://www.example.com" rel="noreferrer">Link to Example.com</a>

Use noreferrer when you want to keep sites you link to from knowing the traffic came from your page. But in most cases, passing referrals is harmless and even beneficial for digital marketing purposes.

We’ll explore the SEO impact of this later.

First, let’s look at the sister attribute rel=”noopener” and how it differs.

What is rel=”noopener” and When Should You Use It?

The rel=”noopener” attribute serves a different purpose than noreferrer. This attribute prevents the target page from being able to access your page that links to it.

This enhances security by isolating the linked page into its own browsing context. That way, even if the target page is compromised, it can’t impact your original page.

Here is an example noopener link:

<a href="https://www.example.com" rel="noopener">Link to Example.com</a>

Any external link that opens in a new tab should have this attribute applied for security purposes. Modern browsers handle this automatically, but adding noopener manually provides consistency across devices.

Now that we’ve defined both attributes, let’s explore the implications around SEO and marketing.

How rel=”noreferrer” and rel=”noopener” Impact SEO

Using noreferrer and noopener will not directly harm your SEO. Google and other search engines still follow and index links with those attributes.

However, noreferrer does remove referral data that could provide indirect SEO value.

Here are two scenarios to illustrate:

Scenario 1:

• Your site links to another website without noreferrer
• That site owner sees your referral traffic in Google Analytics
• They share and link back to your content, improving your domain authority

Scenario 2:

• Your site links with noreferrer
• The site owner doesn’t know you linked to them
• No opportunity for them to share or link back to you

As you can see, removing referral data eliminates a serendipitous link building opportunity. For that reason, only use noreferrer when necessary.

Now let’s look at best practices for WordPress and affiliate links.

Best Practices: WordPress, Affiliates, and Noreferrer

If your site runs on WordPress, there’s an extra consideration around noreferrer.

By default, WordPress adds both rel=”noopener” and rel=”noreferrer” to all external links that open in a new tab.

For example:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Example Link</a>

WordPress does this to improve security vulnerabilities from tab napping phishing attacks. But it also strips referral data without most users realizing.

Here are two ways to handle this:

1. Remove the target=”_blank” attribute

By opening links in the same tab, WordPress will no longer add noopener or noreferrer. However, this provides a less user-friendly experience.

2. Install a plugin to selectively handle noreferrer

There are plugins that allow you to remove noreferrer on a link-by-link basis. This maintains security while preserving referral data when desired.

Here are some recommended plugins to try

As for affiliate links, noreferrer has no impact. Affiliate programs track conversions through the ID in the link, not referral data. For example:

<a href="//affiliate-link.com/123456" target="_blank" rel="noreferrer noopener">

The ID is preserved with or without noreferrer.

Now that we’ve covered WordPress and affiliates, let’s clarify a common point of confusion around nofollow vs noreferrer attributes.

The Key Difference Between nofollow and noreferrer

nofollow and noreferrer sound similar, but have very different effects:

• nofollow – Tells search engines not to pass SEO value from that link
• noreferrer – Allows SEO value to pass, but removes referral header data

This table summarizes the key differences:

Use nofollow on untrusted links to isolate SEO impact.

Use noreferrer if you want to hide analytics referral data.

But otherwise, standard links without attributes are best for both SEO value and referral data.

Key Takeaways

To wrap up this comprehensive guide, here are the key learnings:

• Noreferrer – Strips referral header data so clicks show as direct site traffic instead of referrals
• Noopener – Disconnects browsing contexts for security purposes
• Neither directly harms SEO, but noreferrer removes a potential source of reciprocal links
• By default, WordPress adds both attributes to external links opening new tabs
• Selectively remove noreferrer in WordPress to preserve referral data
• Affiliate links function the same regardless of noreferrer
• Nofollow is different than noreferrer, as it blocks SEO link value

Understanding these nuances empowers you to better manage your outgoing links. Implementing best practices protects both security and marketing potential.

I hope this guide gave you confidence for navigating link attributes on your site. Let me know in the comments if you have any other questions!