In modern HTML development, you’ll often encounter the attribute rel="noopener noreferrer" in external links. It may seem confusing at first, but this simple snippet plays an important role in web security and privacy. Whether you’re managing your own site or using a CMS like WordPress, understanding how and when to use rel="noopener noreferrer" is essential.

Summary: This beginner-friendly tutorial explains what rel=”noopener noreferrer” means in HTML, why it’s important for link security and privacy, and how to use it correctly, especially when opening links in new tabs with target=”_blank”. You’ll learn the difference between noopener and noreferrer, how WordPress handles these attributes automatically, and when not to use them. Includes examples, SEO impact, developer tips, and real-world use cases.

This tutorial explains what the attribute means, how it works, when to use it, and whether it affects SEO. Beginners will find this guide useful to write safer HTML and make informed decisions about external links.

Table of Contents

  1. What is rel="noopener noreferrer"?
  2. Why You Should Use rel="noopener noreferrer"
  3. How to Use rel="noopener noreferrer" Correctly
  4. HTML Examples with noopener noreferrer
  5. Does rel="noopener noreferrer" Affect SEO?
  6. WordPress and rel="noopener noreferrer"
  7. Common Misconceptions
  8. When Not to Use noreferrer
  9. Developer Tips for Link Security
  10. Advanced FAQs

What Does rel="noopener noreferrer" Mean?

The rel attribute in HTML defines the relationship between the current document and the linked one. When using rel="noopener noreferrer", you’re combining two specific values noopener and noreferrer to improve link behavior. These attributes are most often used with target="_blank", which opens links in a new tab.

Each part serves a distinct purpose. noopener prevents the new tab from accessing your original page’s window object, and noreferrer ensures that the destination page won’t receive information about your page’s URL. Combined, they enhance both privacy and security.

Key points:

  • rel="noopener" protects against tabnabbing by disabling access to window.opener.
  • rel="noreferrer" hides the referrer information from the destination site.
  • Best used together with target="_blank" in external links.

Why Use rel="noopener noreferrer"?

Security is the main reason people add rel="noopener noreferrer" to links. Without noopener, external pages opened in a new tab can potentially manipulate your original page via JavaScript. This is known as a tabnabbing attack, which could redirect users to phishing pages. Adding noopener prevents this.

The noreferrer attribute adds a layer of privacy by not sending the referring page’s URL to the destination. While this can sometimes interfere with affiliate tracking, it’s useful in cases where user privacy is a priority.

Why it matters:

  • Prevents malicious sites from accessing and modifying your page.
  • Helps avoid phishing and tabnabbing attacks.
  • Stops passing referral data, which can be useful for privacy-conscious websites.

When Should You Use rel="noopener noreferrer"?

You don’t need to use rel="noopener noreferrer" on every link, but it is strongly recommended when using target="_blank". Opening links in new tabs introduces potential vulnerabilities if left unprotected. These attributes are especially important when linking to third-party content or untrusted sources.

For WordPress users, these values are often added automatically for security reasons. However, knowing when and why to use them helps you maintain control over your site’s behavior.

Use it when:

  • Linking to external websites using target="_blank".
  • Adding affiliate or monetized outbound links.
  • Publishing guest posts or linking to unverified sources.
  • You want to protect users and keep their session secure.

How to Add rel="noopener noreferrer" in HTML

Adding the attribute is simple. In HTML, you add it directly to the anchor tag that includes target="_blank". If you’re using a CMS like WordPress, most modern editors will include it for you automatically. Still, it helps to know how to add or modify it manually when needed.

If you’re editing raw HTML or working with custom templates, here’s what the correct implementation looks like.

Examples and tools:

  • Basic syntax:
    <a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit Example</a>
  • In WordPress block editor, it’s automatically applied.
  • In Classic Editor, add it manually under the “Text” tab.
  • Some plugins allow you to customize rel attributes easily.
Pro Tip: Validate with Browser Dev Tools
Right-click a link → Inspect Element → Confirm rel=”noopener noreferrer” is present. Check that the browser console doesn’t throw any security-related warnings.

Does rel="noopener noreferrer" Affect SEO?

One common misconception is that rel="noopener noreferrer" might harm SEO. In reality, these values do not impact rankings. Google has publicly stated that using noopener or noreferrer does not affect how your content is indexed or ranked in search results. The only time SEO is impacted is when nofollow is used, which stops passing link equity.

That said, noreferrer does hide referrer data, which could affect analytics or affiliate systems. Be cautious with it if tracking is a core part of your strategy.

What to remember:

  • Google does not penalize links using noopener noreferrer.
  • noreferrer disables referrer data, which may affect affiliate tracking.
  • nofollow is the attribute that influences SEO, not noopener or noreferrer.

How WordPress Handles rel="noopener noreferrer"

Starting with WordPress version 4.7.4, all external links with target="_blank" automatically get rel="noopener noreferrer" added for security. This change protects users from tabnabbing without requiring manual input. While this is a good feature, some users might be surprised to see these attributes in their HTML editor or page source.

There are cases where you may want to remove or modify these attributes, such as preserving referrer data for analytics or affiliate programs. Plugins can help manage this behavior.

Important notes:

  • WordPress automatically adds rel="noopener noreferrer" for target="_blank" links.
  • Some plugins allow removal or customization:
    • WP External Links
    • Remove noreferrer
  • Generally, it’s recommended to keep these attributes enabled for safety.

Common Mistakes and Best Practices

Many developers confuse noreferrer, nofollow, and noopener. While they all live within the rel attribute, they serve different purposes. Misusing them could lead to loss of traffic insights or create potential security risks. Always review your links, especially those that open in new tabs and apply best practices consistently.

Avoid overusing noreferrer where referrer data is important and don’t forget to use noopener when using target="_blank" to avoid security gaps.

Best practices:

  • Always use noopener with target="_blank".
  • Use noreferrer when you want to hide referral info.
  • Combine with nofollow when linking to untrusted sources.
  • Don’t use noreferrer if you rely on referrer analytics.
  • Don’t confuse noreferrer with nofollow.

Do You Really Need rel="noopener noreferrer"?

Yes, for most external links that open in a new tab, using rel="noopener noreferrer" is a best practice. It helps maintain site security, user trust, and even keeps your content compliant with what modern browsers expect. While noreferrer should be used thoughtfully, noopener is almost always a must when using target="_blank".

Use this attribute as a small but powerful way to make your site safer and more professional.

When to use it:

  • External links with target="_blank"
  • Affiliate or outbound links
  • Third-party or untrusted content
  • Internal links that open in the same tab
  • When referral data is essential and noreferrer blocks it

Frequently Asked Questions

1. Can I use rel="noopener noreferrer" on internal links?

While technically allowed, it’s unnecessary. These attributes are primarily designed for external links with target="_blank". Using them on internal links doesn’t provide any added security and may negatively affect internal analytics if noreferrer is used.

2. What happens if I only use noopener without noreferrer?

If you only use noopener, the new tab won’t have access to the original tab’s window.opener, which prevents tabnabbing. However, the referrer data (your page URL) will still be passed to the target site. This is often preferred when you want security but still want referral tracking to function.

3. Is there a performance impact when using rel="noopener noreferrer"?

No, using rel="noopener noreferrer" has no measurable impact on website performance or page load times. It’s a metadata attribute, processed instantly by the browser.

4. Can I dynamically add rel="noopener noreferrer" with JavaScript?

Yes, developers can use JavaScript to dynamically assign these attributes to anchor tags, especially when rendering links via APIs or SPAs. Example:

document.querySelectorAll('a[target="_blank"]').forEach(link => {
  link.setAttribute('rel', 'noopener noreferrer');
});

5. Does rel="noopener noreferrer" work in all browsers?

Yes, modern browsers like Chrome, Firefox, Safari, and Edge fully support noopener and noreferrer. Older versions of Internet Explorer (pre-11) may not fully support noopener, so fallback logic may be necessary if supporting legacy browsers.