Technical SEO

Noopener

Shahid Maqbool

By Shahid Maqbool
On Apr 12, 2023

Noopener

What is Noopener?

Noopener or rel=noopener is an HTML attribute used in the link to instruct the browser not to allow the newly opened browsing context to access the document that opened it.

This attribute is used as a security measure to prevent a malicious website from gaining access to the original website's data, which could include sensitive information such as login credentials or personal data.

By adding rel=noopener to a link, the browser will ensure that the new browsing context cannot access the original website's data.

It looks like this:

<a href="https://yourwebsite.com" target="_blank" rel="noopener">Link Text</a>

In this example, the target="_blank" attribute is used to open the link in a new window or tab, and the rel="noopener" attribute is added to prevent the new window or tab from accessing the original browsing context.

Note that it's important to include the rel="noopener" attribute when using target="_blank", as omitting it can potentially introduce security risks.

Why is Noopener important?

Noopener is important for security purposes because it prevents new browsing context from accessing the original browsing context, which can be a security risk.

The "rel="noopener" attribute is used to protect website visitors from a type of backdoor hack where a linked website could potentially take control of the linking page and redirect it to a phishing page or a malicious website. This could result in stealing personal data or installing malware on the user's device.

By adding the "rel="noopener" attribute to external links, you can ensure that your website visitors are protected from this security vulnerability.

The good news is that since 2017, this attribute has been automatically added to links that open in a new window or tab in WordPress.

However, it's important to note that this attribute should be added to all external links - not just in WordPress - to maximize security for all users.

In addition, starting from 2020, the majority of modern web browsers automatically treat links with "target="_blank" - which opens links in a new tab or window - as if "rel="noopener" is applied to them by default.

Difference Between “noopener”, “nofollow” and “noreferrer”

Noopener, nofollow, and noreferrer are three different HTML attributes that serve different purposes.

Noopener is used for external links to prevent the new browsing context from accessing the original browsing context, which can be a security risk. 

Nofollow is used for external links to tell search engines not to follow the link to the target website. This is typically used for sponsored or paid links, or for links to low-quality or untrusted websites.

By using nofollow, website owners can prevent their websites from being associated with low-quality or spammy websites in the eyes of search engines.

Noreferrer is used for external links to prevent the referrer information from being sent to the target website when the link is clicked.

Referrer information is typically sent by the browser and includes the URL of the page that the user was on before clicking the link. This can be important for privacy and security reasons.

Simply put, noopener is used for security purposes to prevent a new targeted website from accessing the original browsing context, nofollow is used for SEO purposes to prevent search engines from following a link to a target website, and noreferrer is used for privacy purposes to prevent the referrer information from being sent to the target website.

Usually, both rel="noopener noreferrer" are used together along with target="_blank" to provide security and privacy protection at the same time while opening the target website in a new window or tab.

Does Noopener impact SEO?

Noopener does not have a direct impact on SEO as it is not a ranking factor used by search engines.

However, using a noopener can indirectly impact SEO in a positive way by improving the security and user experience of a website.

By using noopener, website owners can ensure that their website is secure and that visitors are protected from security risks such as malicious websites attempting to access sensitive information.

Do you need to use a noopener on your website?

It is generally recommended to use a noopener on your website for security purposes, particularly when links open in a new window or tab using the target="_blank" attribute.

When a link opens in a new window or tab without a noopener, the new window or tab can potentially access the data and information in the original window or tab, including cookies, login credentials, and other sensitive information. This can be exploited by malicious websites to steal information or perform other harmful actions.

By using a noopener along with target="_blank", the new window or tab is opened in a separate browsing context and cannot access the original window or tab's data, which helps prevent malicious websites from gaining access to sensitive information.

Therefore, adding a noopener to external links on your website is a best practice for improving website security and protecting visitors from security risks.

What is rel=”noopener” in WordPress?

In WordPress, rel="noopener" is automatically added to external links when they are chosen to open in a new window or tab.

WordPress adds this attribute as a security measure to prevent malicious websites from gaining access to the original website's data, which could include sensitive information.

By adding rel="noopener" to external links, WordPress ensures that the new browsing context cannot access the original website's data.

WordPress also has a filter named wp_targeted_link_rel that can be used to add additional link relationship attributes, including noreferrer and nofollow, as well as custom attributes.

Takeaway

Noopener is an HTML attribute used while linking to websites externally along with the target="_blank" attribute to indicate that the link should be opened in a new window or tab and that window or tab should not have access to the original URL.

This attribute is used as a security measure to prevent a malicious website from gaining access to the original website's data.

Adding rel="noopener" to links on a website is a best practice for improving website security and protecting visitors from security risks.

Related Articles

Leave a reply
All Replies (0)