The 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" attribute.
target="_blank" makes links open in a new browser tab.
Here’s an example of a link with the rel="noopener" attribute:
<a href="https://www.youtube.com" rel="noopener" target="_blank"
>Link to youtube.com</a
>How rel="noopener" works
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 window.opener property).
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" and SEO
Good news, rel="noopener" has no impact on your SEO.
Downsides of using noopener
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.
Alternative 1: use "noreferrer"
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
>The "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.
rel="noreferrer" and SEO
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.
Don’t confuse noreferrer or noopener with the nofollow attribute (which 100% will affect SEO).
Alternative 2: don’t use target="_blank"
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.
Without 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.
Resources
Read more about security issues with external links
