All You Need to Know About rel=“noopener noreferrer” links
Stewart
Chief Link Building Strategist
If you ever check the HTML of a page on your WordPress website, you may notice some of your outbound links are followed by the code rel=“noopener noreferrer”
You probably didn’t add this code yourself. So you’re likely curious about what it means and whether it affects your site’s SEO.
We have some good news.
WordPress automatically adds tags to external links in some situations. The snippets have no direct impact on SEO or how search engines read your site.
What Is rel=“noopener noreferrer”?
rel=“noopener noreferrer” is an HTML attribute you can add to external links.
The tag is actually made up of two separate parts:
rel=”noopener”
rel=”noreferrer”
Both tags affect the way sites you link interact with your site. But they do so in very different ways.
Here is an example of what the tag looks like.
<a href=”https://externalsite.com” target=”_blank” rel=“noopener noreferrer”>
It’s easy to see which of your links have this code using one of the below methods.
Open the code editor on your WordPress and search for rel=“noopener noreferrer” using the browser’s “Find” feature.
Open the page in a browser, right-click on it, and then click on “Inspect.” This will show you the page’s code in a new tab. Then just search for the same code snippet in this tab.
The second method also allows you to check for the code on websites you don’t own.
You can see how it looks on a page from the Linkbuilder website below.
What Is rel=“noreferrer”?
The rel=“noreferrer” tag hides the origin of traffic in the analytics platforms of the sites you link to.
Typically when people visit a website via a link, the website owners can see the URL that sent the referral traffic to their site.
Adding the rel=“noreferrer” tag hides this data.
For example, when a site owner checks Google Analytics, incoming traffic from the link shows as direct traffic rather than referral traffic. They won’t know that the visitors actually came from your website.
If you’ve ever noticed a sudden, unexplained spike in direct traffic in Google Analytics, perhaps this is why.
When used on its own, the rel=“noreferrer” tag looks like this:
<a href=”https://externalsite.com” target=”_blank” rel=“noreferrer”>
You can also use it without opening the link in a separate tab. In these cases, it looks like this:
<a href=”https://externalsite.com” rel=“noreferrer”>
When Should You Use rel=“noreferrer” on External Links?
Use rel=“noreferrer” when you want to hide the fact that you are linking to a website. Just open external links in a new tab to add the code.
There are times when keeping referrer information private might be useful.
Consider using rel=“noreferrer” if you want to link to a competitor but don’t want them to see your article. Or use it if you don’t trust the site you want to link to.
What Is rel=“noopener”?
The noopener tag has an important role that affects your website security.
The tag stops an issue called reverse tabnapping. This is where attackers exploit a vulnerability that occurs when you set a page to open in a new tab. It allows them to use malicious code to gain control of the referring page.
When the user clicks on a link that is set to open in a new tab, the blog post will open as expected in the new tab.
But the referring page will be redirected to a harmful site. This is often used in phishing attacks to convince users to hand over login details or to encourage them to download malware.
It’s an effective form of attack because the website audience is more likely to trust the page since they are coming from a trusted site.
Noopener Is Essential to Website Security
Use noopener whenever you link to a site and tell the link to open in a new tab.
Be especially vigilant when linking to a website that you don’t trust.
The good news is that WordPress automatically adds this tag to all external links that open in a new tab.
If you don’t use WordPress, you should still consider adding the tag to external links on your pages to increase your website security.
What About Internal Links?
There is no reason to use either of these tabs on internal links pointing to other pages on your site. Using noreferrer will affect your Google Analytics reporting, while noopener is used against external threats.
rel=“noopener noreferrer” in WordPress
WordPress automatically adds the tags noopener and noreferrer to external links when you set them to open in a new tab.
Website owners typically open tabs on a new page, so the reader doesn’t leave their site when they click on an external link.
When you add an external link and don’t click the “open in new tab” box, the code looks like this:
<a href=”https://externalsite.com”>
When you click the “open in a new tab” box, it looks like this:
<a href=”https://externalsite.com” target=”_blank” rel=”noreferrer noopener”>
The target=”_blank” section of the code is what tells the link to open in its own tab.
You can see if your links have this code by inspecting the HTML on your website and then searching for the link.
Can You Remove It?
You can easily remove the rel=“noopener noreferrer” code on WordPress by unchecking the “open in new tab” box.
This will remove the code from your chosen link. The only issue is that the link will open in the same tab.
Removing the code while forcing the link to open in a new window or tab is more difficult.
Because WordPress adds it automatically, there is no easy way to toggle the code on and off.
You can remove the ”noreferrer” part of the code by opening the code editor in WordPress, heading to the link, and deleting the HTML attributes.
If you do this, people you link to will see your site as the referrer.
However, this technique will not remove the “noopener” code.
Even if you remove the HTML code from the page in the editor, WordPress automatically adds it back in when you hit “publish.”
The reason you can’t remove the “noopener” tag is that it is essential to your site’s security. Without it, you are more vulnerable to attacks.
If you must remove it, you can add code to your theme or search for a plugin. However, we don’t recommend trying this.
Does rel=”noopener noreferrer” Affect SEO?
Neither noopener nor noreferrer has any direct negative effect on a website’s SEO.
You can happily leave them on your site without any penalties from search engines.
However, there seem to be two main reasons people worry about these tags.
The first is that the tags look similar to another rel attribute: rel=“nofollow”.
What Is the rel=“nofollow Attribute?
Rel=“nofollow” is a tag used by website owners to tell search engine crawlers to ignore the specified link. This means these links don’t pass on PageRank and are unlikely to have much of an impact on your search rankings.
As a nofollow link has less SEO value than a regular dofollow link, it makes sense that people would worry about rel=”noopener noreferrer” too.
But as we explained above, the reasons for having these codes are nothing to do with SEO. It doesn’t affect the SEO link juice a site passes on.
If you notice an external website that links to you has added the rel attribute to the link, you have nothing to worry about.
The second issue is that web developers like the code on their websites to be as clean as possible so that Google’s algorithm can easily read it.
For this reason, it’s only natural that you’d be concerned about any code automatically added to your site.
But many, many sites rank while using this code. Google has no problem deciphering the extra HTML.
They Have a Slight Indirect Impact in Some Situations
The code can indirectly affect your SEO in minor ways.
For example, if you hide referrer information from an external website, the webmaster won’t see your site in their analytics report.
This could be beneficial if the site is a competitor and you don’t want them to know about your website and the keywords you target.
In other circumstances, it could be disadvantageous.
The website owner won’t be able to see that you have linked to their site. You’ll be less likely to build relationships, and the site owner won’t be able to repay the favor.
Will rel=“noopener noreferrer” Affect Affiliate Links?
Affiliate marketers may worry that the noreferrer tag might negatively affect affiliate links.
If the retailer can’t see where the traffic comes from, how will they track conversions to their affiliate ID?
The good news is that you have nothing to worry about. Most affiliate programs use cookies and other tracking technologies to track which sales are generated by each link.
They don’t need to see traffic coming from a particular affiliate link to assign sales to the relevant affiliate ID.
Most Browsers Automatically Imply rel=“noopener”
In a twist to the story, as of 2021, all major browsers have a feature that implies the “noopener” tag even if the website hasn’t added the code.
Apple was first to introduce the feature to its Safari browser way back in 2018. Mozilla updated its Firefox browser to protect it from attacks in July 2020.
In early 2021, all browsers that use the Chromium code base also received the feature. This includes Google Chrome, Microsoft Edge, and the Brave browser.
Essentially this means using the “noopener” code is slightly less important than before. Even if hackers use malicious code to influence your website, the browsers most people use should stop the attack from working.
However, we should still add it to ensure that the small percentage of people that use other browsers can surf the web safely.
In Summary
rel=“noopener noreferrer” are actually two separate tags with different uses.
Noreferrer stops linked website owners from seeing the origin of traffic you send to their website, while the noopener tab plays a crucial role in protecting your site from reverse tabnapping.
You can use the two tabs independently or as a pair.
While there are some circumstances where it may be beneficial to remove noreferrer, you should never remove noopener tags—unless you do so by changing the link settings, so it doesn’t open in a new window.
And just to reiterate one more time, neither tab impacts how Google reads and ranks your website.