Clicking a link might seem harmless, but it can open the door to unexpected security issues. 

If your website opens external links in a new tab, there’s a chance that page could quietly take control of your original site or steal referral data, without you even knowing. This trick is called tabnabbing, and yes, it’s real. 

That’s where the rel=”noopener noreferrer” attribute comes in. It’s a small piece of code that tells the browser to block that behavior and keep your visitors safe. You might’ve seen it added automatically in WordPress or other platforms and wondered, “What does this even do?” 

In this article, we’ll explain what rel=”noopener noreferrer” means, how it works, when to use it, and whether it affects SEO in any way. 

Because protecting your users shouldn’t be complicated. Let’s make it simple.

What Does rel=”noopener noreferrer” Mean?

When you add a link that opens in a new tab using target=”_blank”, you might notice a small HTML attribute added to the link—rel=”noopener noreferrer”. It may look technical, but it serves a real purpose.

rel=”noopener noreferrer” is an HTML attribute you can add to external links to improve security and protect privacy.

<a href=”https://outreachmonks.com” target=”_blank” rel=”noopener noreferrer”>Visit Site</a>

Here’s what it includes:

• noopener – Prevents the new tab from being able to access or control your original page
• noreferrer – Stops the browser from passing your page’s URL (referrer) to the new site

This tag is often added automatically by platforms like WordPress, Blogger, and Ghost when you create external links that open in new tabs.

If you’re curious whether a link on your site already includes this attribute, you can easily check. 

Just open your page in a browser, right-click on the area with the link, and choose “Inspect”. This opens your browser’s developer tools.

Use the Find option (Ctrl+F or Cmd+F) and search for rel=”noopener noreferrer” in the code. If it’s there, you’re good.

You can also check directly in WordPress by opening the page or post in the code editor and searching for the same snippet.

What Is rel=”noreferrer”?

The rel=”noreferrer” attribute is used to stop the browser from passing referrer information to the site you’re linking to. That means when someone clicks a link on your page, the destination site won’t see where the visitor came from. 

Normally, if someone clicks a link, the browser sends a “referrer”—the URL of the page they were just on. But with noreferrer, that info is blocked. This helps protect user privacy, especially when you’re linking to unfamiliar or third-party websites.

For example:

<a href=”https://example.com” target=”_blank” rel=”noreferrer”>Visit Example</a>

In this case, example.com won’t know the click came from your site.

It’s often used together with noopener in the full tag: rel=”noopener noreferrer”—which also adds a layer of security (covered next). But you can use noreferrer on its own if you’re mainly concerned about hiding the referrer info. 

What Is rel=”noopener”?

The rel=”noopener” attribute is used to stop the new tab or window (opened using target=”_blank”) from having any control over the page that opened it.

Why Use rel=”noopener noreferrer”?

Using rel=”noopener noreferrer” is one of the easiest ways to make your external links safer and more privacy-friendly.

Here’s why it matters:

• It protects your site from tabnabbing: When you open a link in a new tab (target=”_blank”), the new page can sometimes access your original page. This can be a security risk. Adding rel=”noopener” blocks that access.
• It hides your referrer info: With rel=”noreferrer”, the site you’re linking to won’t know where the visitor came from. This helps protect your visitors’ privacy, especially when linking to unfamiliar or third-party sites.
• It can improve browser performance: Since rel noopener noreferrer stops certain background connections between tabs, it reduces resource usage in some cases—making your site run a bit smoother.
• It adds a layer of safety to all external links: Especially for blogs, business sites, or any content with outbound links, using noopener noreferrer is a best practice.
• CMS platforms add it automatically: If you’re using platforms like WordPress, Blogger, or Ghost, you might have seen rel noopener noreferrer already added to your links. It’s there to protect your site—even if you didn’t insert it manually.
• It’s better than doing nothing: Even if you don’t fully understand how tabnabbing works, adding noreferrer noopener ensures your links don’t become a security hole over time.

rel=”noopener noreferrer” is a simple, smart addition to any link that opens in a new tab. It keeps your users safer and your site more trustworthy.

Is It Bad for SEO?

No, using rel=”noopener noreferrer” does not hurt your SEO.

A lot of people confuse it with rel=”nofollow”, but they do very different things. noopener and noreferrer are mainly used for security and privacy, not for controlling search engine behavior.

Here’s what matters:

1. It doesn’t block link value – These tags don’t stop search engines from visiting or following the link, unless nofollow is also added.
2. Safe for linking out – You can still link to helpful resources or partners without worrying about losing SEO benefits.
3. Useful for security – The main goal is to prevent security risks like tabnabbing, not to change how search engines see your site.

So, if you see rel=”noopener noreferrer” in your code, no stress. It’s there to keep things safe, not to mess with your rankings.

Conclusion

Adding rel=”noopener noreferrer” is a small but smart way to make your links safer and more privacy-friendly, especially for external links that open in new tabs. It helps prevent tabnabbing, protects user data, and works well with most CMS platforms.

You don’t have to overthink it—just use it where it makes sense, and your site stays secure and clean.

Secure your links, protect your visitors, and let your content click with confidence. 

FAQs About rel=”noopener noreferrer”