The rel attribute describes the relationship between the current page and the link's destination — extra machine-readable context that browsers and search engines use to treat the link appropriately.
Syntax
<a href="..." rel="value-one value-two">link text</a>Basic Example
<a href="https://partner-site.com" target="_blank" rel="noopener nofollow">
Our Partner Site
</a>Browser output: a normal link visually — rel values change nothing about how it looks, only how browsers and crawlers treat it.
How It Works
rel accepts one or more space-separated values. Multiple values can be combined freely when they apply together (like a new-tab external link that's also a paid placement: rel="noopener sponsored").
Important Values
| Value | Meaning |
|---|---|
noopener | Blocks the new tab from accessing the original page via JavaScript — a security pairing for target="_blank" |
noreferrer | Like noopener, plus stops the browser from sending referrer information to the destination |
nofollow | Tells search engines not to pass ranking credit through this link — see nofollow-links |
sponsored | Marks a link as a paid placement or advertisement |
ugc | Marks a link as user-generated content (a blog comment, a forum post) |
alternate | Used on <link> (not <a>) to point to an alternate version of the document — e.g. an RSS feed or a different language |
Real-World Example
<p>Read a great community write-up on this: <a href="https://blog.example.com/post" rel="ugc">a student's blog post</a>.</p>A blog comment section auto-tagging every user-submitted link with rel="ugc" — an honest signal that the site isn't personally vouching for that content the way it would for its own editorial links.
Common Mistakes
- Using a blanket
nofollowon every outbound link regardless of context, instead of the more precisesponsoredorugcwhere they genuinely apply - Confusing
rel="alternate"(for<link>, describing document relationships) with anything relevant to regular<a>navigation links
Best Practices
- Pick the
relvalue that honestly describes the relationship — paid link →sponsored, user-submitted →ugc, generally untrusted →nofollow - Combine with
noopenerwhenevertarget="_blank"is also used
Accessibility Considerations
No direct effect on assistive technology — rel values are aimed at browsers and crawlers, not screen readers.
SEO Considerations
This is fundamentally an SEO-facing attribute. Since Google's 2019 update, nofollow, sponsored, and ugc are all treated as hints rather than absolute directives — Google may still choose to crawl and consider such links in some contexts, but using the correct value remains the honest, spec-compliant, best-practice choice.
Browser & Modern HTML Notes
sponsored and ugc are more recent additions (2019) alongside the older, long-standing nofollow and noopener — all are widely supported in modern browsers and search engines today.
Mini Practice
- Add the correct
relvalue to a paid advertisement link. - Add the correct
relvalue to a link inside a public comment section.
