What is rel=”noreferrer noopener”
A no-referrer is a type of HTTP header that instructs the browser to not send referrer information when loading a page.
Introduction: What is rel=”noreferrer noopener”? What are the Types of No-Referer Policies?
Let’s say you have a blog with a no-referer policy.
1) When a visitor accesses your site, your blog sets a cookie in their browser that is set to expire in one year.
2) When the visitor accesses any page on your site, your blog checks to see if the visitor has this cookie.
3) If the visitor has this cookie, the referrer is not passed to the next page.
When you create a link and want to prevent the website you’re linking to from accessing your site, you can use noopener tags. These tags prevent your SEO efforts from being harmed and this article will explore what that means and how they work.
Today, I want to explain the difference between the no-referrer and opener tags, which are different from the nofollow tag. When each one is used, you should also keep in mind how it affects your search engine optimization.
What is rel=”noreferrer”?
The rel=”noreferrer” tag is a special HTML attribute that can be added to a link tag (<a>). It prevents the referrer information from being passed to the target website by removing it from HTTP headers
This means that Google analytics traffic coming from links that have the ‘noreferrer’ attribute will recall Direct Traffic instead of Referral.
This is how the no-referrer attribute looks in HTML View:
<a href="https://www.example.com" rel="noreferrer">Link to Example.com</a>
If you don’t link to the target website with the “noreferrer” meta tag, your traffic may get tracked
If you don’t use the “noreferrer” tag on a link from website A to website B, it would be possible for people on site B to view the referrers from site A.
In that case, Website B could see a visitor from your website A
The owner of Website B will be able to see where the traffic is coming from when he views his Google Analytics report. He’ll be able to see the referrals coming from Website A, under “Referrals”
Adding the “noreferrer” tag to your website will mean that traffic directs to your partner site (instead of referring) and tracks as DIRECT traffic instead of referral traffic.
When to use rel=”noreferrer”?
The rel=”noreferrer” attribute on links can be used when you don’t want other sites to know that you’re linking to them. It has no other meaningful use, but it does exist.
Definitely do not use the rel=”noreferrer” attribute on internal links- it can mess up with your Google analytics reports.
rel=”noreferrer” and SEO
While adding the noreferrer tag to links does not directly impact SEO, it can be used without risk.
But it doesn’t affect your link building and promotion efforts. The reason is the following:
One way to get the attention of other webmasters is to build up a link profile. All webmasters check their Google Analytics on a daily basis and especially the ‘Referral traffic’
When someone sees that you’re sharing their content, they’re more likely to check it out and share the page in social media, follow your account or even link back.
This provides great SEO (and it’s what Google recommends). Have a look at the following quote directly from a Google document:
When you use the no-referer tag with your links, traffic from your site will not show as a ‘Referral’ in Google analytics, and other webmasters will not know that you have linked to them.
You might be thinking ‘Why am I even talking about this? It’s not going to go on my links and we both know it.’
The popularity of this issue is understandable as WordPress automatically puts a ‘noreferrer’ tag on all outgoing links that open in a new tab.
Noreferrer and WordPress
So if you use WordPress, you should know that whenever you add an external link to your content and set it to open in a new tab (target=”_blank”), the WordPress platform will automatically add rel=”noopener noreferrer”
This was done to improve the security of WordPress rich editor (TinyMCE) and prevent tabnapping or other phishing attacks.
Here is an example:
<a href="https://www.externalsite.com/" target="_blank" rel="noopener noreferrer">my external link</a>
I’ve already explained this, but just to clarify it for you – the next tab won’t have any information that gets passed through it. The links you have on your website will all go to the same place which is why they won’t show up in Google Analytics.
How to remove rel=”noreferrer” from WordPress links
To prevent WordPress from automatically adding the rel attribute to external links, you should not open those links in a new tab. In other words, those links should open up in the same window as your original tab.
This is the simplest way to deal with this problem, but one drawback is that our users clicking the external link will leave our website. This might increase your bounce rate, decrease time on site, etc
Nevertheless, since the majority of traffic is now coming from mobile devices, you shouldn’t worry too much about users exiting your website since the behavior of the ‘new tab’ on mobile makes it difficult for users to come back to the previous window.
There are plugins that can stop WordPress from adding the rel=”noreferrer” to external links, but they only work when using TinyMCE and not Gutenberg.
My advice is to stay away from external links in a new tab and only use the default URL.
Noreferrer and Affiliate links
Noreferrer will have no influence on affiliate links. The reason is that the majority of affiliate programs do not rely on referral traffic to award a conversion but on the affiliate ID included in the link. For example:
<a href="//www.externalsite.com/?ref=15096612" rel="noreferrer noopener" target="_blank">
We assure you that you have nothing to worry about.
The Difference Between Nofollow and Noreferrer
When you add “nofollow” to a link, it instructs search engines not to pass any PageRank from one page to the other. In other words, ignore that link for SEO purposes
There are two main types of link annotations, nofollow and noreferrer. The difference between these two is that noreferrer only sends referrer information to the browser but not following the link while nofollow sends referral information to the browser but will also followthe link.
This is where it can get confusing. Links that you trust need to be followed by nofollow, while if you don’t want the other site to know where you are linking from, use noreferrer.
What is rel=”noopener”?
Sometimes it’s necessary to prevent the opening page from gaining any kind of access to the original page. That’s possible by adding rel=”noopener” tag in order that when you are redirected to an external link, your browser will have no means of accessing the original website.
Here is an example of a noopener link:
<a href="https://www.example.com" rel="noopener">Link to Example.com</a>
WordPress adds this automatically, and it’s important to keep it.
If you want to keep your website secure, it is important to add the rel=”noopener” tag to all external links that open in a new tab.
Rel=”noopener” and SEO
As Noopener does not affect your SEO, there’s no risk in using it to protect your site.
Key Learnings
You might not think you understand “HTML tags & attributes” but the tags will clear your mind. Noreferrer and Noopener can be used to block external web content.
Google will penalize you if you try to cheat them by linking to your other sites.
If you’re working on WordPress, these tags are automatically added to external links that open in a new tab.
One of the things that you can do to be even more secure is use a Noopener. This is an issue most often with browsers, but it happens nonetheless. Adding this link is an easy fix.
The noreferrer parameter is used to protect referral information from being passed to the target website. It also hides referral traffic in Google analytics.
To avoid WordPress from automatically attributing external links as Referral Traffic, simply open the link in a new page instead of a new tab. All should be well then.
Link juice is passed through the nofollow and noreferrer tags in different ways. When a website uses the rel=”noindex” attribute, it tells search engines not to include the link when they’re indexing content.
If you still don’t understand how Google Tag Manager works, or what the rel=”noreferrer noopener” tag is for, please ask in the comments.