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.
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.
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.
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.
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>`.
"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.