Noreferrer: What It Is & Why It Matters for Website SEO

Understanding the Noreferrer Attribute: What Every Marketer Should Know

In the complex world of digital marketing, little details can make big differences. One such detail that often flies under the radar but carries significant implications for your website’s security and SEO performance is the “noreferrer” attribute. If you’ve noticed this mysterious code snippet in your HTML but aren’t sure what it does or why it matters, you’re not alone.

Many marketing professionals I’ve consulted with have expressed confusion about this attribute, and some have inadvertently compromised their site security or analytics data by mishandling it. In this comprehensive guide, we’ll demystify the noreferrer attribute and explain why it should be part of your digital marketing toolkit.

What is the Noreferrer Attribute?

The noreferrer attribute is an HTML attribute that you can add to your hyperlinks (a tag) to control what information is passed to the destination website when a user clicks on the link. When you include rel=”noreferrer” in your link, you’re instructing the browser not to send the HTTP referer header to the target website.

In simpler terms, when someone clicks a link on your website that contains the noreferrer attribute, the destination site won’t know where the visitor came from. It’s like entering a store through a secret door rather than the main entrance where the shopkeeper can see you arriving.

The syntax for implementing the noreferrer attribute is straightforward:

<a href="https://example.com" rel="noreferrer">Link Text</a>

This simple addition to your HTML can have significant implications for both security and analytics, which we’ll explore further in this article.

Noreferrer vs. Noopener: Understanding the Difference

While browsing through code or reading about link attributes, you may have encountered both “noreferrer” and “noopener.” These attributes serve different purposes, although they’re often used together.

The noopener attribute specifically addresses a security vulnerability known as “window.opener exploitation.” When you open a link using target=”_blank” (which opens the link in a new tab), the new page gains partial access to your page through the window.opener property. This can potentially be used for phishing attacks or to redirect your page to malicious content.

The noreferrer attribute, as we’ve discussed, prevents the browser from sending the HTTP referer header. It also includes the functionality of noopener, making it a more comprehensive security measure.

Many developers and content managers use both attributes together for maximum security and browser compatibility:

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

SEO Implications of Using Noreferrer

As a marketer, you’re likely concerned about how the noreferrer attribute might impact your SEO efforts. Let’s break down the key considerations:

Link Equity and Passing Authority

One of the most common questions I receive from clients is whether using noreferrer affects link equity or “link juice” passing. The good news is that the noreferrer attribute does not prevent search engines from following the link or passing link equity. Google and other search engines still see and count these links, regardless of the referrer information being blocked.

Analytics and Traffic Attribution

Where noreferrer does have an impact is on analytics. If you link to another site using noreferrer, your website won’t appear as a referrer in their analytics. Conversely, if other sites link to you using noreferrer, those visits will typically show up as “direct traffic” rather than referral traffic in your analytics platform.

For marketers who rely heavily on affiliate marketing or need precise attribution data, you might consider using UTM parameters in addition to the noreferrer attribute. This allows you to track clicks while maintaining the security benefits:

<a href="https://example.com?utm_source=yoursite&utm_medium=referral&utm_campaign=article" rel="noreferrer noopener" target="_blank">Link Text</a>

Security Benefits of Implementing Noreferrer

Website security isn’t just for developers and IT teams. As a marketer, protecting your users and your brand reputation includes implementing proper security measures like the noreferrer attribute.

Preventing Window.opener Exploitation

As mentioned earlier, the noreferrer attribute helps prevent window.opener exploitation, which is a genuine security concern. Without this protection, malicious websites could potentially:

• Redirect your original page to phishing sites
• Access limited information about your page
• Create convincing social engineering attacks by knowing where the user came from

Protecting User Privacy

By not sending referrer information, you’re also respecting user privacy. This can be particularly important when linking to third-party sites from pages containing sensitive information or when privacy regulations are a concern.

How to Implement Noreferrer Correctly

Now that you understand the importance of the noreferrer attribute, let’s look at how to implement it correctly across your website.

Manual Implementation

For individual links, simply add the rel=”noreferrer” attribute (or rel=”noreferrer noopener” for maximum compatibility):

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

CMS and Website Builders

Many content management systems have options to automatically add these attributes to external links:

• WordPress: This functionality is built into recent versions. You can also use plugins like “External Links” for more control.
• Shopify: Most themes automatically add noopener and noreferrer to external links.
• Wix and Squarespace: These platforms typically add these attributes automatically.

Bulk Implementation

For sites with many external links, consider using JavaScript to add the attribute to all appropriate links:

document.addEventListener('DOMContentLoaded', function() {
  var externalLinks = document.querySelectorAll('a[target="_blank"]');
  externalLinks.forEach(function(link) {
    if (link.hostname !== window.location.hostname) {
      link.setAttribute('rel', 'noreferrer noopener');
    }
  });
});

Common Misconceptions About Noreferrer

Throughout my years consulting with businesses on their digital marketing, I’ve encountered several misconceptions about the noreferrer attribute:

Misconception #1: Noreferrer Hurts SEO

As we’ve covered, noreferrer does not negatively impact SEO value. Links with this attribute still pass link equity and are followed by search engines.

Misconception #2: Noreferrer Is Only for Security Experts

While it does provide security benefits, implementing noreferrer is simple enough for anyone managing website content and should be considered a basic best practice.

Misconception #3: Nofollow and Noreferrer Are the Same

These attributes serve different purposes. Nofollow tells search engines not to follow the link or pass link equity, while noreferrer controls referrer information passing.

Frequently Asked Questions About Noreferrer

Conclusion: Implementing Noreferrer as Part of Your Marketing Strategy

The noreferrer attribute represents the intersection of marketing, user experience, and security. By understanding and properly implementing this simple HTML attribute, you can:

• Enhance your website’s security posture
• Protect your visitors’ privacy
• Maintain SEO benefits while linking to external resources
• Demonstrate technical proficiency in your digital marketing approach

As digital marketing continues to evolve, paying attention to these technical details can give you a competitive edge. The noreferrer attribute is a perfect example of how small implementations can have meaningful impacts on your website’s performance and security.

Remember, while noreferrer might seem like a minor technical detail, it reflects a commitment to security best practices that both users and search engines increasingly value.