What is Rel=”Noopener” and How Do You Use It with WordPress?

When building and maintaining websites, we always have to take into consideration the security of the sites under our care. Blogs especially need an extra level of care considering the number of outlinks they usually have. Taking care of outlinks involves different tasks in order to always make sure they are optimized. One of the tools that help oversee the security of your outlinks is the HTML rel=”noopener” attribute. It’s a simple thing but can do wonders for a site’s security.

In this post, we’ll take a look at what exactly a noopener link is and how to use the rel=”noopener” attribute with WordPress.

What Is The Rel=”Noopener” Attribute?

Simply put, the rel=”noopener” attribute is added to a link that opens in a new tab/window. When you add a link in WordPress you have the choice to select if the link will open in the same window or in a different one. When you select to open on another window, WordPress automatically adds the rel=”noopener” attribute to your HTML along with the usual, target=”_blank” attribute.

What is the purpose of adding the rel=”noopener” attribute to links that open in a new window? First of all, in terms of user experience and visitor metrics, it’s great to have external links open in new tabs, that way they don’t leave your site completely.

But the main reason this attribute exists is for security.

Reverse Tabnabbing

The rel=”noopener” attribute protects sites from malicious intentions, specifically, the phishing attack called reverse tabnabbing.

Reverse tabnabbing is when a malicious site uses window.opener.location.assign() to replace a real page with a fake one. It works like this: the page where the links are added, called the parent page, leads to the child pages through said links.  The malicious child page then attaches itself to the parent page with window.opener.location.assign() and mimicks the original site with a fake one.

If the mimicked site has a login widget and the user inputs their information, all that info is stolen by the malicious child page. What the rel=”noopener” attribute does is protect the parent page from being attacked with malicious intent via reverse tabnabbing through child pages.

What About Noreferrer?

The rel=”noopener” attribute works on most browsers except Firefox and other older browsers. When WordPress adds the rel=”noopener” attribute to your links as a default, you should then add the rel=”noreferrer” attribute alongside it. If you have updated to the latest WordPress, then both attributes are being added to your links automatically.

The rel=”noreferrer” attribute will tell the browser to not collect referrer information from the main page sending the links.

This is what your links should look like:

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

How Is A Noopener Link Related to Dofollow and Nofollow links?

It’s a common misconception that links with the rel=”noopener” attribute are related to dofollow and nofollow links, when in fact they aren’t. The difference is that noopener and noreferrer links are meant for security purposes while dofollow and nofollow links are more about page rank and SEO.

For example, a link with a rel=noopener attribute can be either dofollow or nofollow. That choice is up to you. In fact, we published an in-depth article about it a while back that you should definitely check out.

All added links are automatically attributed as follow (dofollow) links. To make sure they are nofollow, your links should look like this:

<a href="https://www.example.com" rel="noopener noreferrer nofollow" target="_blank">example anchor text</a>

Does a Noopener Link Affect SEO?

It’s a myth that a link with a rel=”noopener” attribute can affect SEO. Using noopener and noreferrer links will not affect SEO at all. Dofollow and follow links do affect SEO though!

Just remember it like this:

• noopener and noreferrer: pertain to security
• nofollow and dofollow: pertain to SEO and domain authority

When Is It A Good Idea To Use The Rel=”Noopener” attribute?

You should use the rel=”noopener” attribute on all your links every time. Not surprisingly, WordPress now adds the rel=”noopener” attribute as a default. Security is extremely important for all kinds of sites, from blogs to eCommerce to sites full of affiliate links.

In some cases, you might want to undo the default function of adding the rel=”noopener” and rel=”noreferral” attributes. We don’t suggest you do so though. It can open your site up for security risks.

What About Your Affiliate Links?

If you are worried about how your affiliate links are affected by using the rel=”noopener” and rel=”noreferer” attributes, you don’t need to. Most affiliate links will have your affiliate ID in the URL itself so there’s no need to send any referral information to the affiliate child pages through your links. In fact, adding the rel=”noopener” and rel=”noferrer” attributes to your affiliate links should be a common practice. You can’t always be sure of the security of the sites you are vouching for.

A word of advice for affiliate links: Always link to sites that you can be sure are safe. Don’t just link to a million sites that offer affiliate income from whatever they sell. Your followers will want to click on your affiliate links if you are honest about the products. More so, if you actually review the products instead of just filling your site with links.

In this article, you’ll find plenty of great WordPress affiliate programs that we vouch for.

Last Thoughts on The Rel=”Noopener” Attribute

In this post, we looked at the purpose behind the rel=”noopener” attribute and its companion the rel=”noreferrer” attribute. We looked at what their purpose is and how the new WordPress update now adds these as a default to all your links. Nevertheless, you should always double-check if your WordPress is doing it. We also looked at how noopener links are related to dofollow and nofollow links and how they are different.

Remember that the rel=”noopener” attribute exists to keep your website safe and you should always use it. It will not affect your SEO nor your affiliate links. We hope this article helped you understand it all better and why it’s important to include the attribute to the links in all your content.

Let us know your thoughts in the comments, have you ever been a victim of reverse tabnabbing? Are you always using the rel=”noopener” attribute?

Featured Image via MarySan / shutterstock.com