A Comprehensive Guide to the HTML <a> Tag's rel Attribute: Safety, Privacy, and SEO Best Practices

Hi, I’m HenryZ.
This article discusses a pitfall that every front-end developer has encountered but often glosses over: the rel attribute of the <a> tag.
After reading this, you’ll be able to tell yourself: “From now on, whenever I use target="_blank", I’ll first write noopener and then add others as needed.”

1. Understand Two Things First

Question	One-sentence Answer
What is `rel` for?	It tells the browser “what my relationship with that link is” and decides whether to hand over information from the previous page.
Why is it always used with `target="_blank"`?	A new tab will get the `window.opener` pointer, which can tamper with the source page in reverse—this is called reverse tabnabbing.

2. The Safety Duo: noopener / noreferrer

Attribute	What It Does	Additional Effect	Recommended Scenario
`noopener`	Cuts off `window.opener`	None	Add to all `target="_blank"` links to ensure safety first
`noreferrer`	Does not send the `Referer` request header	Modern browsers also cut off `window.opener`	Use when you don’t want the target site to know where you’re coming from

What does “cutting off window.opener” mean?
By default, the window.opener in a new tab points to the page that opened it.
With this “key to go back,” the new page can:
Redirect the original page to a fake login page (reverse tabnabbing);
Use opener.document to directly read and write to the source page (restricted by cross-origin, but still allows location redirection).
By adding noopener, the browser simply breaks this key— the new page gets a window.opener of null, and it can’t do anything even if it wants to.

Remember in one sentence:
“Just for safety” → noopener; （“Break the key, prevent looking back.”）
“For safety and invisibility” → noopener noreferrer (the order of the two words is arbitrary).

<!-- Most commonly used: open external links in a new tab -->
<a href="https://external.example"
   target="_blank"
   rel="noopener noreferrer">
   External Resource
</a>

3. SEO-Specific Codes

Attribute	What It Means to Google	Practical Scenario
`nofollow`	“Don’t pass weight, I’m just mentioning it”	Untrusted external links
`ugc`	“This is user-generated content”	Comments, forum posts
`sponsored`	“I got paid for this”	Ads, sponsored content

It won’t prevent indexing! It just doesn’t pass weight, so stop using nofollow as robots.txt.

<!-- Links appearing in comments -->
<a href="https://xxx.com "
   target="_blank"
   rel="noopener nofollow ugc">
   User-shared address
</a>

4. Quick Reference for Other Common rel Types

Type	Example	One-sentence Explanation
Document Relationship	`alternate` `author` `canonical` `prev/next`	Guides crawlers or browsers, does not affect security
Preloading	`preload` `prefetch` `dns-prefetch`	Performance optimization, works better with `<link>`
Bookmark	`bookmark`	Permanent anchor, rarely used

5. Can I Just Hide the Referer?

Yes, but don’t use noreferrer site-wide; use referrerpolicy for more precision:

<a href="https://external.example"
   target="_blank"
   rel="noopener"
   referrerpolicy="strict-origin-when-cross-origin">
   External Resource
</a>

Common values:
no-referrer / origin / strict-origin-when-cross-origin
Can’t remember? Just check the Referer header in the Chrome DevTools Network panel.

6. Three-sentence Summary (For Quick Reference)

For any target="_blank", first write rel="noopener".
If you don’t want to reveal the source, add noreferrer or directly use referrerpolicy.
In SEO scenarios, add nofollow / ugc / sponsored as needed to avoid misleading search engines into thinking you’re selling links.

Copy the code below and use it as a Snippet, so you never have to type it out again:

<!-- General template for external links -->
<a href="URL"
   target="_blank"
   rel="noopener noreferrer nofollow">
   Text
</a>

Wish you happy link writing and never get chased by security scan reports again.