Web Seo Kit

How to Add target=”_blank” and rel=”nofollow” Correctly (And Avoid the Security Mistake Most Sites Make)

target="_blank" and rel="nofollow"

You added target=”_blank” to make links open in a new tab. Simple enough, right? But that one small attribute can quietly expose your site to security risks and confuse search engines about which links you actually trust. This is exactly where target=”_blank” and rel=”nofollow” come into play together.

This guide shows you exactly how to add target=”_blank” and rel=”nofollow” correctly, step by step. You’ll learn what each anchor tag value does, why skipping target=”_blank” and rel=”nofollow” leaves your site exposed, and how to fix your links the right way in 2026.

What Is the target=”_blank” Attribute? (And Why It’s Risky Alone)

The target attribute tells a browser how to open a link. When you set it to _blank, the link opens in a brand new tab instead of replacing the current page. Bloggers love this because readers stay on the original site while exploring another one.

But here’s the catch. Using target=”_blank” alone, without any rel attribute, creates a small security gap. Think of it like leaving your front door unlocked while you step into another room. Nothing bad happens most of the time, but the risk is real. The new tab gains partial access to the page that opened it, through something called the window.opener object, and that’s where trouble can start.

1. What Is the rel Attribute? A Quick Overview

The rel attribute stands for “relationship.” It sits inside the anchor tag, right alongside the href attribute, and tells browsers and search engines how the linked page relates to yours. Think of href as the destination address and rel as the instructions you hand the browser about how to treat that trip.

Most developers only notice this attribute when something goes wrong, like a security warning or an SEO audit flag. A quick pro tip: right-click any link on a live site and choose “Inspect” to see its current rel values instantly. This simple habit catches missing attributes before they cause bigger security implications down the road.

Here’s a quick snapshot of what each value actually does, before we break each one down in detail:

rel ValueMain PurposeAffects SEO?Affects Security?
noopenerBlocks access to window.opener objectNoYes
noreferrerHides referrer data + blocks window.openerNoYes
nofollowSignals not to pass link juice/PageRankYesNo

2. What Is rel=”noopener”? Preventing Tabnabbing Attacks

rel=”noopener” blocks the new tab from accessing the window.opener object of the page that linked to it. Without this value, a malicious website could theoretically hijack your original tab and redirect it to a fake login page. This attack has a name: tabnabbing, and it’s more common than most site owners realize.

3. What Is rel=”noreferrer”? Controlling Referrer Data

rel=”noreferrer” does two jobs at once. First, it blocks access to the window.opener object, just like noopener. Second, it strips the referrer header from the request, meaning the destination site can’t see where the visitor came from. In your Google Analytics, this traffic often shows up as direct traffic instead of proper referral traffic.

Here’s a real-world example worth noting. An affiliate marketer might use noreferrer to keep their traffic sources private from partner sites. That’s a legitimate use case, though it does mean your own analytics software loses some visibility too. A frequent mix-up is treating noreferrer and noopener as identical twins. They overlap in function, but only noreferrer touches HTTP header data and browser behavior around referrer information. Use both together for the safest, most complete coverage across older and newer browsers alike.

4. What Is rel=”nofollow”? Managing Search Engine Trust

rel=”nofollow” tells search engines not to pass link juice, also known as PageRank, to the page you’re linking to. In simple terms, it’s you saying “I’m linking here, but I’m not vouching for it.” This matters a lot for search engine optimization (SEO), since every link on your site sends a signal about credibility and trust.

5. Can You Combine noopener, noreferrer, and nofollow Together?

Yes, you can combine all three values in a single rel attribute, separated by spaces. It looks like this: rel=”noopener noreferrer nofollow”. Browsers read each value independently, so stacking them causes no conflicts. This combo covers your web security and your SEO trust signals in one clean line of code.

A handy pro tip is saving this exact string as a code snippet in your editor, so you never retype it. Modern browsers support all three values well, but older versions sometimes lag behind on noopener, which is why pairing it with noreferrer still makes sense as a safety net.

Browser Typenoopener Supportnoreferrer Supportnofollow Recognition
Modern browsers (Chrome, Firefox, Edge)Full supportFull supportFully recognized
Older browsers (pre-2018 versions)Partial supportFull supportFully recognized
Mobile browsers (current)Full supportFull supportFully recognized

6. How to Add target=”_blank” and rel=”nofollow” Correctly (Step-by-Step Code Examples)

Adding these attributes correctly starts with raw HTML. Here’s the safest version of a link opening in a new tab:

That single line covers security and SEO trust together. If you’re using WordPress, the block editor usually adds rel=”noopener” automatically when you toggle “open in new tab,” but it won’t add nofollow unless you switch to the text/HTML view and add it manually. A useful pro tip is installing a link management plugin if you deal with many outbound links across guest posts or UGC (user-generated content), since manually editing each one gets tedious fast. A common mistake at this stage is fixing new links going forward but forgetting your existing published posts, which still carry the old, unprotected version.

7. Common Mistakes When Using target=”_blank” and rel Attributes

Even experienced developers slip up here. The most frequent error is adding target=”_blank” without any rel value at all, leaving the tabnabbing vulnerability wide open. Another mistake involves applying nofollow to genuinely valuable outbound links, which wastes a chance to build goodwill with high authority webpage sources you’re citing.

Some site owners also confuse nofollow with blocking a page from search engines entirely, which isn’t accurate. Nofollow only affects link trust, not crawling or indexing. A third issue shows up in press releases and paid links, where site owners forget these require nofollow or sponsored tags under Google’s guidelines, risking a manual action if ignored.

MistakeWhy It’s a ProblemThe Fix
Missing rel=”noopener” on target=”_blank” linksOpens tabnabbing security riskAdd noopener to every new-tab link
Using nofollow on valuable outbound linksWastes trust-building opportunityReserve nofollow for paid, UGC, or untrusted links
Forgetting nofollow on sponsored contentViolates Google’s spam policiesAdd rel=”sponsored” or “nofollow” consistently
Not updating old published linksLeaves legacy security gapsRun a site-wide content audit periodically

8. How Does This Impact SEO and Site Security? (2026 Best Practices)

Here’s the clearest way to separate these values. Noopener and noreferrer are entirely about online security and user safety; they carry zero direct SEO weight on their own. Nofollow, on the other hand, is purely an SEO signal tied to website authority and search engine algorithm trust, with no security function at all.

This final breakdown makes the split between security and SEO easy to remember:

Focus AreaRelevant AttributesWhat It Protects
Security onlynoopener, noreferrerUser safety, tab hijacking, referrer privacy
SEO onlynofollowLink juice, PageRank, ranking factor signals
Both combinednoopener noreferrer nofollowFull protection for new-tab external links

Frequently Asked Questions:

1. What does target=”_blank” do?
It tells the browser to open the link in a brand new tab instead of the current page.

2. How do I add a nofollow tag?
Add rel=”nofollow” inside your anchor tag, like this: <a href=”url” rel=”nofollow”>.

3. How to use rel=”nofollow”?
Use it on sponsored links, paid content, or untrusted user-generated links to stop passing link juice to them.

4. Is this correct target=”_blank”?
Not on its own — always pair it with rel=”noopener noreferrer” for security, and add nofollow if the link isn’t trusted.

5. What is the alternative to target=”_blank”?
The safest alternative is target=”_self” (default), which opens the link in the same tab without any security risk.

Final Thoughts

Getting target=”_blank” and rel=”nofollow” right takes just a few extra characters of code, but it protects your site’s security implications and your website ranking at the same time. Small fix, real payoff.

Scroll to Top