What is 'noopener' and 'noreferrer' tags in WordPress and How does it affect my SEO?
Hey there! So, a lot of WordPress users, like, probably most of 'em, are wondering about these 'noopener' and 'noreferrer' tags and how they mess with SEO. Whether you're a developer, a marketer, or just a blogger, it's good to know this stuff.
You might've noticed that WordPress started automatically adding rel="noopener noreferrer" to links that open in a new tab (target="_blank"), both for external and internal links.
Jess, one of our WordPress developers, spotted this while she was debugging some code. She's pretty clued up on basic seo, and she got kinda fascinated by the 'noreferrer' bit, startin' to imagine how all the seo folks would freak out – like, total nightmare fuel.
I was a bit worried too when Jess showed me her laptop, and she even brought two brownies, thinking they'd help me chill out about this "disaster." Honestly, 'noreferrer' isn't really about "referring nobody" or being like a "no-follow" tag in seo, even though it might sound like it.
Now, 'no-follow' tags are a whole other can of worms for seo folks. Using them can stop that precious "link juice" from flowing between sites, which can totally mess with your rankings and page authority.
So, what exactly are 'noopener' and 'noreferrer' tags?
rel="noopener": Basically, this tag tells a link to disown its opener when it opens in a new tab. What that means is, its window.opener property becomes null. Instead of being linked back to the original page, it's kind of on its own. This is a security thing, preventing malicious sites from messing with the original page.
rel="noreferrer": This is a newer tag in html5 that's all about hiding where the traffic is coming from. Technically, it stops your browser from sending a "referrer header" to the destination site when someone clicks your link. Think of it as a privacy feature.
Do 'noopener' and 'noreferrer' mess with my SEO?
Nope, not really. According to discussions on places like Moz, these tags are more about security and privacy than seo. They're mainly useful when you don't want to pass along information like your browser, operating system, or region to the linked site.
UPDATE: WordPress has actually stopped using 'noreferrer' and is sticking with 'noopener' only. This is actually a relief for analytics companies. If 'noreferrer' had kept being used by default, it would have caused a lot of confusion with undefined data in analytics reports.
How do 'noopener' and 'noreferrer' help with security?
These tags were introduced to help stop a security vulnerability that was being exploited through links that opened in new tabs. It's a bit of a niche thing, but WordPress decided to implement it to make things safer for users.
It's called "reverse tabnabbing." Basically, a scammer could replace your legitimate tab with a malicious one. When you open a new tab, the scammer could detect the referral URL using window.opener and then redirect you using window.opener.location = newURL. This makes it look like you arrived from a trusted source, like your own WordPress site, even though you've been tricked into visiting a phishing site.
Using rel="noopener" stops the scammer from getting that referral information and any data tied to it.
The 'noreferrer' tag is gone, but how can we see it?
To see this in action, we set up two links.
Refering from our Dummy Page
No Referrer Page
Then, we checked the server log files. Here's what we found:
Log Entry for 1st URL (without rel=noreferrer):142.68.XXX.XXX – – [18/May/2017:14:25:01 -0400] "GET / HTTP/1.1" 200 2932 "https://social9.com/?p=2432&preview=true" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome58.0.3029 Safari/537.36"
Log Entry for 2nd URL (with rel=noreferrer):::1 – – [18/May/2017:14:26:17 -0400] "OPTIONS * HTTP/1.0" 200 125 "-" "Apache/2.4.20 (Ubuntu) PHP/5.5.22-1ubuntu16.04 OpenSSL/1.0.1f (connection created locally)"
See how the second log entry is way simpler? It strips down the referring domain, the referring ip address, and any info about the browser. This is what my team and I figured out about these 'noopener' and 'noreferrer' tags. We're pretty sure now that these tags on a WordPress site don't really impact your seo.
Got more thoughts on this? Drop a comment below!