In the world of web development, HTML links are the backbone of navigating between web pages. However, even these fundamental elements can carry security risks. That’s where the rel=”noopener noreferrer” tag comes into play, offering a layer of protection for your website and its visitors.

What are the Parts of this Tag?

Let’s break down the two components of this tag:

  • noopener: This part addresses a security vulnerability that arises when you open links in new tabs or windows using the target=”_blank” attribute. A malicious website opened this way could gain partial control of the original window (the one where you clicked the link). The noopener attribute prevents this by severing the connection between the newly opened tab and the original page.
  • noreferrer: This part is about privacy. When you click a link, the website you land on usually gets information about where you came from (the referrer). The noreferrer attribute hides this referrer information. This can be helpful when linking to external sites that you might not necessarily endorse and want to protect your visitors’ privacy.

Why Use “noopener noreferrer”?

  1. Security: This tag is primarily used to enhance security. By preventing newly opened tabs or windows from controlling the original page, you safeguard your users from potential exploits.
  2. Privacy: If you don’t want to pass on referrer information to external websites, the noreferrer attribute ensures your visitors’ browsing history remains a little more private.
  3. Performance (Indirect):  While not a direct effect, noopener can lead to minor performance improvements. Without that connection to the original page, the new tab may load marginally faster.

How to Use the Tag

Incorporating rel=”noopener noreferrer” into your HTML links is straightforward:

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Visit Example Website</a>

WordPress Note: WordPress automatically adds this tag to any links you set to open in a new tab or window, offering built-in protection.

Should I Always Use It?

While it’s generally considered a good practice to use rel=”noopener noreferrer” on external links, there are some exceptions:

  • Trusted Websites: If you’re linking to well-known, trustworthy websites, you may omit the tag.
  • Internal Links: There’s no need to use this tag when linking to pages within your own website.

Impact on SEO

The good news is that using rel=”noopener noreferrer” should have no direct negative impact on your website’s search engine optimization (SEO). That said, the noreferrer component might make it harder to track referral traffic within analytics tools if you rely on that data heavily.

The rel=”noopener noreferrer” tag might seem like a small detail, but it plays a significant role in website security and user privacy. By understanding and incorporating this tag, you create a safer and more responsible online experience.

Understanding the Basics of rel=”noopener noreferrer” tag 

HTML Links and the target=”_blank” attribute

The foundation of navigating the web lies in the humble HTML link, often represented by the <a> tag. Let’s break it down:

  • The basic structure: <a href=”https://www.examplewebsite.com”>Click here for Example Website</a>
  • href specifies the link’s destination
  • The text between the opening <a> and closing </a> tags is what the user sees and clicks on.
  • The magic of target=”_blank”:  This attribute tells the browser to open the link in a new tab or window, offering a smoother user experience when you want to keep visitors on your site while allowing them to explore additional resources.

Potential Security Vulnerabilities

While convenient, the target=”_blank” attribute, when used without safeguards, can inadvertently open a window of opportunity for malicious actors. Here’s why:

The window.opener property:  In a normal scenario, websites have limited access to other tabs or windows you have open. However, when a new tab is opened using target=”_blank”, a special JavaScript property called window.opener establishes a link back to the original tab or window.

The risks of manipulation: Should a malicious website gain access to window.opener, it has the potential to:

  • Redirect the original tab to a harmful website (phishing, malware distribution, etc.)
  • Inject unwanted content or advertisements into your website
  • Launch deceptive pop-ups or overlays to trick visitors
  • Exploit a class of attacks known as “tabnabbing”

Referrer Information and Analytics

Each time you click a link to navigate from one website to another, your browser usually sends a bit of information known as the “referrer.” This tells the destination website where you came from.  Here’s why it matters:

Understanding visitor traffic: Referrer data is invaluable for website analytics. It helps you:

  • See which websites and backlinks are sending visitors your way.
  • Track the success of marketing campaigns.
  • Understand how people navigate through your website.

Potential privacy considerations: While useful for analytics, referrer information can also raise privacy concerns in certain situations:

  • Sensitive websites (e.g., healthcare, financial) might not want the referrer URL to be openly transmittable.
  • Users concerned about their browsing history being traced might prefer to limit the data websites receive about them.

With a foundation in HTML links, potential vulnerabilities, and referrer information, we’re ready to explore how “noopener” and “noreferrer” help mitigate these risks. 

How “noopener” and “noreferrer”  Work 

The “noopener” Tag

  • The core function: The “noopener” tag severs the JavaScript connection (established through window.opener) between the new tab/window and the original website. This is a crucial security measure.
  • Preventing tab manipulation: By using “noopener,” you essentially tell the browser, “Don’t give the new website any way to mess with the original tab.” This ensures your visitors cannot be unexpectedly redirected or have content modified on your site.
  • Code example:
<a href="https://externalsite.com" target="_blank" rel="noopener">Visit External Site</a>
  • Benefits beyond security: “noopener” can also subtly improve website performance. By blocking this potential control, the browser knows it doesn’t need to dedicate as many resources to monitoring interactions between the tabs.

The “noreferrer” Tag

Controlling referrer information: The “noreferrer” tag instructs the browser to withhold the referrer information when a user clicks the link.  This impacts website analytics tracking.

Privacy and use cases:  Here’s when you might use “noreferrer”:

  • Linking to sensitive websites where anonymity is important.
  • Partner with websites where you want to keep traffic origin details private.
  • Prioritizing user privacy over in-depth traffic analysis

Code example

<a href=”https://externalsite.com” target=”_blank” rel=”noreferrer”>Visit External Site</a>

Combining the Tags

For maximum protection and flexibility, it’s standard practice to combine “noopener” and “noreferrer” together:

Maximizing security: This approach addresses both the risk of tab manipulation and potential privacy or analytics concerns in a single step.

Code example

<a href="https://externalsite.com" target="_blank" rel="noopener noreferrer">Visit External Site</a>

WordPress, Elementor, and “noopener noreferrer”

WordPress Default Behavior

WordPress, known for its commitment to security, takes a proactive stance on the “noopener noreferrer” tags. Here’s what you need to know:

  • Automatic inclusion: Since WordPress version 5.1, “noopener noreferrer” is automatically added to all links set to open in a new tab or window. This ensures that even website owners without in-depth technical knowledge are protected from common vulnerabilities.

Elementor Link Settings

Elementor, the leading WordPress website builder, offers intuitive visual controls to streamline link management, including the option to open links in new tabs:

  • Ease of use: Within Elementor’s editor, when you enable the “Open in new tab” option for any link (buttons, text, images), Elementor automatically inserts “noopener noreferrer” in the background.
  • User-friendly security: This integration empowers Elementor users to create a more secure and user-friendly web experience without manually editing HTML code.

SEO Considerations and Best Practices 

“nofollow” vs. “noreferrer”

While both tags impact links, it’s crucial to remember they serve distinct purposes:

“nofollow” (rel=”nofollow”): This tag primarily instructs search engines not to follow the link or pass any “link juice” (ranking power) to the destination website.  It’s often used for:

  • Paid links or sponsored content
  • Untrusted websites or user-generated comments

“noreferrer”: Focused on security, this tag hides referrer information for privacy and user protection against exploits.

Impact on Referral Traffic

Understanding how “noreferrer” can affect analytics is key to maintaining accurate insights into your website traffic:

Traffic attribution:  Since “noreferrer” obscures the source website, these visits may appear as “direct traffic” in analytics platforms like Google Analytics, making it harder to track where the clicks originated from.

Solutions and workarounds:

  • UTM parameters: Carefully crafted links with UTM codes help preserve tracking details even with “noreferrer” in place.
  • Advanced analytics platforms: Some solutions can automatically recognize known referral sources.

Balancing Security and Functionality

The key is to make informed decisions about when to prioritize security over meticulous traffic attribution:

  • Prioritize security:  Always use “noopener noreferrer” on external links to safeguard your visitors and your website’s reputation.
  • Strategic use of “noreferrer”: If granular referral data is indispensable for particular links (e.g., in-depth campaign tracking), weigh the potential risks before removing the “noreferrer” tag.
  • Internal links: Since you control your own website, you typically don’t need “noopener noreferrer” on internal links for security reasons.

When to Use “noopener noreferrer” 

External Links

  • The golden rule: As a security best practice, always apply “noopener noreferrer”  to any links that lead to websites you don’t own or control. This applies to links in your blog posts, sidebars, navigation, etc.
  • Why it matters:  You can’t guarantee the security practices or intentions of every external website. Proactive protection minimizes the risk of your site and visitors being compromised due to vulnerabilities you can’t influence.

Affiliate Links

Security and analytics: Affiliate links, while necessary for monetization strategies, require added attention:

  • Security: Protect yourself and your visitors from potential manipulation by affiliate partners.
  • Tracking: Use UTM parameters alongside “noreferrer” to preserve campaign tracking details while prioritizing security.

User-Generated Content

  • The importance of vigilance: When your site allows comments, forums, or any form of user-submitted content that includes links, malicious actors may insert harmful links.
  • Automated protection: Many website platforms can automatically add “noopener noreferrer” to user-generated links. Check your settings and use plugins if needed to enforce this security layer.

Untrusted Websites

  • Proceed with caution:  If you find yourself linking to a website that you’re unsure of, even if it’s for informational/comparative purposes,  “noopener noreferrer” offers an extra layer of safety.
  • Prioritizing your site’s reputation: Protecting your visitors from potential dangers strengthens the trust they have in your website.

Beyond “noopener noreferrer” 

Additional Link-Related Security Attributes

While “noopener noreferrer” are stars of link security, it’s worth noting other attributes for specific use cases:

  • rel=”ugc” For user-generated content links, this tag signals to search engines that you didn’t necessarily endorse the linked content.
  • rel=”sponsored”. It is used for paid or sponsored links to ensure transparency for both users and search engines.

Conclusion 

In the interconnected web landscape, understanding seemingly simple concepts like “noopener noreferrer” empowers you to create a safer and more optimized online experience. By prioritizing responsible linking practices, you protect your website, its visitors, and your online reputation.