The rel=noopener and rel=noreferrer attributes

The rel=noopener and rel=noreferrer attributes could be essential for ensuring the security of your website and optimizing its SEO.

In this article, we will explore these two attributes in more detail, their functionality, and their importance.

What is the rel=noopener attribute?

The rel=noopener attribute is used in conjunction with the target="_blank" attribute on external links to enhance the security of websites.

Don't use it on internal links

When an external link opens in a new tab or window, it is possible for the target site to access the window.opener object of the original site, which can lead to security issues.

The security vulnerability addressed by rel=noopener

The main security vulnerability resolved by using rel=noopener relates to phishing or tab nabbing attacks, where a malicious site could redirect the user to another site without their consent. By adding the rel=noopener attribute to external links, you might prevent these attacks and protect your visitors.

What is the rel=noreferrer attribute?

The rel=noreferrer attribute also aims to improve security and privacy by preventing the transfer of referrer information when tracking external links. In addition to the privacy benefits, this can also have a positive impact on the SEO of your website.

Some search engines, like Google, take into account the PageRank juice when evaluating the quality and relevance of a website. By using the rel=noreferrer attribute, you prevent the transfer of this juice to external sites, thereby improving the optimization of your SEO.

Implementing rel=noopener and rel=noreferrer in WordPress

Since WordPress version 4.7.4 (when publishing this article we are at 6.4.2), these two attributes are automatically added to links with target="_blank". Therefore, WordPress site owners do not need to manually worry about their implementation. This update was made to meet current security standards and protect users against potential vulnerabilities.

How to manually add rel=noopener and rel=noreferrer attributes to your links

If you are not working with WordPress or if you want to manually add these attributes for any reason, here's how to proceed:

1. Open the HTML file containing the external link.
2. Find the code for the external link (e.g., <a href="https://www.example.com" target="_blank">Example link</a>).
3. Add the rel="noopener noreferrer" attributes to the <a> tag. The modified code will look like this: <a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Example link</a>.

By doing this, your external links will now be more secure and optimized for SEO.

In Shopify, the rel="noopener" and rel="noreferrer" attributes are automatically added to external links for security reasons. These attributes prevent the new page from being able to access the window.opener property and ensure it runs in a separate process.

However, if you still want to remove these attributes, you'll need to manually edit your theme's Liquid code. Here's how you can do it:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. In the Templates or Sections directory, open the file that contains the link you want to edit.
4. Find the link and remove the rel="noopener noreferrer" attribute from the anchor tag (<a>).

For example, if your link looks like this:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Example Link</a>

You would change it to:

<a href="https://example.com" target="_blank">Example Link</a>

5. Click Save to apply the changes.

Note: Be aware that removing these attributes can expose your site to certain security risks, such as reverse tabnabbing. It's recommended to keep these attributes for external links, especially if they open in a new tab or window.

Disabling rel=noopener and rel=noreferrer attributes in WordPress

In some cases, you may want to disable these attributes on your WordPress site. Here's how to proceed:

1. Go to the Editor section of your WordPress dashboard.
2. Open the functions.php file of your current theme.
3. Add the following line to this file: remove_filter('tiny_mce_before_init', 'wp_pre_tinymce_init');.
4. Save your changes.

It is important to note that disabling these attributes can pose risks to the security and SEO of your website.

In conclusion, the rel=noopener and rel=noreferrer attributes play a crucial role in protecting your website and optimizing its SEO. Whether you use WordPress or not, it is essential to incorporate these attributes into your external links to ensure a secure and high-performing online experience for your visitors.