"Noreferrer noopener" HTML Link Attributes: meanings and usages

"Noreferrer noopener" are among the many HTML attributes that can be added to HTML links. Though both the "noreferrer noopener" attributes are often added to outgoing links, how individual chooses to use them is mostly based on individual's understanding of the functions of both attributes.

noreferrer noopener HTML link attributes

In this tutorial, I intend to cover the meanings of both HTML link attributes, how and when they should be used and their effect on SEO.

Introduction to HTML Links

HTML link is one of the commonest HTML tags you come across in web pages as such, it is one of the core content that can help determine how important or rich a web page is.

In some other accounts, which we are going to cover in greater detail in another tutorial, HTML link is also used by search engines in determining the value of one web page as against another.

And because it helps web users navigate from one web page to another, linking page "A" to page "B", it carries lots of info with it.

In its simple and plain form, a HTML link looks something like this:

<a href="url">your HTML link text</a>

In the example above, the href is the most important and commonest attribute of an HTML link. After the href attribute and before the > left of the "your HTML link text", there is a handful of HTML link attributes that can be fitted in there and among them are the rel='noreferrer' and rel='noopener' attributes.

When either of or both of the rel='noreferrer' and rel='noopener' appears in an HTML links, it becomes something similar to this:

<a href="url" rel="noopener">your HTML link text</a>

<a href="url" rel="noopener noreferrer">your HTML link text</a>

Now that you are familiar with HTML links, let us proceed to discussing what rel="noreferrer" attribute is, how it should be used and its possible impacts on SEO.

To proceed, let us start with the definition.

What is rel="noreferrer" HTML link attribute?

The rel="noreferrer" is the HTML link attribute that prevents passing the referrer information of a particular web page to the target website by removing the referral info from the HTTP header.

In other words, if you have a need to link to a page anonymously, thus; without letting Google analytics or the webmasters of the linked site know that you are actually linking to their website from your web page, the rel="noreferrer" HTML link attribute is to be called.

Below here is a usage example of how the rel="noreferrer" attribute is called:

<a href="" rel="noreferrer">HTML link text here</a>

In a more elaborated explanation, let us supposed you link to using the HTML syntax provided below:

<a href="">HTML link text here</a>

Thus, without the rel="noreferrer" attribute, the owner of the domain will know that you are linking to their website from your webpage when they view their site traffic stats using any webmasters tools such as Google Analytics.

But, in the other way around, when you link to using the HTML link syntax provided below:

<a href="" rel="noreferrer">HTML link text here</a>

Thus, with the rel="noreferrer" attribute in there, the traffic that goes to the website would be recorded and seen as direct traffic by the owners.

Possible Impacts of rel="noreferrer" HTML Link Attribute on SEO

To be honest, the rel="noreferrer" attribute has no direct impact on SEO of your website, blog or a particular web page, hence, if you have a valid reason to use it, you can do so having no need to worry at all.

However, to be honest again, using the rel="noreferrer" attribute does have an indirect impacts on the SEO of your website and in your promotion efforts.

You wonder how? Below here are reasons:

You Get Slow Recognitions:

Because webmasters check their Google Analytics data on daily basis especially; the "Referral sites" section, one of the best ways to gain and attract the attention of other notable webmasters in your niche is to linking to their websites.

Doing so allows you a better chance of having a pool of valuable backlinks because when they see traffic from your website, they will most likely check it out and share the page in social media, follow the author or even decide to return the favor by linking back.

This is good for SEO and in fact, it is something that Google recommends as a valid way to get links from other websites.

It Adversely Affect your Link-building Effort

Quality Backlinks is what you mostly get when you link to a related page within your content and this is especially good for SEO because quality Backlinks is one of the ranking factors of most search engines, Google included.

But in the case that you use the rel='noreferrer' attribute in HTML links often, you would deny your blog of these quality Backlinks often.

So, when you do not have the "rel=noreferrer" attribute in your HTML links, nothing from the above will happen because traffic from your website will show as ‘Referral’ in Google analytics and so the other webmasters will know that you have linked to them and then, return the favour.

Does rel="noreferrer" HTML Link Attribute Affects Affiliate Links?

Not really. With many affiliate programs, rel="noreferrer" attribute has no impact on their affiliate data and stats calculations.

Rather, what most of them rely on is the affiliate ID attached to each registered user's affiliate link.

As you can see from the example below:

<a href="//" rel="noreferrer noopener" target="_blank">My SemRUSH Affiliate ID</a>

From the example above, the digits printed in red is my SemRUSH affiliate ID which is being used in calculating my referrers and conversions.

Similarly, most other affiliate sites that utilizes similar technology do not recon with the rel="noreferrer" tags. However, I would recommend that you check with your affiliate sites terms of use regularly to avoid loss of profit due to negligence in this regard.

What is the Relationship Between rel="noffolw" and rel="noreferrer" Attributes of HTML Link

The rel="nofollow" HTML attribute instructs search engines not to follow a group of links or a particular link in whose the nofollow attribute is set. While the rel="noreferrer" attribute simply prevents the referrer details from being passed to the new tab or window that opens when the link in whose the rel="noreferrer" attribute is set.

The key difference between these two HTML link attribute is that; noreferrer does not pass any referral information to the browser but the link is followed. Meanwhile, with nofollow, referral information is passed to the browser but the link is not followed.

Another similar HTML link attribute that is often used along these overlisted is the rel="noopener" attribute.

What is rel="noopener" HTML Link Attribute?

The rel=”noopener” attribute of an HTML link is the attribute that prevents the opening page from gaining any kind of access to the original page and it is usually added to the external links present in a web page.

How rel="noopener" Attribute is Used in an HTML Link

Similar to other HTML link attributes earlier discussed on this page, the rel="noopener" attribute can also be fitted in similar way.

See from the example below:

<a href="" rel="noopener">HTML link text here</a>

Possible Impacts of the rel="noopener" HTML Link Attribute on SEO

By practice, using rel="noopener" attribute in your HTML links has zero impact on your SEO. It is only used to enhance and improve the security of your website.

Key Points to Note:

  1. Use rel="noreferrer" attribute in HTML links that you do not want the owner or webmasters know that you are linking to their website or blog.
  2. Use rel="nofollow" attribute in HTML links that you do not trust.
  3. Use rel="noopener" on all outgoing HTML links on your website. This further strenghteens the sucurity of your site.
  4. Use both rel="noreferrer" and rel="nofollow" ONLY on outgoing links.



to top