How to Add target=”_blank” and rel=”nofollow” Correctly (And Avoid the Security Mistake Most Sites Make)
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. Before diving in, check how your internal links are structured using our Keyword Density Checker — it helps you spot pages that might still need attribute fixes too. 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 Value Main Purpose Affects SEO? Affects Security? noopener Blocks access to window.opener object No Yes noreferrer Hides referrer data + blocks window.opener No Yes nofollow Signals not to pass link juice/PageRank Yes No 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. Picture this real-world example. A user clicks a link on your blog that opens a compromised third-party site. That new tab quietly changes your original tab’s content to a fake Facebook login screen. The user, thinking their session expired, types in their password. That’s a phishing attack, and noopener shuts the door on it. A common mistake here is assuming every browser handles this the same way; older browsers sometimes need backup support, which is where noreferrer comes in. You can read more about this exploit directly from MDN Web Docs’ official explanation of window.opener, a trusted technical reference for developers. 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. Think about sponsored links, paid placements, or comments left by third-party commenters. Google requires nofollow (or similar tags) on these to prevent manipulation of ranking factor signals. A common mistake is applying nofollow to important internal links by accident, which can quietly choke off your own page authority. As a pro tip, Google now treats nofollow as a “strong hint” rather than an absolute rule, meaning it may still crawl the link but won’t pass full trust. Learn more from our Keyword Suggestion Tool to find related terms worth linking internally without risking your SEO structure. 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 Type noopener Support noreferrer Support nofollow Recognition Modern browsers (Chrome, Firefox, Edge) Full support Full support Fully recognized