If you are involved in web development or search engine optimisation (SEO), chances are you have come across the terms noopener, noreferrer and nofollow. What is noopener noreferrer? What about nofollow? In this article, we explain all these terms and their implications for SEO and web security.

All about noopener, noreferrer and nofollow

A little HTML reminder

The three terms (noopener, noreferrer and nofollow) are values of the rel attribute of the anchor tag in HTML. The term nofollow is probably the most familiar to web developers and SEO experts.

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

<a href="https://www.agerix.fr">
 Click here to visit the agerix.fr website.
<a>

You can see that an href attribute (href stands for Hypertext REFerence) is used and that the value of this attribute is the web address of the Agerix home page. What follows is the text that is displayed to you as a user, so that you understand that there is a link and ideally you know what content the link points to. Depending on your CSS and browser, this text may be underlined, coloured differently, or both.

The anchor tag can have many different attributes, one of which is rel (rel from RELationship). The main topic of this blog post is noopener, noreferrer and nofollow, which are all values of the rel attribute.

Let's take the following line of code.

<a href="https://www.agerix.fr" 
   rel="noopener noreferrer nofollow" 
   target="_blank">Click here to see the Agerix agency website.
</a>

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

This is the main reason why values like noopener and noreferrer are used. It is also the main cause of potential security and phishing problems.

Let's discuss these values and their importance for SEO and security in more detail, and see when you should add rel, add nofollow and how important it is to add rel noopener.

Qu'est-ce que noopener ?

Lorsque vous utilisez la valeur target=" _blank", quelque chose d'intéressant se produit. La page vers laquelle vous établissez un lien obtient l'accès partiel à la page de liaison. Elle le fait par le biais de l'objet window.opener.

Ensuite, la page de liaison peut utiliser window.opener.location pour ouvrir le site Web malveillant.

Cela peut être exploité pour des attaques de phishing. Considérez le scénario suivant.

Vous créez un site web malveillant et y mettez du contenu viral. Vous partagez ensuite ce site Web sur les médias sociaux ou d'autres sources qui ouvrent des liens externes à l'aide de la balise target="_blank". Facebook en est l'exemple type.

L'utilisateur peu méfiant clique sur le lien, et votre page web s'ouvre dans un nouvel onglet. À ce moment-là, votre site web malveillant a maintenant le contrôle de l'onglet précédent ("Facebook"). En utilisant window.opener.location, il navigue vers le nouveau site - par exemple, un formulaire de connexion émulant l'écran de connexion de Facebook avec un message : "Votre précédente session Facebook a expiré. Veuillez vous reconnecter pour continuer à utiliser Facebook".

L'utilisateur est alors incité à saisir ses informations de connexion et devient victime d'une attaque de phishing.

Il ne s'agit que d'un cas hypothétique puisque Facebook utilise therel="noopener" sur ses liens target=" _blank". Mais vous avez compris.

What is noreferrer ?

Similar to noopener, noreferrer also prevents the newly opened site from manipulating the window.opener object. But, in addition, noreferrer prevents the browser, when you navigate to another page, from sending the address of the referring web page.

In other words, noreferrer hides the information about the referring page when the link is clicked. For example, if someone posts your link on their web page and uses the noreferrer value, and users click on that link, you will not be able to tell where those users came from. In your analytics software (e.g. Google Analytics), this will appear as direct traffic, not as a referral.

Again, the term "noreferrer" 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 these are outside the scope of this article. In general, affiliate links and affiliate programs now use approaches and techniques that do not depend on the value of noreferrer.

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

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

Find out the good and bad reasons to use the _blank value by reading Chris Coyer's article: When to use target=”_blank”

What is nofollow?

When it comes to search engine optimisation, it is essential to get many valuable and quality links to your page. These links are called backlinks. But not all links are created equal.

In general, when a page links back to yours, it gives it link juice, which means it gives your site more credibility and signals to the search engines that they value it. In fact, you can think of it as an endorsement. If a high authority web page links to your site, it is endorsing you, and Google/Bing will take this into account as a ranking factor. Google uses the term PageRank to measure the quantity and quality of links.

However, sometimes you don't want to pass on the link juice. This is the case, for example, when you create internal links to your pages. You do not want to pass on the link juice from the most important pages to the less important pages.

This is where rel="nofollow" comes in. Like its cousins noopener noreferrer, nofollow is a value in the rel attribute. When you add this value, you are signaling to search engines that you do not want to pass on your link juice/rank to the page you are linking to.

<a href="https://www.agerix.fr"
   rel="noopener noreferrer nofollow" 
   target="_blank">Click here to see the Agerix agency website.
</a> 

In the above line of code, we have set all three values. By adding the nofollow value, we signal to Google that the PageRank/link juice is not passed on to agerix.fr

A few words on terminology - noopener noreferrer nofollow

Sometimes you will notice that people mention the noopener or noreferrer tag. In other cases, you may spot the rel noreferrer attribute. While these are understandable to most Web developers, the following points should be noted.

• 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 an HTML tag. As such, it has attributes (i.e., rel), and those attributes have values (noopener noreferrer nofollow).

Conclusion

There are three basic values for the rel attribute of the anchor tag. These are noreferrer, noopener and nofollow.

• rel="noopener" that you use on all links that open in new tabs using the _blank target. There are security implications if you do not use the noopener value on your links that open in new tabs. A malicious attacker can use the window.opener object to change the content and location of the original page.
• rel="noreferrer" can serve a similar purpose as the noopener, especially in older browsers. So it makes sense to use them both. Also, noreferrer can affect your analytics and report traffic as direct instead of referential.
• rel="nofollow" informs search engines not to pass the link juice to the linked page and does not pass the PageRank. You can think of it as a value used when you want to link to another page, but not "endorse" it. It is the only link value in this list that has a tangible effect on SEO efforts.

Article mis à jour le 19 octobre 2022