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

Laptop with Code

 

 

If you are an SEO expert or 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 – is secure and SEO-friendly. 

 

Especially if you have decided to modify the link’s natural behaviour and open it on a new tab, you could be exposing yourself and your users to significant risks. 

 

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 in your code and enhancing your website’s usability.

 

 

 

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 have decided to use the “target=_blank” attribute and value instead of “target:_self”, you are forcing 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?

 

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 is what a malicious website might leverage for phishing attacks. Since the window.opener property is not set, the action returns a null value.

 

What Is rel=noreferrer?

 

“noreferrer” is a value similar to “noopener.” Just like the value seen above, “noreferrer” makes sure 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 you navigate to a different page. By doing so, this value hides the referrer information at the moment in which the link is clicked. 

 

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. 

 

Both noreferrer and noopener should be used at all times if you have integrated the “target=_blank” attribute and value in your code. By using both of these values, you can be sure that the browser supports at least one – independently from the browser used.

 

What Is rel=nofollow?

 

Nofollow is not so much a security feature but aims at improving your SEO score and rank on search engines. Indeed, today, an appropriate backlink strategy is an essential part of any SEO plan. And, to build a strong backlink base, you will need other high-authority websites to link back to your website. 

 

 

This approach has two main benefits: the search engine recognizes your website as a valuable one (high-authority), and other users can find your site by finding these links on external web pages (traffic increase).

 

 

While numbers do make a difference, and you should aim to have your site’s link on as many quality websites as possible, not all backlinks are the same. So, having your links on spam pages, discussion forums, or low-authority pages might not benefit you. 

 

 

Additionally, you might not want to endorse other people’s links or pass your link juice (the page’s value transferred through a link). In this case, using a “nofollow” value will tell the browser that you don’t want to pass this link juice through the link. 

 

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 situations 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!

 

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 optimization strategy:

  • “Noopener” is an SEO-agnostic function, which means that it 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. 

 

Bottom Line

 

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.

 

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

Share This Post

Share on facebook
Share on linkedin
Share on twitter
Share on email
Shares

Let's have a chat

Learn how we helped many brands gain success.