It's no longer necessary to write
noopener is now the default behavior in all modern browsers.
I couldn't find any example where I would want to use this keyword. If you know about one, please share it below.
Great for user generated content, combined with the new
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.
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
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.
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.
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:
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.