Noopener, Noreferrer, and Nofollow Values Explained

If you are involved in web development or search engine optimization (SEO), chances are that you’ve stumbled about noopener, noreferrer, and nofollow terms. What is noopener noreferrer? What about nofollow? In this post, I will explain all of them and their implications on SEO and web security.

Introduction

All three terms (noopener, noreferrer, and nofollow) are values of the rel attribute of the anchor tag in HTML. Arguably, nofollow is the most well-known among web developers and SEO experts.

Anchor <a> tag is commonly used in HTML to define a URL/link. For example, consider the following line of code.

<a href="https://www.goranstimac.com">
   Click here to visit the GoranStimac.com website.
<a>

You can see that there is a href attribute (href coming from the Hypertext REFerence) that is used and that the value of that attribute is the web address of GoranStimac.com homepage. What follows is the text that is displayed to you as a user. Depending on your CSS and browser, this text might be underlined, colored differently, or both.

Anchor tag can have many different attributes – one of them being rel (rel coming from RELationship). The key topic of this blog post is about noopener, noreferrer, and nofollow – all three of them being the values of rel attribute.

Again, consider the following line of code.

<a href="https://www.goranstimac.com" rel="noopener noreferrer nofollow" target="_blank">
   Click here to visit the GoranStimac.com website.
</a>

You can quickly notice three values of the rel attribute. But now you can also see the target attribute with the _blank value. This part of the code instructs the web browser to open this link in a new tab.

And this is the main reason why values like noopener and noreferrer are used. It is also the root cause of potential security and phishing challenges.

Let’s discuss them in greater detail and their importance to SEO and security and when you should add rel, add nofollow and what is the significance of adding rel noopener.

What Is Noopener?

When you are using target=" _blank" value, something interesting happens. The page you are linking to gets the partial access to the linking page. It does so through the window.opener object.

Then, the linking page can use window.opener.location to open the malicious website.

This can be exploited for phishing attacks. Consider the following scenario.

You create a malicious website and put viral content on it. You then share this website on social media or other sources that open external links using the target="_blank". Facebook is the prime example here.

Unsuspecting user clicks on the link, and your webpage is opened in a new tab. At that moment, your malicious website now has control of the previous (“Facebook”) tab. Using the window.opener.location it navigates to the new site – say, a login form emulating the Facebook login screen with a message: “Your previous Facebook session expired. Please log in again to continue using Facebook”.

Now, the user is tricked into entering his login information and falls victim to the phishing attack.

This is just a hypothetical case since Facebook is using the rel="noopener" on its target=" _blank" links. But you get the point.

More details

Using the noopener effectively tells the browser to open a link in a new tab without providing the context access to the webpage that opened the link. This is achieved by not setting the window.opener property thus returning a null value.

Instructs the browser to open the link without granting the new browsing context access to the document that opened it — by not setting the window.opener on the opened window (it returns null).

As such, rel= "noopener" attribute and value doesn’t affect search engine optimization (SEO) in any way. It is SEO-agnostic. But it should be used in cases when you are dealing with links with target blank.

What Is Noreferrer?

Similar in its function to noopener, noreferrer also prevents the newly opened site from manipulating the window.opener object. But, additionally, noreferrer prevents browser, when you navigate to another page, to send the referring webpage’s address.

Simply put, the noreferrer value will hide referrer information when the link is clicked. For example, if someone posts your link on their webpage and use the noreferrer, and then users click on that link, you will not be able to tell where did those users come from. In your analytics software (say, Google Analytics), this will appear as direct traffic, not as a referral.

Again, noreferrer also has no effect on SEO, but it can skew the numbers in your analytics and tracking software by reporting more direct traffic.

There are also some considerations regarding affiliate marketing and noreferrer, but those are out of the scope of this article. In general, affiliate links and affiliate programs now use approaches and techniques that are not dependant on noreferrer value.

So, when should you use noreferrer and when noopener? I suggest you consider using both. The majority of modern browser support noopener, but in some cases, if noopener is not supported, you can use noreferrer.

This means that, in practical terms, it makes sense to use both of them to support older browsers as well. But the best approach would be to avoid using the target="_blank" altogether. Unless you have an excellent reason to use it.

Check out some of the good and bad reasons for using the _blank value.

What Is Nofollow?

In search engine optimization, it is crucial to get many valuable and quality links linking to your page. Those are called backlinks. But not all links are created equal.

In general, when one page is linking to yours – it is passing its link juice – meaning – it gives more credibility to your site and signals to search engines that they value your website. In essence, you can consider that as an endorsement. If a high authority webpage links to you – it is endorsing you, and Google/Bing will find that as a ranking factor. Google uses the term PageRank as a measure of quantity and quality of links.

However, sometimes you don’t want to pass the link juice. This can be the case when linking your pages internally – for example – you might not want to pass your link juice from more valuable pages to those that are not as important.

Enter rel="nofollow". Just like its cousins noopener noreferrer, nofollow is a value of rel attribute. When you add this value, it will signal to search engines that you don’t want to pass your link juice/PageRank to the page you are linking to.

<a href="https://www.goranstimac.com" rel="noopener noreferrer nofollow" target="_blank">
   Click here to visit the GoranStimac.com website.
</a>

In the above line of code, we put all three values – by adding the nofollow value, we are signaling to Google that the PageRank/link juice is not passed onto goranstimac.com website.

When should you use nofollow?

The general rule is to use nofollow on links in comments or on forums. User-generated content can be a source of spam and low-quality links. You don’t want your blog or a forum website to pass its value to those low-quality pages.

Also, Google and other search engines require you to use nofollow on all sponsored links and advertisements. Same holds true for links in press releases and different kinds of paid links.

A Bit About the Terminology – Noopener Noreferrer Nofollow

Sometimes you will notice that people are mentioning noopener tag or noreferrer tag. In other cases, you can spot the rel noreferrer attribute. While these are understandable by most web developers, it is worth noting the following.

• noopener, noreferrer, and nofollow are not tags or attributes. They are attribute values.
• rel is not a tag. It is an attribute of the anchor tag.
• <a> is a HTML tag. As such it has attributes (i.e., rel), and those attributes have values (noopener noreferrer nofollow)

Conclusion

There are three fundamental values of the rel attribute of the anchor tag. They are noreferrer, noopener, and nofollow.

• rel="noopener" you use on all links opening in new tabs using the target _blank. There are security implications if you don’t use the noopener value on your links opening in new tabs. A malicious attacker can use the window.opener object to change the content and location of the originating page.
• rel="noreferrer" can serve a similar purpose as the noopener, especially in the older browsers. Hence, it makes sense to use them both. Additionally, noreferrer can affect your analytics and report traffic as direct instead of referral.
• rel="nofollow" will inform search engines not to pass the link juice to the linked page, and it will not pass PageRank. You can consider it as a value which is used when you want to link to some another page but without “endorsing” it. It is the only rel value on this list with a tangible effect on SEO efforts.