?? noopener, noreferrer, nofollow ¿¿

#webdev #html #discuss

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. 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.