What Does the rel=”noopener noreferrer” Tag Mean? (& Does It Affect SEO?)

Taking care of security on your website is one of the most important aspects of being a site owner. You might understand the importance of having HTTPS in your URL prefix, or why you need an SSL certificate. But do you know what the noopener noreferrer HTML tag attributes mean, and when you should use them?

In this article, we’ll go over what rel=”noopener noreferrer” means, when it should be used, and how it affects your site from an SEO perspective. Let’s jump right into it.

What is rel=”noopener noreferrer”?

The rel=”noopener noreferrer” HTML attributes appear in external hyperlinks. Specifically, using both the noopener and noreferrer attributes prevents:

• the link’s target loading in the same tab where the link was clicked
• the backlink from appearing as referral traffic in the destination site’s analytics

This is what the tag attributes look like in action:

<a href="https://www.google.com/" target="_blank" rel="noopener noreferrer">

WordPress automatically adds these attributes to external links that you set to open in a new window. Let’s break them down and look at what each attribute does.

noopener

If you want to prevent an external link from taking control of your user’s originating browser window, you’ll want to add a noopener attribute. According to MDN,

“[noopener] instructs the browser to navigate to the target resource without granting the new browsing context access to the document that opened it. […] This is especially useful when opening untrusted links, in order to ensure they cannot tamper with the originating document…”

In short, noopener is largely a security measure to prevent malicious links from gaining access to a user’s browser (a phishing attack known as tabnabbing). In the past, leaving target=”_blank” alone in your link opened up this security vulnerability. Now, whenever you have an external link set to open in a new browser window using target=”_blank”, most search engines and SEO experts consider it best practice to use noopener alongside it.

(According to Mozilla Developer Network (MDN), the target=”_blank” attribute “now implicitly provides the same <rel> behavior” as noopener. We feel that it’s still worth being doubly safe and including noopener since not all users click links in the most up-to-date and secure browsers.)

noreferrer

Essentially, noreferrer keeps external sites from knowing that you have included links to their material on your website. This could be important to you for privacy or security reasons. All in all, this particular attribute is one you’d want to think through before applying it to your links. Using it really depends on your preferences.

The noreferrer attribute masks your referral links in destination analytics. It protects your site’s information from being transferred to the website your users are navigating to. As a result, this causes the links to appear as Direct traffic in Google Analytics, rather than Referral traffic from your specific domain.

If someone navigates to your website using a link that does not include noreferrer, then you’ll be able to see their website listed in your Referral traffic link on your Analytics dashboard. But if the link includes noreferrer, it will appear in Direct traffic. You can find these listings in Google Analytics under Acquisition > All Traffic > Channels and Acquisition > All Traffic > Referrals.

It will still pass “link juice” for SEO, but not data regarding the originator. If you’re not interested in passing on that SEO boost, nofollow is going to be an additional tag you want to add.

Using with rel=”nofollow”

Adding the nofollow attribute to a link that includes rel=”noopener noreferrer” allows you to link to other websites without appearing to approve their content or perspective. Google says this attribute should be used “for cases where you want to link to a page but don’t want to imply any type of endorsement, including passing along ranking credit to another page.”

Basically, nofollow tells Google that you don’t want it to perceive you as supporting a particular site just because you link to it. There are a number of similar link attributes that help Google understand the intent behind a link, including attributes for labeling sponsored and user-generated content (many of which can be added via Schema markup).

In short, adding all three attributes — noopener, noreferrer, and nofollow — to a link tells Google that you are:

• Willing to protect your site users from potentially malicious external links (noopener)
• Unwilling to appear in a website’s analytics data as Referred traffic (noreferrer)
• Unwilling to endorse the content or creator you’re linking to (nofollow)

The nofollow attribute seems fairly specific, so you probably only want to use that on a case-by-case basis and not as a general rule. Many blogs set their comments sections to nofollow to avoid comment spam from bots and people who don’t contribute to the conversation.

When to Use “noopener noreferrer”

You want your website to be as secure as possible for your visitors. Because you want to build and leverage a strong backlink strategy, you won’t use rel=”noopener noreferrer” all the time. For example, you should avoid using it when linking to internal pages within your site.

Using rel=”noopener noreferrer” tells Google that you care about link security. And you don’t want certain sites to recognize your site as a referral.

Overall Impact of “noopener noreferrer” on SEO

When you use the rel=”noopener noreferrer” attributes in your external links, this shouldn’t have a direct negative effect on your SEO backlink strategy. Neither attribute will cause your technical SEO ranking to take a hit. In fact, using noopener alongside target=”_blank” will provide better on-page SEO because users will remain on your site, even as they navigate to another.

However, noreferrer will keep Google from being able to recognize when you’re linking to others’ sites. And, other website owners won’t be able to see when you’re linking to them.

That means you’re cutting out the possibility of reciprocal links. After all, if you’re not giving site owners the option to see your referral traffic when they go over their analytics, they can’t know it’s from you.

Backlinks to your website from elsewhere aren’t guaranteed. Still, it doesn’t hurt to do as much as you can to connect with sites and content you love. Generally speaking, though, using rel=”noopener noreferrer” in your external links won’t cause any harm. Just make sure not to use them on your own website pages when you use internal links. Doing so could cause problems in your own site analytics and with Googlebot crawling and indexing your site structure.

Conclusion

Now that you know how to use rel=”noopener noreferrer” on your website, it’s time to plan accordingly. If you need to, consider creating a spreadsheet of the external links you include on your site. Also, track the page they’re on and the attributes you’ve applied to them. Doing so can be helpful for quick reference in case you need to make future changes.

Do you use rel=”noopener noreferrer” in your hyperlinks? Why or why not? Drop us a comment and let us know what you think.

Featured image via Sammby / shutterstock.com