In modern web development, the rel attribute plays a critical role in how links behave—both in terms of user security and search engine signals. Three of the most commonly used values—noopener, noreferrer, and nofollow—are often misunderstood or misused. This guide provides a technical yet accessible breakdown of what these values mean, when to use them, and why they matter.
What Is the rel Attribute?
The rel (relationship) attribute specifies the relationship between the current document and the linked resource. It is used within the <a> tag and can accept multiple values separated by spaces. For example:
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit Site</a>Each value modifies the behaviour of the link in a specific way, with implications for performance, security, and SEO.
rel=”noopener”: Preventing Tabnabbing Attacks
When a link includes target="_blank", it opens the destination in a new browser tab. However, without rel="noopener", the new page can access the original page via the window.opener property. This opens the door to a phishing technique known as tabnabbing, where the referring page is replaced with a malicious site.
Adding rel="noopener" disables access to window.opener, improving security and performance:
<a href="https://external-site.com" target="_blank" rel="noopener">Secure Link</a>In my own WordPress/Elementor development practice, I ensure all external links opening in new tabs include noopener as standard. This is part of every custom website and client project I deliver.
rel=”noreferrer”: Controlling Referrer Data
The noreferrer value prevents the browser from sending the HTTP referrer header when the link is clicked. This means the destination site will not know where the visitor came from.
In addition, noreferrer also includes the functionality of noopener, making it a broader privacy control.
<a href="https://external-site.com" target="_blank" rel="noreferrer">Private Link</a>While not always necessary, noreferrer can be useful in situations where privacy is a concern, such as linking to tools or platforms that should not receive traffic attribution.
Note: This may interfere with analytics and conversion tracking on the destination site.
rel=”nofollow”: Managing Search Engine Trust
nofollow was introduced by Google to combat link spam. It tells search engines not to pass PageRank or trust to the linked page. This is particularly relevant for:
- Sponsored or affiliate links
- User-generated content
- Untrusted or unverified sources
Example:
<a href="https://affiliate-site.com" rel="nofollow">Affiliate Link</a>In my SEO work, I use nofollow to clearly signal to search engines which links are editorial and which are not. WordPress plugins such as Rank Math (one of my favourite WordPress plugins) make this easy to implement site-wide or per link.
Can These Attributes Be Combined?
Yes, and they often should be. Here is a breakdown:
| Attribute | Needed for target=”_blank” | Prevents Referrer | Blocks SEO Value |
|---|---|---|---|
noopener | Yes | No | No |
noreferrer | Optional | Yes | No |
nofollow | Optional | No | Yes |
Common combinations:
<!-- Secure, private, and SEO-neutral -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer nofollow">Full Control</a>To Conclude…
Understanding and correctly applying rel="noopener", noreferrer, and nofollow is essential for building secure, performant, and search-friendly websites. These attributes are not optional hygiene—they are critical to modern development best practices.
In every WordPress site I build, particularly using Elementor, I ensure these attributes are implemented appropriately, whether for security, privacy, or SEO control. It’s a small detail that can make a significant difference.
If you’re unsure whether your site is using these attributes correctly, inspect your links manually or use browser extensions and auditing tools to verify your implementation.