rel="noopener" attribute is one of the most important HTML attributes to know about because it directly affects external link security on anchor links that use the
target="_blank" makes links open in a new browser tab.
Here’s an example of a link with the
<a href="https://www.youtube.com" rel="noopener" target="_blank" >Link to youtube.com</a >
When you add
rel="noopener" to an external link on your website (with
target="_blank), it prevents the website you link to from gaining access to your page via the window object (via the
Translation: if the page you refer to contains malicious code, it could use the backdoor (
window.opener) to your website to hijack your user’s browser, and for example redirect them to a dangerous phishing website that steals their information or installs malware on their computer.
This is why WordPress automatically adds the
rel="noopener" attribute on all external links that open in a new browser tab (using the
target="_blank" attribute) — it’s for security reasons.
I recommend that you do the same, regardless of what kind of website you have since there are more upsides than downsides to using it.
rel="noopener" has no impact on your SEO.
The only downside I know about is that
rel="noopener" doesn’t have Internet Explorer 11 support.
I’m not too worried about that because:
- IE11 is soon history (Microsoft is ditching it).
- If your site visitor uses IE11, they can still click on your links, the
rel="noopener"attribute just won’t take effect.
Besides, as a responsible website owner, you should be careful about who you externally link to anyway. Don’t refer your users to websites that you don’t trust, and this security issue becomes close to non-existent.
If you’re worried about Internet Explorer users, you can add the
noreferrer attribute value (which is supported) to your anchor link like this:
<a href="https://www.youtube.com" rel="noopener noreferrer" target="_blank" >Link to youtube.com</a >
"noreferrer" attribute prevents the referrer (you) from sending information to the target website (that you link to) by removing the referral info from the HTTP header.
rel="noreferrer" will have an impact on website analytics since websites that you link to won’t know that you link to them, which could hurt a specific business agreement you might have with them.
So do this at your own discretion.
Contrary to what a lot of people believe,
rel="noreferrer" doesn’t directly impact your SEO, at least there’s no evidence for it. But as mentioned above, it will interfere with data gathering/analytics, which could hurt you in other/indirect ways, depending on your specific situation.
noopener with the
nofollow attribute (which 100% will affect SEO).
You can also just stop using the
target="_blank" attribute on your anchor links, and then you don’t have to worry about any of this.
target="_blank" every link on your website will move the user away from your website to the website you link to as soon as they click on it.
However, beware that by not using
target="_blank" it can and probably will affect your SEO negatively, specifically your bounce rate.
This is in my opinion especially a bad idea to do inside a tutorial, where the user might get distracted by something on the website you refer them to and end up forgetting about your site.
You can argue that if it only takes an external link to make your reader forget about your content, then it probably is not that good in the first place. This might be true, but it could also be the case that people are easily distracted, generally, and often not to their benefit.
This is not a black and white topic and I’m open to alternative viewpoints.
Read more about security issues with external links