Rel=Noopener Noreferrer: What It Means For Your Website Security?

Rel=”noopener noreferrer” is a key HTML attribute that plays an important role in website security and performance. It’s often added to links that open in a new tab or window to protect your site from potential security vulnerabilities and privacy issues.

This attribute prevents malicious code from accessing your original page and stops referrer information from being shared with the destination site. For SaaS businesses, especially those using WordPress, these attributes are commonly added automatically to external links for security reasons.

At VH Info, we prioritize these best practices in our SaaS link building strategies to enhance site security, improve user experience, and maintain search engine optimization (SEO) standards.

Understanding how these attributes work can help site owners protect their websites while ensuring smooth navigation for users.

What Is Rel=“Noopener Noreferrer”?

The rel=”noopener noreferrer” is a combination of two separate HTML attributes that are applied to links, particularly those opening in a new tab or window through the target=“_blank” attribute.

In HTML, when you create a link that opens in a new tab, the code typically looks like this:

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

This attribute combination serves two distinct purposes:

1. The “noopener” portion prevents the new page from accessing the original page via JavaScript.
2. The “noreferrer” part stops the browser from sending referrer information to the target resource.

These attributes were introduced to address specific security vulnerabilities and privacy concerns associated with external links on websites.

What Is Rel=“Noreferrer”?

The rel=”noreferrer” attribute tells browsers not to send referrer information when a user clicks on a link. Normally, when someone clicks from your site to another, the destination site can see where the visitor came from in their Google Analytics or other analytics tools.

When rel=”noreferrer” is applied:

• The HTTP header doesn’t include the referrer information
• The click appears as direct traffic rather than referral traffic in analytics
• The destination site can’t tell that the visitor came from your website

When Should You Use rel=“noreferrer” On External Links?

You should consider using the rel=”noreferrer” attribute in these scenarios:

• When linking to external websites, you don’t want to know you’re sending them traffic
• For privacy reasons, when you don’t want to share user browsing patterns
• When linking to competitors but don’t want them to know about the referral
• For affiliate links where you prefer to mask the origin of traffic

However, keep in mind that using rel=”noreferrer” means you won’t get credit for sending traffic to other sites, which can affect relationship building with other site owners.

What Is Rel=“Noopener”?

The rel=”noopener” attribute addresses a specific security vulnerability associated with links that open in a new tab or window (using target=”_blank”).

Without this attribute, the new page gains partial access to the original page through the JavaScript window.opener property.

This access creates a potential security risk known as “reverse tabnabbing,” where a malicious site opened in a new browser window could potentially redirect your original page to a phishing site or execute other harmful actions.

Noopener Is Essential To Website Security

For website security, the noopener attribute is particularly important.

When a link includes target=“_blank” without rel=”noopener”:

• The new page has access to the window.opener property
• The linked page can run on the same process as your website
• Malicious code could potentially manipulate the original page

This potential security vulnerability can be exploited to run phishing attacks or other malicious actions against your visitors. By adding rel=”noopener”, you break this connection between windows, ensuring that the new page can’t access or manipulate the original page.

What About Internal Links?

For internal links on your own website, the security risks are minimal since you control both the source and destination pages. However, many developers and WordPress sites add rel=”noopener” to all target=”_blank” links for consistency and as a best practice.

At VH Info, we recommend applying these security attributes even to internal links as a universal best practice to maintain consistent security protocols across your entire site.

Rel=“Noopener Noreferrer” in WordPress

WordPress began automatically adding rel=”noopener noreferrer” to all links with target=”_blank” in version 4.7.4 (released in April 2017) to protect users from the reverse tabnabbing vulnerability.

This security feature works in the background without changing how links appear or function to users. When you add a link in WordPress and select “Open in new tab,” the system automatically adds the rel=”noopener noreferrer” attribute to the HTML code.

Can You Remove It?

Yes, you can remove the automatic addition of rel=”noopener noreferrer” in WordPress if needed, though we generally don’t recommend it for security reasons. If you must remove it, you can add this code to your theme’s functions.php file or use a code snippet plugin:

function remove_noreferrer($content) {return str_replace(‘ rel=”noopener noreferrer”‘, ‘ rel=”noopener”‘, $content);} add_filter(‘the_content’, ‘remove_noreferrer’);

This code will keep the security benefits of noopener while removing the noreferrer portion.

How Does Rel=”Noopener Noreferrer” Affect Your Website?

Adding rel=”noopener noreferrer” to external links impacts your website in several ways:

1. Security Enhancement: It prevents potential exploitation through the window.opener JavaScript property.
2. Analytics Impact: The noreferrer portion means your website won’t appear as a referrer in the analytics of sites you link to.
3. Performance Benefits: Links with rel=”noopener” can perform better because the new page runs in a separate process, preventing performance issues in the original tab.
4. Relationship Implications: Other site owners won’t see traffic coming from your site in their analytics when you use noreferrer, which could affect relationship building with potential partners.

At VH Info, we carefully balance these considerations when implementing link building strategies for our SaaS clients, ensuring both security and optimal relationship building with potential partners.

Does Rel=”Noopener Noreferrer” Affect SEO?

The good news is that using rel=”noopener noreferrer” has minimal direct impact on your search engine optimization efforts. Google and other search engines don’t consider these attributes when determining link value or crawling web pages.

Unlike the nofollow attribute (which we’ll discuss next), noopener and noreferrer don’t tell search engine crawlers to ignore links or prevent the passing of “link juice.”

What Is The rel=“nofollow Attribute?

The rel=”nofollow” attribute is different from noopener and noreferrer. When added to a link, it instructs search engine crawlers not to follow the link and not to pass PageRank or “link juice” to the linked page.

This attribute is often used for:

• User-generated content like comments
• Paid links
• Pages you don’t want to endorse
• Links to pages you don’t want indexed

The HTML syntax looks like this:

<a href=”https://example.com” rel=”nofollow”>Link text</a>

You can also combine it with other rel values:

<a href=”https://example.com” target=”_blank” rel=”nofollow noopener noreferrer”>Link text</a>

They Have A Slight Indirect Impact In Some Situations

While rel=”noopener noreferrer” doesn’t directly affect SEO, there are some indirect implications:

• Better User Experience: By preventing security issues, you provide a safer browsing experience, which is a factor in SEO.
• Site Speed Considerations: The noopener attribute can improve performance slightly by ensuring the linked page runs in a separate process.
• Relationship Building Limitations: The noreferrer attribute can affect your ability to get noticed by other site owners, potentially limiting natural backlink opportunities.

Will rel=“noopener noreferrer” Affect Affiliate Links?

For affiliate links, rel=”noopener noreferrer” doesn’t affect the tracking of clicks or commissions. Affiliate tracking typically works through URL parameters or cookies rather than referrer information.

However, some affiliate networks might use referrer data as a secondary tracking method or for fraud prevention. If you’re concerned, test your affiliate links with these attributes or check with your affiliate program.

Most Browsers Automatically Imply rel=“noopener”

As of 2025, most modern browsers automatically implement noopener-like behavior for links with target=”_blank”, even without the explicit attribute. This includes:

• Chrome and Chromium-based browsers (like Edge)
• Safari
• Firefox

However, explicitly adding rel=”noopener” is still considered best practice for several reasons:

• It ensures compatibility with older browsers
• It makes your security practices explicit and documented
• It follows web standards and security recommendations

The noreferrer behavior, on the other hand, is not automatically implemented and must be explicitly added if desired.

Difference Between Rel=Noopener and Rel=Nofollow

As the table shows, noopener focuses on security concerns, while nofollow focuses on search engine instructions.

Advantages Of Rel=Noopener and Rel=Nofollow

Rel=Noopener Advantages:

• Protects against reverse tabnabbing attacks
• Improves browsing security for your visitors
• Can slightly improve performance of new tabs
• Supported by all modern browsers
• Has no negative SEO implications

Rel=Nofollow Advantages:

• Controls which external links receive “link juice“
• Helps with SEO by directing link equity to important pages
• Prevents search engines from following certain links
• Useful for user-generated content to prevent spam
• Identifies paid links or advertisements for search compliance

Disadvantages Of Rel=Noopener and Rel=Nofollow

Rel=Noopener Disadvantages:

• Adds slightly more HTML code
• May be redundant in the newest browsers (but still recommended)
• Requires understanding of security concepts

Rel=Noreferrer Disadvantages:

• Prevents destination sites from seeing your site as a referrer
• May limit relationship-building opportunities with other site owners
• Makes tracking cross-site traffic more difficult

Rel=Nofollow Disadvantages:

• Prevents passing beneficial link signals to worthy sites
• May limit the natural linking ecosystem of the web
• Requires careful implementation to avoid over-using

How “Noopener” and “Noreferrer” Work?

Understanding the technical aspects helps clarify why these attributes matter.

The “Noopener” Tag

When a link with target=”_blank” is clicked:

• The browser opens a new tab or window
• Without noopener, the new page can access the opener page through window.opener
• With noopener, the window.opener property is null
• This breaks the connection between the windows, preventing potential manipulation

The key security vulnerability addressed is that malicious code on the destination site could potentially change the content of the original tab, leading to phishing attacks.

The “Noreferrer” Tag

The noreferrer attribute works at the HTTP header level:

• When a user clicks a link, browsers typically send a Referer header (note the spelling)
• This header contains the URL of the originating page
• With noreferrer, this header is omitted
• The destination site can’t determine where the visitor came from

This affects analytics tracking on the destination site, as the visit will appear as direct traffic rather than referral traffic.

Combining The Tags

When combined as rel=”noopener noreferrer”:

• The security benefits of noopener are implemented
• The privacy aspects of noreferrer are applied
• The two attributes work independently to address different concerns
• The syntax allows for the efficient implementation of both features

When To Use “Noopener Noreferrer”?

External Links

For links to external websites, especially those opening in new tabs:

• Always use rel=”noopener” for security reasons
• Add rel=”noreferrer” if you want to hide referrer information
• Consider the balance between security and relationship building
• Implement consistently across your site

Affiliate Links

For affiliate links, consider these factors:

• Use rel=”noopener” for security regardless of affiliate status
• Check if your affiliate program relies on referrer information
• Test tracking with rel=”noreferrer” if unsure
• Consider using rel=”sponsored” alongside these attributes to comply with search engine guidelines

User-Generated Content

For links in comments, forums, or other user-generated content:

• Always use rel=”noopener noreferrer” for security
• Consider adding rel=”nofollow” to prevent passing link equity
• Implement automatically through your CMS if possible
• Monitor and moderate UGC links regularly

Untrusted Websites

When linking to sites you don’t fully trust:

• Always use rel=”noopener” to prevent security exploits
• Consider using rel=”noreferrer” to mask the traffic source
• Evaluate if rel=”nofollow” is also appropriate
• Warn users when linking to potentially unsafe sites

FAQ’s:

What Is The Main Difference Between “Rel=Noopener” and “Rel=Noreferrer”?

The main difference is in their purpose: rel=”noopener” is a security feature that prevents the linked page from accessing the window.opener property, protecting against reverse tabnabbing attacks.

In contrast, rel=”noreferrer” is a privacy feature that prevents passing referrer information to the destination site, making your site invisible in their analytics as a traffic source.

Do “Rel=Noopener” and “Rel=Noreferrer” Affect How Search Engines Crawl Links?

No, neither rel=”noopener” nor rel=”noreferrer” affects how search engines crawl or value links.

They don’t prevent search engine crawlers from following links or passing link equity (unlike rel=”nofollow”). These attributes only affect browser behavior and user experience, not search engine algorithms.

Can I Use “Rel=Noopener” and “Rel=Noreferrer” Together?

Yes, you can and often should use them together.

The combined syntax is rel=”noopener noreferrer” which applies both security and privacy features to the link. This combination is automatically added by WordPress and many other CMS platforms for external links that open in new tabs.

Is “Rel=Noopener” Necessary If I’m Not Using “Target=”_Blank”?

No, rel=”noopener” is only needed for links that open in new tabs or windows (using target=”_blank”).

If your link opens in the same tab, there’s no window.opener vulnerability to address, so noopener isn’t necessary. However, rel=”noreferrer” can still be used regardless of whether the link opens in a new tab.

Will Using “Rel=Noreferrer” Affect Tracking Analytics On The Destination Site?

Yes, using rel=”noreferrer” will affect how the destination site sees traffic from your site.

Instead of appearing as referral traffic from your domain in their Google Analytics, visitors will show up as direct traffic. This means the destination site won’t know that visitors came from your website.

Conclusion

The rel=”noopener noreferrer” attributes play an important role in website security and user privacy.

While rel=”noopener” protects against potential security vulnerabilities by preventing access to the window.opener property, rel=”noreferrer” adds a layer of privacy by hiding referrer information.

For SaaS businesses building their online presence, implementing these attributes correctly is a balance between security, privacy, and relationship building. Most modern browsers automatically implement noopener-like behavior, but explicitly adding these attributes remains a best practice for comprehensive protection.

At VH Info, we implement these security best practices in all our SaaS link building services, ensuring our clients’ websites are both secure and optimized for search engines. While these attributes have minimal direct impact on SEO (unlike the rel=”nofollow” attribute), they contribute to a secure user experience that search engines value.

Remember that proper implementation of HTML link attributes is just one aspect of a comprehensive SEO and security strategy.

For more guidance on SaaS link building and SEO optimization, contact our team at VH Info—we’re here to help your SaaS business grow through strategic, secure, and effective link building techniques.