What is rel=”noreferrer noopener” & How it Affects SEO

What is rel=noreferrer noopener & How it Affects SEO

Discover the functions of 'rel=noopener' and 'rel=noreferrer', when to use them, and how they affect SEO.

If you work in web development or search engine optimization (SEO), you've probably come across the terms noopener, noreferrer, and nofollow. I've noticed a lot of confusion about this tag in forums and discussion groups and wanted to address it. "noreferrer noopener" are the HTML attributes that can be added to external links. What purpose do these tags serve and how do they affect your SEO efforts?

I will explain the difference between the noreferrer and noopener tags, how they differ from the nofollow tag, and how each one affects SEO when used.

  • What is the meaning of rel="noreferrer"?
  • When is it appropriate to use rel="noreferrer"?
  • SEO and rel="noreferrer"
  • Affiliate Links and Noreferrer
  • WordPress and Noreferrer
  • What is the nofollow attribute?
  • What Is the Distinction Between Nofollow and Noreferrer?
  • What is the meaning of rel="noopener"?
  • SEO and rel="noopener"

Let start with a few definitions.

What is the meaning of rel="noreferrer"?

The rel="noreferrer" attribute is a unique HTML attribute that can be used in conjunction with the link tag (). It prevents the target website from receiving referrer information by removing the referrer information from the HTTP header.

This means that Google Analytics will classify traffic originating from links with the rel="noreferrer" attribute as Direct Traffic rather than Referral Traffic.

This is the appearance of the noreferrer attribute in HTML View:

<a href="https://www.iloveseo.net" rel="noreferrer">Link to Iloveseo.net</a>

To illustrate, consider the following:

Assume you have a link from website A to website B that does not contain the "noreferrer" tag.

When the webmaster of website B views the 'ACQUISITION' report in Google Analytics, he can see traffic under the 'REFERRALS' section coming from Website A.

Referral Traffic

When you use the "noreferrer" tag to link from Website A to Website B, any traffic from Website A to Website B will appear in Google Analytics as DIRECT traffic (and not referral).

Direct Traffic

When is it appropriate to use rel="noreferrer"?

When you don't want other websites to know you're linking to them, use the rel="noreferrer" attribute on outgoing links. I can't think of a legitimate reason for you to do this, but it is the case.

Definitely avoid using the rel="noreferrer" attribute on internal links; this will confuse your Google analytics reports.

SEO and rel="noreferrer"

Including the noreferrer tag in your links does not affect SEO directly. You can use it without concern. However, it has an indirect effect on your link building and promotion efforts for the following reasons:

Linking to other websites is one way to attract their attention. Every webmaster should monitor their Google analytics daily, particularly the 'Referral traffic' section.

When they see traffic from a website, they are more than likely to check it out, share it on social media, follow the author, or even return the favor by linking back.

This is beneficial for SEO, and Google even recommends it as a legitimate method of obtaining links from other websites.

Affiliate and Noreferrer links

Affiliate links are unaffected by Noreferrer. The reason for this is that the majority of affiliate programs do not award conversions based on referral traffic,' but rather on the affiliate ID included in the link. There's nothing to worry about.

WordPress and Noreferrer

Therefore, if you're using WordPress, you should be aware that when you add an external link to your content and specify that it should open in a 'new tab' (target=" blank"), WordPress will automatically add the rel="noopener noreferrer" attribute to the link.

Suggested Reading


Here is an illustration

<a href="https://www.anywebsite.com/" target="_blank" rel="noopener noreferrer">Any Other Website Link</a>

As explained previously, this prevents any information from being passed to the new tab, which means that any traffic directed from your website to the linking website (via clicking the link) will not be recorded in Google Analytics.

How to remove the rel="noreferrer" attribute from links in WordPress

The simplest way to prevent WordPress from adding the attribute automatically to external links is to avoid opening them in a new tab.

More Details:

  • This is the simplest solution, but the disadvantage is that users who click the external link will leave your website, which may increase your bounce rate, decrease your time on site, and so on.
  • However, given that the majority of traffic now comes from mobile devices, you shouldn't be concerned about users exiting your website, as the 'new tab' behavior on mobile makes it difficult for users to return to the previous window.
  • Some plugins prevent WordPress from adding the rel="noreferrer" attribute to outgoing links, but they work ONLY when the TinyMCE editor is used, NOT the new editor (Gutenberg).

My recommendation is to avoid tampering with this; simply avoid opening external links in new tabs.

What is the nofollow attribute?

This tag may be more familiar to you. It essentially instructs Google not to pass any information about the links that contain this tag. The nofollow tag is most frequently used to prevent "link juice" from passing to an administrative page on a site (e.g., a sign-in page for which you do not need to rank) or to an advertiser's URL following Google's paid link policy.

As with noreferrer, the nofollow tag is added at the link level and appears as follows:

<a href="subscribehere.com" rel="nofollow"> Subscribe Here </a>

As might be expected, Google does not follow these links and does not pass PageRank to links that contain this tag.

Apart from paid and administrative links, the nofollow attribute is frequently used to prevent PageRank from being passed along via links in blog comments or guestbook entries. Additionally, you can use nofollow when linking to sites with a questionable reputation or credibility. Learn difference between Nofollow-VS-Dofollow here!

What Is the Distinction Between Nofollow and Noreferrer?

When you add rel="nofollow" to an external link, you are essentially telling search engines not to pass PageRank between pages. In other words, you're instructing them to disregard that link for the sake of SEO.

The distinction between nofollow and noreferrer is that noreferrer does not send any referral data to the browser, whereas nofollow does. Nofollow sends referral data to the browser but does not follow the link.

Thus, they are not synonymous. Nofollow links that you do not trust, and noreferrer links if you do not want the other site to know you linked to them.

What is rel="noopener" ?

The HTML attribute rel="noopener" can be added to external links. It precludes the opening page from gaining access to the original page in any way.

Consider the following example of a link with the rel="noopener" attribute:

<a href="https://www.justassume.com" rel="noopener nofollow">Link to Justassume.com</a>

This is an optional security feature that WordPress adds to all external links that open in a new tab, and it is recommended that you keep it.

If you are not using WordPress, it is recommended that all external links that open in a new tab include the rel="noopener" attribute.

SEO and rel="noopener"

Noopener has no effect on your SEO, which means you can use it safely to increase the security of your website.

Is it necessary to use both Noreferrer and Noopener?

NO. However, it is optional, and you can use either one or both of them now that you understand what they do.

Can I Combine Nofollow Noreferrer Noopener?

YES. If it is appropriate, you may combine them all.

<a href="https://www.justanexample.com" rel="nofollow noopener noreferrer">Text Here</a>

Conclusion:

  • Many people struggle with HTML tags and attributes, but this should not be the case with noreferrer and noopener.
  • None of them will have a detrimental effect on your SEO; therefore, use them without fear.
  • These tags are automatically added to external links that open in a new tab if you are using WordPress.
  • The noopener is required to increase your website's security and prevent other websites from accessing your page (through the browser session).
  • The noreferrer attribute is used to prevent referral data from being passed to the target website, as well as to mask referral traffic in Google analytics.
  • If you want other websites to see your website's traffic as 'Referral traffic,' simply avoid opening external links in new tabs. This will prevent WordPress from adding the attributes to the links automatically, and everything will be fine.
  • Nofollow and noreferrer are not interchangeable terms. When a link contains the rel="nofollow" attribute, it instructs search engines not to use it for SEO purposes. Noreferrer does transfer link juice between websites.

We hope that this article clarifies the nofollow noreferrer noopener rel tags concept. As you can see, while their names are similar, their functions are opposed. These tags are critical for SEO and also aid crawlers in indexing backlinks.