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

Difference noopener noreferrer

If you are a SEO Professional or a Web developer, the chances are that you have already 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

1. rel=” noopener”,

2. rel=” noreferrer”, and

3. rel=” nofollow”.

 

You will also find some tips for integrating them into your code and enhancing your website’s usability. So let’s discuss these three terms and their use in SEO. And more importantly, which one should you use?

 

Before we delve into attributes’ details, let us learn more about using the target attribute from a links reference perspective.

 

 

“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. So what exactly is the target attribute, and why do we need 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

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

 

In today’s world, digital marketing and online security go hand in hand, and no website or company can truly become successful, if it is not deemed secure by its users. Moreover,  your website’s code and the backlink strategy can significantly impact your SEO and website’s authority. 

 

So, the values of 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. Lets find out how.

 

First off, any developer or SEO expert must be aware 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.

 

<a href=”https://website.com” target=”_blank” rel=”noreferrer noopener”> Link to external </a>

 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”?

 

Lets first understand why do we need this attribute and what purpose does it solve. 

 

The issue is that certain Javascript code can be allowed to create a new tab, to get control of the referring window from where the link has been initiated. So, if your website links to an external site (which is impacted by malicious code), then the external website can use the window.opener javascript property to change the referrer page (i.e your website) to be infected with the malicious code. This has serious implications from a security perspective. 

 

To counter this, the HTML attribute rel=”noopener” and rel=”noreferrer” has now been added to the link tag. These attributes helps us addresses a serious vulnerability as mentioned above 

 

So how does rel=”noopener” work ? 

 

Well, the rel=”noopener” attribute (by default) opens the link in a new tab. When it does that, it has the details of the referrer, however the attribute tops the new tab from executing the window.opener property to run the malicious code from the infected site in this tab. It is now forced to parse the content from the link from the external site and is limited within the tab, with no impact back to the referring site. This helps in safeguarding the referring site.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.

 

This can also prevent the user from tabnabbing, a practice where a user clicks on an external link and while the other tab is inactive, it opens a fake/phishing website impersonating the original link site. So, it is best to use them when appropriate and only alongside external links. If you do not use them, your links could get hacked.

 

So to summarise, 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. However, when used appropriately, rel=”noopener” can help improve your website’s ranking.

 

 

What Is rel=”noreferrer”?

 

First of all, lets understand what a referrer is. It is a header attribute passed from the source to the target website. So if your website has a link pointing to an external website, the header request to the external site will contain the referrer attribute with your website URL as a value. So the target website does know the traffic has come to their website from your website. 

 

We use a noreferrer tag on a link to prevent header from passing this referrer information from one website to another. This tag instructs the browser to remove the referrer information from the HTTP header. 


How does rel= “noreferrer” work and should you use it ?

 

“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