rel=noopener noreferrer

Definition of rel=noopener noreferrer

In the source code of the page you can often find the tag rel=noopener noreferrer. But what does that actually mean exactly? For this we must first understand the structure of a link tag in HTML

When you insert a link into the content of the web page, the code looks like this:

• The Link syntax target="_blank" warns the Browserto open the link in a new tab, and your website will remain open in its own tab.
• The rel attribute of the anchor tag specifies the relationship between the current document/web page and the linked web page/document.
• The Attribute rel=noopener is applicable when a link is selected that will be displayed in a new Browser-tab should be opened. The same attribute quality can also be achieved with a rel=noreferrer.

This property was converted into a Anchor tag included to address security issues that can be exploited by malicious websites. With the help of JavaScript-functions, we can allow a new tab to be controlled by its associated window.

If you are linked to an external website that could be affected by the malicious code, then this website can use the window.opener JavaScript-property to steal digital information from your target audience by running on the same process of your site.

So if you rel="noopener" or rel="noreferrer" to the link, the new tab will be prevented from taking advantage of the JavaScript window.opener function.

In this case you can target="_blank" for an external page link in your web page content, then always close rel="noopener" or rel="noreferrer" Attributes on.

A rel="noopener" attribute protects the new page to be accessed by the window.opener property and ensures that it is executed in a separate process.
The rel="noreferrer" has a similar quality, but also prevents the referrer information from being passed to the new page.

How does rel="noopener noreferrer" affect your website?

The anchor tag rel="noopener" or rel="noreferrer" attribute improves the security of the site, but some people want to ignore it because they think it will damage their organic SERP ranking will influence.

It does not affect the SEORanking of the website or the overall performance of your website. In fact, it protects the confidentiality of your website audience and prevents external websites from spreading malicious code.

The Search engines and Analysis tools do not interact with the rel="noopener" tag. It contains an instruction to the Browser, the use of the Javascript-object window.opener and create a new thread for processing.

Difference between rel=noopener and rel=nofollow

Most people associate noopener with nofollowbut they are completely separate.

In addition Cross-site hacking by no-opener attributes prevents and also improves the security of your website. Search engines do not consider noopener or noreferrer as SEO ranking factors. The SEO Link Juice Your web page will not be passed to the linked web page if you add the nofollow attribute. The link with the nofollow relationship is created by Search engine crawlers not taken into account.

Advantages of rel=noopener and rel=nofollow

The biggest advantage of rel noopener rel noreferrer is that they provide additional security protection by preventing the possibility of a cross-origin resource sharing (COR) attack. COR attacks can exploit the fact that the Browser stores information about the original link, and involve an attacker tracking the victim.

Disadvantages of rel=noopener and rel=nofollow

The only disadvantage of using rel noopener rel noreferrer is that they sometimes prevent the user from opening links within the browser, for example, when clicking a link on a page that should not open in a new tab.

Use cases

rel noopener rel noreferrer are usually used when opening links to external websites, for example when linking to social media accounts or when linking to pages that are not connected to the website.

Examples

Example 1: When you add a link to an external website, you can use rel noopener rel noreferrer to ensure that the link opens in a new tab, e.g. `<a href="/en/”https://example.com”/" target="”_blank”" rel="”noopener" noreferrer”>Link</a>`.

Example 2: If you add a link to an internal page, you can use "rel noopener rel noreferrer" to ensure that the link opens in the same tab, e.g. `<a href="/en/”https://example.com”/" rel="”noopener" noreferrer”>Link</a>`.

Conclusion

"rel noopener rel noreferrer" are HTML attributes that can be used when adding links to external and internal pages to prevent security issues. They are simple to use, but provide an extra layer of protection against COR attacks and can also help users avoid links in their Browser to open.

There is no need to worry about rel="noopener" rel="noreferrer" tag as it will only protect your audience from potentially harmful links that could hijack their tabs.

This tag attribute is automatically added to all internal and external links when you open them in a new browser window. I think you will only want to remove this tag attribute if you want to take advantage of the JavaScript window.opener function.