The Crucial Role of rel=”noopener noreferrer” in SEO Practices

The Crucial Role of rel=”noopener noreferrer” in SEO Practices

Picture this scenario: You’ve linked to another page from your site with HTML attributes like the target=”_blank” link. Essentially, this allows the page to open in a new browser tab (or window).

The issue is that this can pose a security risk if hackers access the external page and inject malicious code that instructs the web browser to secretly replace your inactive tab with a malicious page designed to display advertisements or a fake login form. This is where the crucial role of rel=”noopener noreferrer” comes into play. Throughout this comprehensive guide, we will delve deep into the world of rel=”noopener noreferrer,” exploring its significance in SEO practices.

The popular practice is referred to as “tap napping,” akin to kidnapping. Hackers can go a step further by using the referrer property to return the URL of the document that loaded the current document. This can be effective if they are carrying out attacks on many linking domains to help serve the right phishing page.

But all is not lost. When defining a link in HTML, you can add some attributes to the link to control the behavior of the <a> element. We’ll discuss three main attributes in the guide:

  • Rel=norefferer
  • Rel= noopener
  • Rel=nofollow

But before we get started, let’s see tab napping in action:

Here is an example of a sample website for a fictional hospital called Unity.

example of a sample website for a fictional hospital called Unity

(Credits Nirrwaw Github).

When we click on “Registration,” here is what we get:

Registration on Unity

This is the authentic page. However, we have hijacked the “Book Appointment” page by adding a malicious script that changes the address of the inactive page. So, when we click on “Book Appointment,” the page opens in a separate tab as the target is set as blank.

“Book Appointment” link in code

Immediately, the inactive tab is replaced with the malicious page we’ve added. So, if we click on the inactive tab, it has been replaced as follows:

"Enter Your Information So I Can Steal It" form

Instead of “Register” the page title is “Enter Your Information So I Can Steal It.”

So, what happened? If we examine the code, here is the script we added to carry out tab napping:

Using the window.opener

By using the window.opener property, we have access to the original window, and that has allowed us to change the location to a new page. The window.opener property can be used to manipulate HTML elements from the main window and extract information from forms, among other things and other websites.

For the attack to have happened, two things went wrong:

#Issue 1: Using the rel=”opener”

Note that the rel attribute value was explicitly set as rel=”opener.” This instructed the browser to grant the new browsing context access to the page that opened it. That’s why it was possible to change the URL. We’ll learn what is rel noopener and why it stops this attack.

Using the rel=”opener”

What if we don’t include rel=”opener”? The default behavior of modern browsers like Google Chrome is to not allow other pages to modify referral pages unless the rel=”opener” attribute is explicitly used.

To demonstrate this, if we remove the “opener tag” from the a> link and click on “Book Appointment,” the page opens in a new tab, but the Google Chrome-enforced protections prevent the Windows.opener script from running, invalidating the attempt to tab-nap.

Issue 1

#Issue 2: The external link opens in a new tab

The Window.opener property could not have accessed the original tab if the link opened in the same window. Therefore, you should be careful about which external links you allow to be opened in separate tabs.

In our example, if we click on “Book Appointment,” the site will load in the window.

The site load in the window after we click on “Book Appointment”

If we return to the original page, the malicious page has not taken its place.

Returning to original page

At this point, you probably have a good understanding of how tab napping attacks happen. It is important to know how to combat these threats by looking at the rel=”noreferrer” and rel=”noopener” attributes. It’s also crucial to understand the significance of comprehending HTML attributes and their profound implications for SEO, with a specific focus on the role that rel=”noopener noreferrer” plays in the optimization of your web presence.

What Is ‘rel=”noopener noreferrer”’?

The rel=”noopener noreferrer” attribute is an HTML attribute that is often added to hyperlinks (anchor tags <a>) when you want to control how a new browser tab or window opens when the user clicks the link. It primarily serves two important purposes:

  • noopener: When a link with target=”_blank” is clicked, it opens a new tab or window. If the original page contains JavaScript, the newly opened tab or window can potentially access the window.opener property, which points to the original page. Malicious websites may take advantage of this to carry out actions on the original page, such as redirecting it or stealing data. The noopener attribute plays a crucial role in enhancing website security by ensuring that the new tab or window does not have access to the window.opener property, thereby helping to prevent malicious links from compromising user security.
  • noreferrer: The noreferrer attribute prevents the sending of the HTTP referrer header when the new tab or window is opened. The referrer header typically contains the URL of the site that initiated the link click. By using the noreferrer attribute, you hide the referring page’s URL, which can be useful for privacy reasons and also prevents some forms of information leakage. This attribute is a vital consideration when enhancing security and privacy in web development.

Note that if you have not included rel=”noreferrer”, the browser will pass information to the target resource. But take note that contemporary browsers adhere to various referral policies.

To illustrate how to check the referrer URL, let’s navigate from “Home” to the “About Us” page. We can check the originating document on Developer Tools using the following prompt: “document.referrer.”

document.referrer prompt

In this case, it returns index.html, which serves as the homepage.

Chrome and most modern browsers now adopt the “strict-origin-when-cross-origin” referral policy by default. But note that other than using rel=”noreferrer”, you’ll need to use the “referrerpolicy” attribute if you want to set a different referral policy than the one adopted by the web browser.

For instance, in the following link:

<a href =”https;” referrerpolicy =”no-referrer-when-downgrade”>

There are up to seven different referral policies that inform website owners how much information is passed with the Referrer header. Here is a brief summary of what each policy entails:

  • No-referrer: Restricts any referrer information from being sent with the request.
  • No-referrer-when-downgrade: Referrer information will be sent only if the destination utilizes the same or a more secure protocol than the origin. For example, if the origin is http:// and the destination is http:// or https:// the referrer information is disclosed.
  • Origin: Only the origin of the referrer is sent, not the full URL that may contain the path. For example, if the full referrer URL is, only is sent. It offers a good balance between privacy and functionality by preventing the leakage of sensitive information contained in the URL path or query string.
  • Origin-when-cross-origin: It allows the full referrer URL, including the path, to be sent when the destination is on the same origin as the referrer, but only the origin (without path or query string) is sent when the destination is on a different origin. For example, if the referrer is and the destination is, the full referrer URL is sent ( ). But if the destination is, only is sent.
  • Same-origin: The policy permits the browser to send the full referrer URL only if the destination is on the same origin as the referrer, and no information is sent otherwise. It can offer more privacy than Origin-when-cross-origin, but may cause cross-origin functionality to break.
  • Strict-origin-when-cross-origin: It enforces the same protections as the origin-when-cross-origin policy but restricts passing referrer information from being sent if the destination doesn’t use the same or a more secure protocol than the origin. For example, if the referrer is but if the destination is, the referrer header will not be sent entirely. But if it was https://, the referrer URL ( without the path would be sent.
  • Unsafe-url: It allows the full referrer URL to be sent, regardless of the protocol or origin of the destination. It overrides any security policies enforced by default by web browsers, offering the least privacy and security.

'rel=noreferrer noopener' Screen 2

Under the current settings, the new document will open external links in a new tab, and the following tab-napping script, which exploits the way links open, runs successfully.

So, what happens if we use the “rel=noopener noreferrer”>

“rel=noopener noreferrer”> screen 3

If we modify the referral and opener policy, the following changes will take place:

#1: The same tab napping attempt is unsuccessful as the current document doesn’t gain access to the Window.opener property:

“rel=noopener noreferrer”> screen 4

#2: There is no referrer header or URL if the link is specified as target _blank no referrer:

“rel=noopener noreferrer”> screen 5

Now, let’s run a small experiment with the referral policy:

“rel=noopener noreferrer”> screen 6

If the referral policy is set as Strict-origin-when-cross-origin, here is what we get:

Here is what we get referral policy Strict-origin-when-cross-origin

Does rel=”noopener noreferrer” Affect SEO?

SEO picture

When it comes to the rel=”noopener noreferrer” attribute and its impact on SEO, it’s important to note that this combination doesn’t have a direct negative effect on your website’s search engine rankings. However, it can affect SEO indirectly in specific scenarios, especially when considering the use of the noopener tag.

By using the noopener tag or a few noopener tags, you ensure that when users click on a link opening a new tab, the linked page cannot manipulate the referring page, enhancing user security and trust in their online experience.

On the other hand, the rel=”noreferrer” tag primarily focuses on privacy. This HTML noreferrer attribute conceals referral information when users click on a link, making it appear as direct traffic in Google Analytics rather than referral traffic. This is often employed when you want to keep the source site anonymous from your competitors or the webmasters you are linking to while still considering the nuances of referral traffic.

This special HTML attribute is commonly employed when website owners don’t want to endorse or vouch for the credibility of the linked content, such as user-generated posts. It plays a crucial role in maintaining the integrity of SEO strategies by preventing the transfer of SEO benefits to a specific external website.

Note: Using the rel=”noreferrer” attribute for internal links will mess up the Google Analytics report. It is recommended not to use them for internal links, as it can impact your ability to accurately analyze referral traffic coming within your own , for example, WordPress website.

That said, there are three main rel attributes, including the ”nofollow” attribute, that have a direct and negative impact on SEO, including:

  • rel=”nofollow” attribute: This rel attribute acts as a directive to search engines not to follow a specific link and not to pass any PageRank or authority to the linked blog post.
  • rel=”ugc”: The value is assigned to WordPress links generated as part of content created by your target website audience, such as blog comments and forum posts.
  • Sponsored: It marks the link as sponsored, meaning that it has been paid for and not generated organically.

Google has explicitly stated that it will not follow links marked with these rel attributes and therefore not pass any link juice/equity. Don’t create links using the attributes unless it’s necessary to do so.

rel=”external” is a link attribute that tells search engines the link is on another domain. It also lets CSS attribute selectors style external links differently from local links.

SEO Implications of rel= “noopener noreferrer”

Using “rel=noopener noreferrer” in your website’s external links can have various implications for SEO, backlink strategies, and site analytics, including Google Analytics. Let’s delve into the overall impact and address common misconceptions:

When you implement “rel=noopener noreferrer” in your external links, you enhance website security and improve the user experience. This contributes positively to your site’s trustworthiness and safety, impacting your link building efforts by creating a safer and more reliable online destination for potential link partners.

While “rel=noopener noreferrer” does not directly impact SEO rankings, it maintains the credibility of your site. It ensures that your outbound links,also known as outgoing links or external links, do not lead to malicious or spammy content, portraying your site as a responsible and safe online destination.

Regarding backlink strategies, rest assured that using “rel=noopener noreferrer” on outbound links does not harm your strategies. It does not devalue your links or affect how search engines perceive them, which is vital for maintaining the effectiveness of your external link strategies.

However, it’s essential to be aware of its impact on site analytics, including Google Analytics. Using the “noreferrer tag” prevents the receiving site from identifying your site as the source of incoming traffic. This results in a loss of referrer data, making it challenging to track the effectiveness of your outbound links in terms of direct traffic and conversions on the linked site. This may require alternative methods for link attribution and tracking.

“rel=noopener noreferrer tag” offers critical security and user experience benefits without directly influencing SEO rankings. It is a responsible practice that any site owner can adapt to balance security and analytics considerations that will ultimately safeguard the site and users while maintaining credibility.

Conclusion: Understanding ‘what is rel noopener’ and ‘what does rel noopener mean’

In conclusion, grasping the meaning of “rel=noopener” is essential in web development and online security. This attribute of HTML, when applied to hyperlinks, serves to enhance security and improve the user experience.

“rel=noopener” helps bolster a security measure by preventing newly opened tabs or windows from gaining access to the window.opener property of the original page, shielding against potential malicious links and actions. This practice is particularly important, and web developers, including those using content management systems like WordPress, should be aware of its significance, as WordPress adds this attribute for security purposes.

It also enhances the user experience by ensuring that clicking a link with “target=_blank” does not disrupt the user’s current browsing session, contributing to a smoother and safer online experience.

While “rel=noopener” does not have a direct impact on SEO rankings, it indirectly influences user trust, engagement, and satisfaction, which can, in turn, affect SEO indirectly.

In addition, this attribute is a responsible practice in modern web development, striking a balance between the site’s security and the user experience. Understanding “what is rel=noopener” and “what does rel=noopener mean” empowers web developers and other website owners to create safer and more user-friendly online environments while maintaining the credibility of their websites.

Frequently Asked Questions

What is an example of a Noopener?

An example of ‘noopener’ in HTML is the following link: <a href=”” target=”_blank” rel=”noopener”>Visit Example</a>. This ensures the linked page can’t control the referring page, which opens in a new tab.

Is rel=noopener still needed?

Yes, the attribute serves an important role in modern web development as it enhances security if you’re at risk of opening untrusted links in new tabs. It prevents the new window from gaining browsing context access to the parent tab, essentially isolating them. In fact,  WordPress automatically adds ‘rel=noopener’ to external links that open in a new tab or window (check out the WordPress site Codex for more details on WordPress website links).

How does rel=”noopener noreferrer” affect affiliate links?

rel=”noopener noreferrer” does not inherently interfere with the tracking functionality of most affiliate programs. Affiliate programs typically rely on a unique affiliate ID or cookies to track referrals and attribute commissions to affiliate marketers. However, it’s advisable to test the behavior of affiliate links with noopener noreferrer tags to ensure that they still track correctly.

What does link rel mean?

According to W3 Schools, it’s an attribute that helps set how the current document will interact with the linked document. And it can take on a number of tags, including nofollow, noreferrer, and noopener.

Dmytro Gorbenko
SEO Team Lead

Dmytro і а SEO Team Lead at Backlinkers. He has more than 5 years of experience in managing SEO teams. He shares practical advice and gives link-building ideas to improve your results.

You can call us right now

For each type of links, we have worked out a well-thought process that allows you to get backlinks effectively.

Mastering Backlink Indexing: How to Effectively Index Your Backlinks

Google takes anywhere from one hour to several weeks to index newly published web pages. This can be an issue if you’ve received a backlink from another domain and want Google to distribute page authority to your site as quickly as possible.  Google will eventually find most of the pages linking to you during its normal crawls. But we don’t want that!...

Referring Domains vs Backlinks: Comprehensive SEO Guide

The ultimate goal of every link builder is to build a strong backlink profile. This is where high-quality backlinks and referring domains come in. For example, a website that has 1000 links from 10 sources is not as strong as a website that has 1000 links from 1000 different websites. The latter website has more trust, more prominence, and more relevance...

Editorial Links: How to Optimize Your Site with This Link Building Strategy

Editorial links are a form of endorsement from other websites that vouch for the quality and relevance of your content. Search engines value editorial links highly because they indicate that reputable sources find your website trustworthy, authoritative, and useful for users. In this article, you will learn why editorial link building is crucial for SEO...