What rel=noopener, noreferrer and nofollow actually do

The short version

The rel attribute on a link describes the relationship between the current page and the linked page. That sounds abstract, but three values come up constantly in day-to-day web work:

<a href="https://example.com" target="_blank" rel="noopener noreferrer nofollow">
  External resource
</a>

Those three tokens are often pasted together as if they do one thing. They do not.

• noopener is a browser security control.
• noreferrer is a privacy and analytics control.
• nofollow is a search engine signal.

They can be combined, but you should know why each one is present. Adding all three to every outbound link is not always wrong, but it is usually lazy.

rel=noopener prevents reverse tabnabbing

rel="noopener" tells the browser not to give the newly opened page access to the original page through window.opener.

This matters mostly when you open a link in a new tab or window using target="_blank":

<a href="https://external.example" target="_blank" rel="noopener">
  Open external site
</a>

Without noopener, the destination page may be able to run JavaScript like this:

window.opener.location = 'https://phishing.example';

That attack is commonly called reverse tabnabbing. The user clicks a legitimate link, lands on another site, and the original tab is quietly navigated to a fake login page or another malicious destination.

Modern browsers have improved here. In current browser behavior, target="_blank" is generally treated as if rel="noopener" were present. That is good, but it does not make the explicit attribute pointless. Explicit noopener is still useful because:

• it documents your intent;
• it protects older or unusual browsing environments;
• it avoids relying on every embedded web view behaving like a modern desktop browser;
• it makes code review easier.

For external links that open in a new tab, rel="noopener" is a sensible default.

Does noopener affect SEO?

No, not in any meaningful way. noopener is for browser behavior. It does not tell search engines whether you endorse a page, whether link equity should pass, or whether the link is paid.

If your SEO policy treats noopener as a ranking directive, the policy needs editing.

rel=noreferrer hides the referring page

rel="noreferrer" tells the browser not to send the Referer HTTP header when the user follows the link.

Yes, the header is historically misspelled as Referer. The attribute is spelled noreferrer.

Normally, when a user clicks a link from your page to another site, the destination may receive a referrer value showing where the visit came from. Depending on your site’s Referrer-Policy, that may be the full URL, just the origin, or nothing.

For example, a destination might see:

Referer: https://www.example.com/pricing?plan=enterprise

or only:

Referer: https://www.example.com/

With rel="noreferrer", the browser should not send that header for that navigation.

<a href="https://external.example" rel="noreferrer">
  External site
</a>

In practice, noreferrer also behaves like noopener in modern browsers. If you use noreferrer, you generally do not need noopener for security on that same link. Many teams still write both for clarity:

<a href="https://external.example" target="_blank" rel="noopener noreferrer">
  External site
</a>

That is fine. It is redundant, but readable.

When noreferrer is useful

Use noreferrer when the current page URL should not be exposed to the destination.

Common examples:

• links from private dashboards;
• links from unpublished preview environments;
• links from URLs containing sensitive query parameters;
• links in admin tools, moderation queues, CRM screens, or customer support systems;
• links where the destination should not know the exact source page.

That last point is not always about secrecy. Sometimes it is about data minimization. If the destination does not need to know the referring URL, do not send it.

This fits the broader direction of privacy-aware web design. Browsers, users and regulators have all moved toward sending less ambient data by default. If you are revisiting this area, our article on what changed for cookies in 2026 and what to do about it covers the same general shift: less invisible tracking, more deliberate data flows.

The analytics trade-off

noreferrer can break attribution for the site you link to. Their analytics may classify the visit as direct traffic instead of referral traffic.

That is not your primary problem, but it can matter in partnerships, affiliate relationships, customer journeys, and internal cross-domain ecosystems. If your marketing team expects partner sites to see referral traffic from your domain, blanket noreferrer may create confusion.

For many ordinary editorial links, the better approach is to set a site-wide Referrer-Policy header rather than add noreferrer everywhere. For example:

Referrer-Policy: strict-origin-when-cross-origin

That policy sends the full URL for same-origin navigation, sends only the origin to secure cross-origin destinations, and sends no referrer when moving from HTTPS to HTTP. It is a practical default for many sites.

If you need to inspect how headers behave in production, a raw HTTP check is often clearer than guessing from analytics dashboards. The workflow in a small toolkit for debugging redirects and HTTP headers in production applies directly to referrer-policy debugging.

rel=nofollow is for search engines, not browsers

rel="nofollow" tells search engines that you do not want to imply endorsement of the linked page.

<a href="https://external.example" rel="nofollow">
  User-submitted link
</a>

Originally, nofollow was introduced to fight comment spam. The idea was simple: if links in comments did not pass ranking credit, spammers had less incentive to flood blogs and forums.

Today, Google treats nofollow as a hint rather than an absolute directive. That distinction matters. It means search engines may use the link for discovery or ranking systems in some contexts, but you are clearly signalling that the link should not be treated as a normal editorial endorsement.

When to use nofollow

Use nofollow when you are linking but do not want to vouch for the destination.

Reasonable examples include:

• untrusted user-generated links;
• links in public comments or profiles;
• links to sites mentioned as examples of bad behavior;
• links included for reference but not endorsement;
• links in areas where moderation is limited.

For paid or sponsored links, prefer rel="sponsored". For user-generated content, prefer rel="ugc". You can combine values if needed:

<a href="https://example.com" rel="ugc nofollow">
  User profile link
</a>

If you run public forms, comments, directories, or profile pages, link attributes are only one part of the abuse problem. Spam usually starts earlier in the submission flow. We have a separate breakdown of why your contact form is your biggest spam liability, and the same lesson applies here: do not expect nofollow to compensate for weak moderation.

What nofollow does not do

nofollow does not prevent users from clicking the link. It does not block the browser from sending a referrer. It does not hide the destination from view. It does not secure target="_blank".

It also does not guarantee that a URL will never be crawled. If search engines find the URL elsewhere, they can still crawl it. If you need to prevent indexing, use the appropriate robots controls on the destination page, such as noindex, not a nofollow attribute on somebody else’s link.

Common combinations

External link opening in a new tab

<a href="https://external.example" target="_blank" rel="noopener">
  External resource
</a>

This is the baseline. It addresses the security issue created by opening a new browsing context.

If you also do not want to send referrer data:

<a href="https://external.example" target="_blank" rel="noopener noreferrer">
  External resource
</a>

Paid placement

<a href="https://sponsor.example" rel="sponsored">
  Sponsor site
</a>

You can add noopener if it opens in a new tab:

<a href="https://sponsor.example" target="_blank" rel="sponsored noopener">
  Sponsor site
</a>

Do not use nofollow as a vague substitute for disclosing paid links. Search engines have a more specific value for that now: sponsored.

User-generated link

<a href="https://user-submitted.example" rel="ugc nofollow">
  User-submitted site
</a>

This tells search engines the link was contributed by a user and should not be treated as a normal editorial vote.

Internal links

Most internal links do not need any of these values.

Do not add nofollow to internal links as a routine sculpting tactic. It usually creates more confusion than benefit. If a page should not be indexed, handle that directly. If a page should not be crawled, think carefully about robots rules, authentication, canonicalization, and site architecture.

For internal links opening in a new tab, noopener is still harmless and may be appropriate. But the better question is why the internal link needs a new tab at all.

A practical policy for teams

A simple house style prevents most mistakes:

1. Add rel="noopener" to links with target="_blank", especially external links.
2. Add noreferrer only when hiding the source URL is intentional.
3. Add nofollow only when you do not endorse the destination.
4. Use sponsored for paid links and ugc for user-submitted links.
5. Do not use link attributes as a substitute for access control, moderation, or indexing rules.

The important part is intent. Every token in rel should answer a specific question:

• Security: should the new page be isolated from the opener?
• Privacy: should the destination receive referrer information?
• SEO: are we endorsing this link as an editorial reference?

If nobody on the team can answer those questions, the attribute is probably cargo cult HTML.

How to test what is happening

For noopener, open the link and check whether the destination can access window.opener. In a controlled test page, window.opener should be null when noopener is active.

For noreferrer, inspect the network request on the destination side or use a request logger in a test environment. Browser DevTools can show outgoing request headers, but server-side logs are often more reliable.

For nofollow, testing is less immediate because it is a search engine interpretation, not a browser behavior. Your best check is source inspection: confirm that the rendered HTML contains the expected rel value. If your frontend framework rewrites links, inspect the final DOM, not just the template.

The bottom line

These attributes are small, but they sit at the intersection of security, privacy and SEO. Treating them as interchangeable creates bad habits.

Use noopener generously with new-tab links. Use noreferrer deliberately when referrer privacy matters. Use nofollow when you are making a search-facing statement about endorsement. And when a link is paid or user-generated, use the more specific modern values: sponsored and ugc.

That is enough for most sites. The goal is not to decorate every link. The goal is to make each link tell the browser and search engines exactly what they need to know.