?? noopener, noreferrer, nofollow ¿¿
Tags: webdev, html, discuss
Published: 2021-03-21 07:59:32

---
description: Learn how to use the keywords noopener, noreferrer and nofollow on links and how they impact security and SEO
---

## TL;DR

**noopener** 
It's no longer necessary to write `rel="noopener"` because `noopener` is now the default behavior in all modern browsers.

**noreferrer** 
I couldn't find any example where I would want to use this keyword. If you know about one, please share it below.

**nofollow** 
Great for user generated content, combined with the new `ugc` keyword: `rel="nofollow ugc"`

## Introduction

I've never been 100% clear about the difference between the values of the `rel` attribute on `<a>` tags. I decided to do some research and take some notes. Here is a summary for myself and anybody interested. Please do post a comment below if I'm wrong about anything and I'll update the post accordingly.

## **noopener**

External links with `target=blank` open in a new tab. By default, that new tab has access to `window.opener`, which points to the origin page. The newly opened website has access to that object and can even change the value of `window.opener.location`. Yes, it can force the origin page to navigate to a new URL. The worst part is that the user may not even notice the programmatic navigation because the new tab is focused by default. 

Imagine a user scrolling through his Facebook thread. He sees an interesting article teaser and clicks the external link that opens in a new tab. Once he's done reading the article, he goes back to the Facebook tab. Strangely, Facebook is asking for his credentials again. He naively enters them again and falls into the trap: when he opened the article, his Facebook page was programmatically navigated to another website that pretends to be Facebook. This method of deceiving users and stealing their information is called _tabnagging_.

Adding the keyword `noopener` prevents the opened external tab from accessing `window.opener`. 
Why is this `noopener` not the default behavior you may ask? Well, it is now in all in all modern browsers. You can test it yourself [with this web experiment](https://mathiasbynens.github.io/rel-noopener/). However, since the change is very recent, it doesn't hurt to keep it around a little longer, especially since most of the time it is outputted by default by tools like CMS or components libraries.

But this update to browsers is good news for new web developers who will never have to worry about this security vulnerability.

## **noreferrer**

The `noferrer` keyword prevents access to `window.opener` (exactly like `noopener`), but also prevents the HTTP `Referer` header from being sent to the linked website.

While it has no impact on SEO, it affects the web analytics of the linked website. Visits from your website to the linked website will be counted as **direct traffic** in referral traffic (instead of showing your website as the source). As a webmaster, I want to appear in the analytics of the websites I link to. When they see traffic from my website, they will most probably check it out and maybe share the page on social media, follow me or even decide to return the favor by linking back to my website.

So write `rel="noreferrer"` for outgoing links when you don’t want other sites to know that you are linking to them. **However I cannot think of any concrete example.**

Finally, you obviously shouldn't use the `noreferrer` keyword on internal links as it will mess up your analytics reports.

The reason you may find this keyword recommended in best practices is because `noopener` is not supported by Internet Explorer, thus `noreferrer` is used on external links to prevent _tabnagging_.

What about user privacy?
Sharing full URL paths with external websites is not good for user privacy and it's not useful for analytics.
Here, you should turn to the referrer policy, by setting it to `strict-origin-when-cross-origin`. In some web browsers (e.g. Firefox v87), `strict-origin-when-cross-origin` is already the default value.
This topic is however out of the scope of this blog post and I strongly encourage you to read this excellent article:
https://web.dev/referrer-best-practices/

## **nofollow**

Spiderbots crawl websites, collect and follow all links they encounter. If you don't want crawlers to follow certain links, you can add `nofollow`. Keep in mind that it's only a hint: the spiderbots may choose to ignore the directive and use `nofollow` links for rankings

When dealing with user-generated content, it's complicated to check all the external links that are posted. Some links may lead to websites with a bad reputation and this will hurt your SEO ranking. This is where the `nofollow` keyword comes in handy. You can also use the new `ugc` keyword, but not all spiderbots understand it, so keep both keywords: `rel="nofollow ugc"`. You can see an example of it on any links posted in the comment sections of css-tricks.com.

You can also use `nofollow` for pages on your website that you don't want to be indexed, but I think it's better to use the `robots.txt` file rather than to add `nofollow` on links that point to those pages.

## Sources

[What rel="noreferrer noopener" Mean and How it Affects SEO](https://www.reliablesoft.net/noreferrer-noopener/)

[The State of Nofollow, UGC, & Sponsored Link Attributes in 2020](https://ahrefs.com/blog/nofollow-ugc-sponsored/)

[How Google's Nofollow, Sponsored, & UGC Links Impact SEO](https://moz.com/blog/nofollow-sponsored-ugc)

[Links to cross-origin destinations are unsafe](https://web.dev/external-anchors-use-rel-noopener/)

[What rel="noreferrer" Does and How to Remove It](https://searchfacts.com/rel-noreferrer-guide/)

[The Difference Between Nofollow and Noreferrer, and Why it Matters](https://www.forbes.com/sites/johnrampton/2017/11/06/the-difference-between-nofollow-and-noreferrer-and-why-it-matters/)