Noopener
What is Noopener?
The term “noopener” refers to the rel="noopener" HTML attribute that is added to links set to open in a new browser tab or window for security reasons. This attribute provides an additional level of security by preventing a third-party website you link to from taking control over the browser tab through the window object (the window.opener property).
Here’s how it looks in HTML code:
<a href="https://example.com" rel="noopener" target="_blank">Example Link</a>
Why is Noopener Important?
Without the rel="noopener" attribute, the linked website could take control of the linking page tab in a browser and redirect it to a phishing page or a malicious website. This could be used to steal personal data or install malware. The noopener attribute on external links protects website visitors from this backdoor hack. Since it doesn’t impact your site’s SEO at all, you can safely use it to maximize security for all of your users.
Since 2017, this attribute has been added automatically to links that open in a new window or tab in WordPress. However, it can (and should) be added to all external links, not just in WordPress.
The good news is, since 2020, most browsers automatically process links with target="_blank" as if rel="noopener" is set on them.
Does Noopener Impact SEO?
Some site owners have expressed reluctance to use the “noopener” attribute because they’re worried it will affect their site’s SEO. However, “noopener” has zero impact on SEO, in terms of both crawling and link juice flow. The “noopener” attribute works on the browser level, preventing security vulnerabilities without affecting search engine optimization.
Do You Need to Use Noopener on Your Website?
If you’re using WordPress, then you’re probably using “noopener” automatically. Modern browsers will process links with target="_blank" as if rel="noopener" is present anyway. This provides an additional level of safety for your users, even if they don’t have a modern browser.
On the other hand, if you don’t use WordPress, it’s a good practice to manually include “noopener” on links that open in a new tab/window. This will protect those visitors who might be using older versions of browsers.
While the use of “noopener” is an effective way to protect users from malicious code, it’s still important to carefully consider where you link to. By choosing only authoritative and trusted websites, you minimize the risk to your users. However, since websites can change, die, or be resold, even today’s good links could become tomorrow’s malicious ones. This makes “noopener” an important extra layer of security to ensure your users stay safe, no matter which links they click on your site.
Best Practices for Using Noopener
- Automatically Implement in CMS: Use a CMS like WordPress that automatically adds
rel="noopener"to new tabs/windows. - Manual Addition: If not using a CMS, manually add
rel="noopener"to all links opening in a new tab/window. - Regular Audits: Regularly check and update links to ensure they point to trusted sources.
- Stay Informed: Keep up with browser updates to understand how they handle link security attributes.
FAQs
Why was the noopener attribute introduced?
The noopener attribute was introduced to prevent linked websites from taking control of the originating tab through the window.opener property, protecting users from potential security threats.
Does noopener have any impact on SEO?
No, the noopener attribute has no impact on SEO. It is purely a security feature that prevents certain types of attacks without affecting search engine rankings.
Should I add noopener to all my external links?
Yes, adding noopener to all external links that open in a new tab/window is a good security practice, protecting users from potential vulnerabilities.