What Is rel=”noopener”?

What is rel=”noopener” and how does it affect your WordPress site? When should you use it? These are the questions we will answer for you today. 😎

The first thing you should know is that WordPress adds the rel=”noopener” attribute automatically to all external links you add to your blog posts or pages.

Understanding rel=noopener

This is important because, without it, a hacker could gain access to your site and even steal data like user information or cookies. That’s why WordPress automatically adds the rel=”noopener” attribute to any link that you want to open in a new tab.

An example of when you would use rel=”noopener” is if your WordPress site has a blog post with an external link. If the user clicks on this link, it would open in a new tab and malicious code could have access to the page’s window object (aka your website); rel=”noopener” prevents this from happening.

👉 Here’s an example of a link with a rel=”noopener” tag:

<a href=”https://finmasters.com/” target="_blank" rel=”nooopener”>FinMasters</a>

What’s the difference between noopener, noreferrer, and nofollow?

The rel=”noopener” attribute is used in WordPress to specify how browsers should treat external links. This ensures that any malicious code or tracking cookies on the destination site won’t be able to access your WordPress website.

The other two attributes, noreferrer and nofollow, are related but have different purposes. Noreferrer instructs browsers not to send referral information to the target website when clicking on the link (which also hides data in Google Analytics), while nofollow tells search engines not to index or follow the external link.

How does rel=noopener affect your WordPress website?

The rel=noopener attribute is used to prevent malicious websites from accessing certain information about the page you are currently viewing, such as its window object and parent frame. When a link with the rel=”noopener” attribute is clicked on, the linked page will be opened in a new tab or window without accessing any of the information from the original page.

Additionally, it does not affect your WordPress site’s SEO. In fact, having a rel=noopener attribute on your site’s links may provide SEO benefits, since Google is known to reward websites that improve their security.

How to remove rel=noopener from links in WordPress

Don’t. There’s no reason to do it. 🤓

However, if you really want to do it for some reason, removing rel=”noopener” from your WordPress links is relatively easy. You can have the links open in the same window to remove the target=”_blank” attribute. There’s also a plugin called Remove noreferrer, which also helps remove the rel=”noopener” tag.

Enhancing WordPress security with rel=”noopener” ⚙️

Using rel=”noopener” in your WordPress links helps to increase site security by:

• Preventing tabnabbing: Tabnabbing is a type of phishing attack. When someone clicks a link that opens a new tab, the new tab could potentially change the original tab (your website) to a fake login page or other malicious content without the user noticing. By adding rel=”noopener,” you prevent the new tab from being able to access and manipulate the original tab, keeping your users safer.
• Isolating browser contexts: When rel=”noopener” is used, the browser separates the original window and the new tab. This means the new tab doesn’t get a reference back to the original window, adding an extra layer of protection.

How does it work? Normally, a new tab opened with target=”_blank” can access the original tab via the window.opener element. Rel=”noopener” removes this reference, ensuring the new tab knows nothing about the tab that opened it. This simple HTML attribute significantly boosts your WordPress site’s security and provides a better user experience.

We hope this clarifies the importance of rel=”noopener” and how it enhances your website’s security.