rel=noopener noreferrer

« Back to Glossary Index

What does rel=noopener noreferrer mean

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.

« Back to Glossary Index

FAQ

What does rel noopener rel noreferrer mean? arrow icon in accordion
Rel noopener rel noreferrer is an attribute that can be attached to a hyperlink to improve the security of the original link. It ensures that the page to which the link points is not loaded into the user's window where the link was clicked. Instead, a new window or tab is opened in which the new page is loaded.
Why is rel noopener rel noreferrer important? arrow icon in accordion
Rel noopener rel noreferrer is important to ensure user security. It protects against so-called cross-site request forgeries (CSRFs), where malicious actors can manipulate a site to direct the user's requests to another site without the user noticing.
What is the difference between rel noopener and rel noreferrer? arrow icon in accordion
The difference between rel noopener and rel noreferrer is that rel noopener prevents the new page from opening in the same window or tab where the link was clicked, while rel noreferrer sends a request to the new page without specifying the original link.
Where can I use rel noopener rel noreferrer? arrow icon in accordion
Rel noopener rel noreferrer can be used on all hyperlinks that point to a page that is not under the same domain as the original link.
How can I add rel noopener rel noreferrer to my hyperlinks? arrow icon in accordion
To add rel noopener rel noreferrer to a hyperlink, you must add the attribute to the link URL.
Which browsers support rel noopener rel noreferrer? arrow icon in accordion
All current browsers support rel noopener rel noreferrer, including Chrome, Firefox, Safari, Edge, and Internet Explorer.
Can I use rel noopener rel noreferrer on my mobile site as well? arrow icon in accordion
Yes, you can use rel noopener rel noreferrer on mobile websites as well. It is also available for mobile apps running on Android and iOS devices.
What is the difference between rel noopener rel noreferrer and target blank arrow icon in accordion
The difference between rel noopener rel noreferrer and target=_blank is that target=_blank opens the link in a new window or tab without improving the user's security. Rel noopener rel noreferrer also opens the link in a new window or tab, but improves the user's security.
Can I use rel noopener rel noreferrer on my WordPress website as well? arrow icon in accordion
Yes, rel noopener rel noreferrer can be used on WordPress websites by appending the attribute to a hyperlink.
What other security measures can I take to protect my website? arrow icon in accordion
There are many other security measures you can take to protect your website, including using a strong password, using an SSL certificate, implementing access restrictions, using a firewall, and regularly checking your website for vulnerabilities.

With top positions to the new sales channel.

Let Google work for you, because visitors become customers.

About the author

Social Media & Links:

SEO Scaling Framework

The fastest way to the SEO revenue channel

✅ Our exact framework condensed into 96 pages

✅ 3 hours of detailed accompanying video with additional best practices

✅ Step-by-step path to the Bulletproof 100k€ SEO channel

Request video + PDF now!

ℹ️ We will check your details and then release the PDF:

🔒 Don't worry! We will No spam e-mails send!