The Difference Between rel=” noopener noreferrer” and rel=” nofollow”

Difference noopener noreferrer

 

If you are an SEO professional or web developer, the chances are that you have heard the terms rel=” noopener noreferrer” and rel=” nofollow” along the way. When correctly used, these values ensure that your code – and website – are secure and SEO-friendly.  

 

Below, you will find out more about the Difference between rel=” noopener”, rel=” noreferrer”, and rel=” nofollow”, as well as some tips for integrating them into your code and enhancing your website’s usability.

 

Let’s discuss these three terms and their use in SEO. And more importantly, which one should you use? Read on to learn more!!!

 

 

 

What Are rel=” noopener noreferrer” and rel=”nofollow”?

 

In today’s world, marketing and security go hand in hand, and no website or company can truly become successful if it is not deemed secure by its users. Simultaneously, the way you write your website’s code and decide on a precise backlink strategy can significantly impact your SEO and website’s authority. 

 

So, rel=” noopener noreferrer” and rel=” nofollow” are examples of how you can ensure that your links and backlinks are secure and work towards improving your website’s ranking. 

 

First off, any developer or SEO expert must understand that” noopener noreferrer” and” nofollow” are not attributes but values of the attribute “rel.” “Rel” stands for “relationship,” and it is an attribute of the anchor text. 

 

These values are necessary when you use the value “_blank” for the attribute “target”, forcing the links on a page to open in a new window. When this happens, you are actively modifying the natural behaviour of a link, and specific security issues might arise.

 

“target=” _blank”: an Overview

 

When using an anchor <a> tag for a link, you have the target attribute to decide how the link will behave when users click on it. 


According to w3schools, following are the options we have with the target attribute :


Value Description
_blank
Opens the linked document in a new window or tab
_self
Opens the linked document in the same frame as it was clicked (this is default)
_parent
Opens the linked document in the parent frame
_top
Opens the linked document in the full body of the window

 

If you use the “target=_blank” attribute instead of “target:_self”, you force the link in question to open on another tab or window.

 

While there are some technical reasons for this choice, it is worth considering whether the benefits it brings effectively outweigh its risks. Indeed, if the link opened carries a malicious website, this can navigate the tabs or pages and lead to phishing attacks.

 

So, it is recommendable not to modify the link’s natural behaviour and allow it to open on the same tab. However, if, for a specific reason, you don’t want this to happen, you can use the “rel” attribute’s values” noopener”, “noreferrer”, and” nofollow” to ensure that that link is safe while opening on another tab or window.

 

Let’s explore the functions of these values and dive into the many ways to use them correctly.

 

What Is rel=noopener?

 

The rel=noopener attribute opens links in a new tab. This tag works for links that interlink with other web pages. Without this attribute, the browser will not know which page it links to. Adding this attribute will help improve the performance of the first page. This tag will also improve your website’s SEO ranking factors. This HTML attribute specifies the relationship between the current document and the linked page. Read on for more information.


The noopener tag can prevent malicious links from opening in a new tab. It can also prevent the user from tabnabbing, a practice where a user clicks on an external link and opens another website. Therefore, noopener tags are beneficial. However, it is best to use them when appropriate and only alongside external links. If you do not use them, your links could get hacked.


“rel=noopener” is an HTML attribute that prevents the opening page from accessing the page that it originated from. It is a helpful tool for website security and is useful when a link is selected to open in a new tab. It does not have a significant impact on SEO. It can even increase the security of your website. However, when used appropriately, rel=noopener can help improve your website’s ranking.


Suppose you have added the value “noopener” to the anchor text’s attributes. In that case, you are effectively instructing the browser chosen to open the link in a new tab – without allowing context access to the page that opened the link.

 

The value does so by not providing the window.opener property, which a malicious website leverages for phishing attacks. Since the window.opener property has no value; the action returns a null value.

 

What Is rel=noreferrer?

 

We use a noreferrer tag on a link to prevent Google from passing the referrer information from one website to another. This tag instructs the browser to remove the referrer information from the HTTP header. This tag helps hide links that do not need highlighting. But the question is: should you use rel=noreferrer?


“noreferrer” is a value similar to “noopener.” Like the value seen above, “noreferrer” ensures that the newly opened website does not have access to the window.opener object, which prevents it from manipulating it. 


“Noreferrer” also has another function. It tells the browser not to send the referring web page’s address when navigating to a different page. By doing so, this value hides the referrer information at the moment in which the user clicks the link. 

 

For example, someone might want to incorporate your page’s link in their websites and use the noreferrer value. If users start clicking on that link and end up on your page, you will see the traffic generated in your analytics software. However, you will not be able to know where those users originated. 

 

You should use Noreferrer and noopener consistently if you have integrated your code’s “target=_blank” attribute and value. By using both of these values, you can be sure that the browser supports at least one – independently from the browser used.


Besides preventing Google’s analytics from using a referring URL, this tag also blocks the newly opened page from controlling traffic. Referrer header information is passed to a new website when a visitor opens a new page. Without a noreferrer tag, you will not give this information to your target site. Therefore, it is essential for security reasons and for improving SEO rankings.


If you don’t trust a site’s content, the experts recommend nofollow and noreferrer links. It prevents the new page from accessing the original page. On WordPress, it automatically adds the rel= “noopener” attribute to new tab links. In non-WordPress sites, you must add it manually. Then, you can create a custom link that allows your visitors to visit other websites.

 

What Is rel=nofollow?

 

A rel=nofollow tag indicates that a hyperlink is not important and therefore won’t pass on link juice to the referring page. It is beneficial for SEO, as it prevents a link from passing link juice from high-ranking pages to less-important pages. You can use this code in many ways to improve your SEO and enhance the page rank of your website. Let’s look at three common uses of the nofollow tag.

 

First, rel=nofollow is a microformat element that tells Google not to give the destination link extra weight or ranking. In the case of blogs, third-party commenters or authors who do not endorse the links use them. They use them as VotLinks, which are semantic links. 

 

Secondly, it can help you improve the quality of your content by reducing the number of outbound links.

 

Thirdly, it can help you mask fake news sites on high-ranking domains. Without rel=nofollows, Google would have no way of figuring out which phoney news articles are trending globally. In addition, it would be challenging to detect link schemes involving high-ranking websites. Because of these, Google recently declared rel=nofollows as “strong hints.”


 

Which Values Should You Use?

 

Generally, you will want to use both “noopener” and “noreferrer” every time you use a “target=_blank” value and attribute. This strategy is to ensure that the user opening the link is safe. However, if you can avoid using the “target:_blank” value and attribute altogether, this can also be beneficial. 

 

“Nofollow” should be used to enhance your PageRank and balance your link juice – which, in turn, improves your website’s SEO. An example of a situation when you might decide to use “nofollow” is when you are linking to your website’s pages internally. You would not want to pass link juice from your high-scoring pages to less important ones!


Setting noopener or noreferrer can improve the security of your website by preventing unauthorised third-party websites from viewing your content. While noreferrer helps prevent malicious websites from accessing your page, noopener prevents WordPress from automatically adding attributes to the link so that you can use noopener for security purposes. It’s also good practice to use both of these for SEO purposes.

 

Rel=”noopener” is an HTML attribute used for external links. It prevents the opening page from accessing the page it originated from. This attribute has several purposes, including improving website security and protecting audience confidentiality. The default value is _self, but there are other options too. While this is the default value, some web applications use rel= noopener and noreferrer differently.

 

How Do These Values Impact SEO?

 

As we have seen, each of the “rel” values’ values has different functions that you should keep in mind when writing the code. However, they might also have a critical impact on your SEO, which makes using them correctly paramount. 

 

Here is a little more about the influence they might have on your search engine optimisation strategy:

  • “Noopener” is an SEO-agnostic function that will not influence your SEO. It does, however, improve a site’s security level. 
  • “Noreferrer” won’t affect your SEO. However, since you can’t see where your website’s traffic comes from, it can alter the numbers you see in your analytics software report. There are exceptions regarding affiliate links, referral programs, and some other marketing strategies.
  • “Nofollow” does affect your SEO by improving your backlink strategy – if used correctly. Indeed, it can help you transfer and balance each of your link’s juice adequately, without wasting it on low-authority pages or websites. 

 

Final Thought


Noopener, noreferrer, and nofollow are all values of the attribute “rel” of the anchor text. You want to implement essential functions in your code if you have used the “target:_blank” value and attribute to modify the natural behaviour of a link and tell the browser to open such a link on a new tab. 

 

These values allow you to prevent phishing attacks, and, in the case of nofollow, they can assist you in enhancing your SEO strategy through high-quality backlinks. If visibility and security are your top priorities for your company and website, adding these values to your code might be necessary.


The final distinction between the two SEO attributes is whether you should use “nofollow” with internal links or external ones. The former tells search engines that hyperlinks should not pass link juice from one site to another. The latter passes link juice from one page to another and helps for marketing purposes. Regardless of which one you choose, it is essential to understand how these two tags impact your website’s SEO.


In addition to sponsored links and user-generated content, you should also mark all comments and user-generated content (UGC). This way, Google recognises that the source of a conversion does not exist. 


Additionally, it would be best if you did not use rel= nofollow for guest articles or user-generated content (UGC).


The nofollow attribute is the most widely used by marketers and search engines but is often misused. Although nofollow is a better option for affiliate links, the coding change is not as significant as many think. In addition to its SEO benefits, “Nofollow” is an excellent choice for securing your website. 


The noreferrer tag is the easiest one to use in WordPress. Unlike nofollow, noopener will not affect your search engine rankings but can jeopardise your analytics and tracking numbers. It is beneficial for affiliate marketing programs since it doesn’t pass value across the links. Nofollow is most commonly used to prevent link juice from passing through administrative pages, advertiser URLs, and paid links.


If you are looking for Professional SEO services for your business or website, please contact us today.

Share This Post

Let's have a chat

Learn how we helped many brands gain success.

Let'S Get yOUR SITE AUDIT