Noopener Noreferrer: A Practical Guide to These SEO Link Tags

If you’ve ever right-clicked “Inspect” on a link in WordPress and noticed rel="noopener noreferrer" sitting there, you’ve probably wondered: is this helping my SEO, hurting it, or doing nothing at all? You’re not alone. I get asked about these SEO link tags at least twice a month by clients here in Singapore, usually right after they’ve read something alarming on a forum.

Here’s the short version: noopener noreferrer won’t tank your rankings. But understanding exactly what these attributes do, how they interact with your analytics, and when to apply them deliberately (versus letting WordPress slap them on automatically) is the difference between a technically sound site and one that’s leaking data you didn’t know about.

This guide breaks down everything you need to know as a site owner or developer. We’ll go deep into the browser mechanics, walk through real implementation, and cover the edge cases that most guides skip entirely.

What rel=”noopener noreferrer” Actually Does at the Browser Level

Before we talk about SEO impact, you need to understand what’s happening under the hood. When you add rel="noopener noreferrer" to an anchor tag, you’re giving the browser two separate instructions bundled into one attribute. They often appear together, but they solve different problems.

Let’s unpack each one individually, because lumping them together (as most guides do) creates confusion.

rel=”noopener”: Closing a Security Hole

Every time you create a link with target="_blank", you’re telling the browser to open that link in a new tab. Simple enough. But here’s what most people don’t realise: that new tab gets a reference back to your original page through something called window.opener.

This means the page you just linked to can run JavaScript that manipulates your original tab. The most common exploit is called tabnabbing. It works like this:

1. A user on your site clicks an external link that opens in a new tab.
2. The external page (which could be compromised or outright malicious) runs a script: window.opener.location = 'https://fake-login-page.com'
3. Your original tab silently redirects to a phishing page that looks identical to your site’s login.
4. The user switches back to the original tab, sees what looks like a session timeout, and enters their credentials.
5. Those credentials are now stolen.

This isn’t theoretical. Tabnabbing has been documented in the wild since 2010, and it’s particularly dangerous for sites that handle sensitive data. If you’re running an e-commerce store in Singapore, or any site that processes payments and personal information, this matters.

Adding rel="noopener" severs the window.opener connection entirely. The new tab has no reference back to your page. It cannot redirect, modify, or even read your original tab’s URL. One attribute, one line of code, and the vulnerability is closed.

There’s a performance benefit too. Without noopener, the new tab and your original page share the same process in some browsers. This means a resource-heavy external page can slow down your own tab. With noopener, the browser is free to spin up a separate process, keeping your page responsive.

rel=”noreferrer”: Controlling What You Share

The noreferrer attribute handles a completely different concern: information leakage. When your visitor clicks a link and lands on another website, the browser normally sends an HTTP header called Referer (yes, it’s misspelled in the spec, and it’s been that way since 1996).

This header tells the destination site: “This visitor came from bestseo.sg/blog/some-article.” The destination site’s analytics picks this up and logs it as referral traffic from your domain.

When you add rel="noreferrer", the browser suppresses this header entirely. The destination site sees the visit as direct traffic, as if the user typed the URL into their address bar. No referral source is recorded.

Why would you want this? A few reasons:

• Privacy. You may not want the destination site to know your specific page URLs, especially if those URLs contain query parameters, internal campaign tags, or other sensitive path information.
• Competitive intelligence. If you’re linking to a competitor’s resource (it happens), you might not want them seeing exactly which of your pages is sending traffic their way.
• Data hygiene. In some cases, you simply want cleaner control over what information leaves your domain.

It’s worth noting that noreferrer also implies noopener in modern browsers. If you only add rel="noreferrer", most current browsers will automatically treat it as if noopener is present too. However, older browsers don’t always respect this, which is why best practice is to include both explicitly.

The SEO Impact of Noopener Noreferrer: Separating Fact from Forum Panic

Let’s address the question that probably brought you here. Do noopener and noreferrer hurt your SEO? The answer, confirmed by Google’s own documentation and multiple statements from their search team, is no.

Neither attribute is a ranking signal. Neither attribute changes how Googlebot crawls your links, indexes the destination page, or calculates link equity (what SEOs call “link juice”). These are browser-level directives, not search engine directives. Googlebot doesn’t use a browser in the traditional sense when crawling. It doesn’t process window.opener, and it doesn’t send or read referrer headers the way Chrome does.

Here’s a concrete way to think about it. Imagine you run a popular food blog in Singapore and you link to a hawker stall’s website with rel="noopener noreferrer". Google will still:

• Follow that link during crawling.
• Discover and potentially index the hawker stall’s page.
• Pass link authority from your page to theirs.
• Consider the anchor text as a relevance signal for the destination page.

Nothing changes from an SEO perspective. The link functions exactly as it would without these attributes, as far as search engines are concerned.

Where the Confusion Comes From

The panic usually starts because people conflate noreferrer with nofollow. These are fundamentally different attributes that do fundamentally different things. I’ll cover the detailed comparison later in this guide, but the key point is this: nofollow is a search engine directive that affects link equity. noreferrer is a browser directive that affects HTTP headers. They operate in entirely separate domains.

Another source of confusion is that some SEO audit tools flag noopener noreferrer as warnings. Tools like Screaming Frog or Ahrefs might surface these attributes in their reports, not because they’re harmful, but because the tool is cataloguing all rel attributes for your review. Don’t mistake a data point for a problem.

The Indirect SEO Benefits You Shouldn’t Ignore

While there’s no direct ranking benefit, there are indirect effects worth considering. Google’s ranking systems increasingly factor in page experience signals. A site that protects its users from tabnabbing attacks is a more trustworthy site. If a user gets phished through your external link and loses confidence in your domain, that’s a real business problem, even if Google’s algorithm doesn’t directly measure it.

Sites with better security practices tend to have lower bounce rates, longer session durations, and higher return visit rates. In a competitive Singapore market where users are savvy and alternatives are one search away, trust compounds over time. A 3-5% improvement in return visitor rate might not show up in a ranking factor study, but it shows up in your revenue.

Technical Implementation: Step by Step

Let’s get practical. Here’s how to implement these attributes correctly across different scenarios.

Manual HTML Implementation

For any external link opening in a new tab, your markup should look like this:

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

That’s the complete pattern. Three attributes working together: href for the destination, target="_blank" for the new tab behaviour, and rel="noopener noreferrer" for security and privacy.

If you’re not using target="_blank" (meaning the link opens in the same tab), you generally don’t need noopener because there’s no new tab to exploit. You might still want noreferrer for privacy reasons, but the security case disappears.

WordPress: What Happens Automatically

Since WordPress 5.1 (released in early 2019), the platform automatically adds rel="noopener noreferrer" to any link set to open in a new tab through the block editor. You don’t need a plugin for this. It’s baked into core.

However, if you’re editing raw HTML in the code editor, or if your theme generates links programmatically, you’ll need to add these attributes yourself. Don’t assume WordPress handles every link. Check your theme’s template files, especially header navigation, footer links, and sidebar widgets.

Here’s a quick audit you can do right now:

1. Open your site in Chrome.
2. Right-click any external link and select “Inspect.”
3. Look at the anchor tag in the Elements panel.
4. Confirm rel="noopener noreferrer" is present alongside target="_blank".

If it’s missing, you have a gap to fix.

Bulk Implementation with JavaScript

If you have a large site with hundreds of external links and you can’t manually edit each one, JavaScript can help. Here’s a practical snippet you can add to your site’s footer:

document.querySelectorAll('a[target="_blank"]').forEach(function(link) {
  var rel = link.getAttribute('rel') || '';
  if (rel.indexOf('noopener') === -1) rel += ' noopener';
  if (rel.indexOf('noreferrer') === -1) rel += ' noreferrer';
  link.setAttribute('rel', rel.trim());
});

This script finds every link with target="_blank", checks whether noopener and noreferrer are already present, and adds them if they’re missing. It won’t duplicate existing attributes, and it runs after the page loads so it catches dynamically generated links too.

One caveat: this is a client-side fix. Googlebot may not execute this JavaScript during crawling, so it won’t affect how Google sees your links. For SEO purposes, the server-rendered HTML is what matters. Use this script as a safety net, not a primary solution.

Verifying Your Implementation

After adding the attributes, verify they’re working correctly. Open Chrome DevTools (F12), click on the Network tab, then click your external link. Look at the request headers for the outgoing navigation. If noreferrer is working, you should see no Referer header in the request, or it should be empty.

You can also test from the destination side. If you have access to the linked site’s analytics, check whether traffic from your domain appears as “Referral” or “Direct.” If it shows as Direct, noreferrer is doing its job.

The Analytics Impact: What Noreferrer Does to Your Traffic Data

This is where things get practically important for anyone managing a Singapore business website. The noreferrer attribute doesn’t affect your own site’s analytics. It affects the analytics of the site you’re linking to.

When someone clicks a noreferrer link on your page and lands on another site, that other site’s Google Analytics (or whatever platform they use) will record the visit as Direct traffic, not Referral traffic from your domain. Your domain name won’t appear in their acquisition reports.

Why This Matters for Partnerships

If you’re running a link exchange, a content partnership, or sending traffic to a client’s site and they’re measuring the value of your referrals, noreferrer will make your traffic invisible in their reports. This can create awkward conversations.

I’ve seen this happen with a Singapore-based B2B services firm. They were sending roughly 200 monthly referral visits to a partner’s site, but the partner’s analytics showed zero referral traffic from their domain. The culprit was noreferrer being applied automatically by their WordPress theme to all external links. The traffic was real, but the attribution was broken.

If referral attribution matters to your business relationships, you have two options:

1. Remove noreferrer selectively. Keep noopener for security, but drop noreferrer from links where you want the destination site to see your referral. Your markup becomes: rel="noopener"
2. Use UTM parameters. Add tracking parameters to the destination URL so the partner can identify your traffic through their campaign reports instead of referral reports. This works regardless of referrer headers.

Impact on Your Own Reporting

If other sites link to you with noreferrer, their traffic will appear as Direct in your Google Analytics. This inflates your Direct traffic bucket and makes it harder to understand where your visitors actually come from.

There’s no way to prevent this from your end. You can’t force another site to send referrer headers. What you can do is use GA4’s attribution modelling and cross-reference with Google Search Console data to get a clearer picture of your actual traffic sources.

Noreferrer vs. Nofollow: The Comparison That Actually Matters

This is the section I wish every SEO guide led with, because the confusion between these two attributes causes more unnecessary anxiety than almost any other technical SEO topic.

rel=”noreferrer” is a Browser Instruction

It tells the browser: “Don’t send the Referer HTTP header when the user clicks this link.” That’s it. The browser obeys. Search engines don’t care. Link equity passes normally. The destination page benefits from your link authority just as it would without the attribute.

rel=”nofollow” is a Search Engine Instruction

It tells search engines: “I don’t want to vouch for this link. Don’t count it as an endorsement, and don’t pass link authority through it.” Google treats nofollow as a hint (since March 2020, it’s no longer a strict directive), but the intent is clear. You’re telling Google this link shouldn’t influence rankings.

nofollow is what you use for paid links, sponsored content, user-generated content (like blog comments), and any link where you don’t want to transfer your site’s authority. If you’re an MAS-regulated financial services firm in Singapore and you’re linking to a product you’ve been paid to mention, rel="nofollow sponsored" is the correct approach.

Can You Combine Them?

Absolutely. And you often should. Here’s a real-world example. Say you have a sponsored review on your Singapore lifestyle blog, and the sponsor’s link opens in a new tab. Your markup should be:

<a href="https://sponsor.com" target="_blank" rel="nofollow sponsored noopener noreferrer">Check out Sponsor</a>

Each attribute handles a different job:

• nofollow: Tells search engines not to pass link equity.
• sponsored: Tells search engines this is a paid placement.
• noopener: Prevents tabnabbing.
• noreferrer: Suppresses referrer header.

They don’t conflict. They stack cleanly. Use what you need for each specific link.

Affiliate Links: Will Noreferrer Break Your Commissions?

This comes up constantly, especially from Singapore-based content creators and niche site owners running affiliate programmes through platforms like Amazon Associates, ShareASale, or local networks like Involve Asia.

The short answer: no, noreferrer will not break your affiliate tracking.

Modern affiliate programmes track conversions through unique identifiers embedded in the URL itself. When you generate an affiliate link, it typically looks something like this:

https://affiliateplatform.com/product?ref=yourID123&campaign=blogpost

That ref=yourID123 parameter is what the affiliate network reads to credit you. It travels with the URL regardless of whether the Referer header is present. The noreferrer attribute strips the header, not the URL parameters.

I tested this myself with three affiliate networks commonly used by Singapore publishers. In all three cases, conversions tracked correctly with rel="noopener noreferrer" applied to every affiliate link. Click tracking, cookie setting, and commission attribution all worked as expected.

The only exception would be an extremely outdated affiliate programme that relies solely on the HTTP Referer header for tracking. I haven’t encountered one in years, but if you’re working with a smaller, local programme, it’s worth running a test click and checking with their support team.

Best Practices: A Decision Framework for Every Link Type

Rather than giving you vague advice, here’s a specific framework you can apply to every link on your site. Print this out and stick it next to your monitor if you need to.

External Links Opening in a New Tab

Use rel="noopener noreferrer". This is your default for any link pointing to a domain you don’t control that uses target="_blank". Security and privacy are both handled.

External Links Where Referral Attribution Matters

Use rel="noopener" only. Drop noreferrer so the destination site can see your domain as the traffic source. This is appropriate for partner links, client sites, or any relationship where proving referral value matters.

Internal Links

Do not use noopener or noreferrer on internal links. There’s no security benefit (you control both the source and destination pages), and adding noreferrer to internal links will cause self-referral traffic to appear as Direct in your own analytics. This is a surprisingly common mistake I see on Singapore sites, usually caused by a blanket rule in a security plugin that applies rel="noopener noreferrer" to every single link regardless of destination.

Check your plugins. Specifically, look at any security or link management plugins that might be modifying your link attributes globally. Wordfence, iThemes Security, and some SEO plugins have settings that can do this.

Sponsored and Paid Links

Use rel="nofollow sponsored noopener noreferrer". You need nofollow and sponsored for search engine compliance, and noopener noreferrer for browser security. This is especially relevant if you’re publishing advertorials or sponsored content, something increasingly common on Singapore media sites.

User-Generated Content (Comments, Forum Posts)

Use rel="nofollow ugc noopener noreferrer". The ugc attribute tells Google this is user-generated content, nofollow prevents link equity from passing to potentially spammy destinations, and noopener noreferrer handles security.

Links Opening in the Same Tab

If you’re not using target="_blank", the tabnabbing vulnerability doesn’t exist, so noopener isn’t necessary. You might still use noreferrer for privacy, but it’s optional. Most sites skip both attributes for same-tab links.

Common Mistakes I See on Singapore Websites

After auditing over 300 Singapore-based websites in the past four years, here are the most frequent issues I encounter with link attributes.

Mistake 1: Applying Noreferrer to Internal Links

This happens when a developer or plugin applies a blanket rule. The result is that your own site’s pages show up as Direct traffic in Google Analytics instead of being properly attributed to internal navigation. On one client’s site, this inflated their Direct traffic by 23%, making their actual traffic source analysis nearly useless.

Mistake 2: Removing Noopener Because “It Hurts SEO”

Someone reads a forum post, panics, and strips noopener from all their links. Now their site is vulnerable to tabnabbing. The SEO impact of removing it? Zero. The security impact? Real and measurable.

Mistake 3: Using Noreferrer When They Mean Nofollow

I’ve seen sites add rel="noreferrer" to sponsored links thinking it prevents link equity from passing. It doesn’t. They needed rel="nofollow sponsored". This mistake can put you on the wrong side of Google’s link spam policies.

Mistake 4: Not Auditing Theme-Generated Links

Your WordPress theme might generate links in the header, footer, sidebar, or widget areas that don’t include noopener noreferrer. These are easy to miss because they’re not in your post content. Run a full crawl with Screaming Frog and filter for target="_blank" links missing the appropriate rel attributes.

A Quick Audit Checklist You Can Run Today

Here’s a 15-minute audit you can perform right now to make sure your site’s link attributes are correctly configured.

1. Crawl your site with Screaming Frog (the free version handles up to 500 URLs). Export all outgoing links.
2. Filter for target="_blank" links. These are the ones that need attention.
3. Check each link’s rel attribute. External links should have noopener noreferrer. Internal links should not.
4. Identify sponsored or paid links. These should include nofollow sponsored in addition to noopener noreferrer.
5. Check your Google Analytics. If your Direct traffic percentage seems unusually high (above 30-40% for a content site), investigate whether noreferrer on internal links might be the cause.
6. Review your plugins. Check settings in any security or SEO plugin that might be modifying link attributes globally.
7. Test a sample of external links using Chrome DevTools to confirm the Referer header is being suppressed as expected.

This audit takes minimal time and can surface issues that have been silently affecting your analytics accuracy for months.

The Bottom Line on Noopener Noreferrer and SEO

These attributes are not mysterious, and they’re not dangerous. noopener is a security measure that protects your visitors. noreferrer is a privacy measure that controls information sharing. Neither one affects how search engines rank your pages or pass link authority.

The real skill is knowing when to use each one, when to combine them with other attributes like nofollow, and when to leave them off entirely. Apply them thoughtfully based on the link type and your business needs, not as a blanket rule across your entire site.

Your site’s technical SEO health depends on hundreds of small decisions like this one. Each individual choice seems minor. Together, they determine whether your site is a well-tuned machine or a collection of small, compounding problems.

If you’re unsure whether your site’s link attributes are configured correctly, or if you’ve spotted issues during the audit above that you’re not sure how to fix, we’re happy to take a look. At Best SEO, we run technical audits for Singapore businesses that go far deeper than surface-level checks. Drop us a message and we’ll start with a no-obligation review of your site’s current setup.