In this article, we answer the question of “what is noopener?” while also expanding upon what it does, how to remove the attribute, and how it benefits your WordPress content for things like SEO and affiliate marketing.
Keep reading to learn all about the noopener attribute value!
? Table of contents:
What is noopener? And what does it look like?
Noopener is a value of the rel="" HTML attribute. It’s automatically or manually added to any outgoing links you add in WordPress. Often used for <area> and <form> elements in HTML, the noopener value’s most common usage (especially in WordPress) appears when implementing <a> elements, aka. links or hyperlink anchors.
By itself, an <a href=""> hyperlink element allows you to hyperlink anything from web pages to email addresses. That’s it — there are no included attributes that tell the hyperlink to open in a new tab when clicked. However, WordPress users can mark a checkbox so the hyperlink opens in a new tab when clicked. When checked, WordPress inserts target=" _blank" in the code, which prompts the browser to open the link in a new tab. As a bonus, the rel="noopener" value also ends up in the code to protect from security threats.
Sometimes, the value is paired with “noreferrer.” We’ll discuss how they work together and how they differ a little later in this article.
In the traditional WordPress editor, you can highlight a bit of text and insert a link. In the pop-up, you can add a URL, Link Text, and mark a checkbox to “Open link in a new tab.” Leaving this box unchecked means that the link won’t open in a new tab when clicked, but also that WordPress leaves the hyperlink without a rel="noopener" attribute.
As you can see from the Text Editor, a standard <a href=""> element gets generated for the hyperlink with no rel="noopener" attribute.
Marking the checkbox and clicking the Enter button for a hyperlink changes that entirely.
Switching to the Text editor once more, we now see a rel="noopener" attribute towards the end of the <a href=> element. You’ll also notice that WordPress adds a target="" attribute (with a _blank value), which is the HTML code that actually forces the link to open in a new tab.
WordPress noopener values look a little different for Gutenberg visual editor users; instead, each new URL shows a switch to “Open in new tab.”
Leaving the switch “Off” results in a basic <a href=""> element where the hyperlink opens in the same tab (and we don’t see any rel="noopener" attribute).
But turning the switch “On” activates the automated value insertion from WordPress.
A glance at the code shows this link with a rel="noopener" attribute, and it gets paired with a noreferrer value.
You’ll never see a rel="noopener" attribute unless you add a link to WordPress and open the Text/Code Editor. You’ll know WordPress added the attribute if you make the link open in a new tab, but WordPress doesn’t display any reference of noopener values unless you open the code view. It’s also possible to add the attribute manually by going to the code and typing it in yourself. But WordPress already makes it easy with a visual checkbox/switch, so that’s unnecessary.
What does the rel=”noopener” attribute actually do?
Now that we know what a rel="noopener" attribute is, and what it looks like, we’ll explain what it does for your links, your website, and the interaction between your site and the ones you link to.
In short, the attribute is a response to a security vulnerability where sites with malicious code gain partial access to websites that link to them. The attack only works when the link opens in a new tab. All new tab links actually grant access to the referring site (your site) through a JavaScript property called window.opener. As a result, your accidental linking to a malicious website actually grants control to a bot or webmaster who plans on editing your page, installing malware, or any other number of attacks.
As this threat became prominent, WordPress acted swiftly by automatically including the rel="noopener" attribute whenever users create links that open in new tabs.
Why? Because the rel="noopener" attribute blocks the linked site from accessing the window.opener JavaScript feature, removing the threat. Gutenberg also includes the noreferrer value, which cuts off the linked (potentially malicious) sites from seeing that your site linked to them altogether. So, it eliminates a security hole caused when opening links in new tabs, and noreferrer hides your site information when opening links in new tabs.
You may also be interested in:
Noopener vs noreferrer vs nofollow
Noopener, noreferrer, and nofollow are all potential values to insert within the rel="" attribute, most often when creating hyperlinks.
Commonly confused, these values are quite different in how they support hyperlinks and affect SEO and site security.
? Here’s how to tell them apart:
noopener
- An HTML value you can place in the
rel=""attribute. - Closes the window.opener JavaScript security gap, protecting sites that may unintentionally link to malicious URLs.
- WordPress auto-adds the
rel="noopener"attribute when the site owner creates a link to open in a new tab (with thetarget="_blank"value). - You’ll often see the value in tandem with the noreferrer value inside the
rel=""attribute. They complete different jobs but work towards the same type of security. - The value assists with security. Contrary to rumors, it doesn’t affect SEO in any way.
noreferrer
- An HTML value you can place in the
rel=""attribute. - Stops the browser from sending the referring webpage’s address to the linked website. This means malicious sites have another roadblock when trying to access your site.
- In Gutenberg, WordPress auto-adds the noreferrer value when you insert a link to open in a new tab. You must add noreferrer manually if using the traditional editor.
- The noreferrer value is often listed right before the noopener value inside the
rel=""attribute, like this:rel="noreferrer noopener". - The noreferrer value assists with security as well by hiding your referrer URL from other sites. The value doesn’t affect SEO, but it could increase the reported traffic numbers for direct traffic if the site gets looked at via analytics software.
- Many affiliate marketers believe noreferrer values hurt SEO results since search engines want to see disclaimers about affiliate links (so as not to hide that you’re recommending something just because you’re getting paid). However, there’s no evidence that noreferrer affects SEO for affiliate links.
- What it does affect in relation to affiliate links, however, is that depending on your affiliate partner, they might not be able to attribute the visitors you’ve referred to your account. The noreferrer parameter prevents them from doing so. Therefore, if you want to be certain that your affiliate links are being tracked properly, you should not have noreferrer on them.
nofollow
- An HTML value that you can place in the
rel=""attribute. - Tells search engines to not send “link juice” to the website you’re linking to. High-quality link juice can improve search engine rankings for the website you link to. That’s because search engines see value in lots of sites linking to certain content. Webmasters refuse to send link juice to certain websites/pages for various reasons.
- It’s most commonly enforced when links are placed in comments and forums, since you don’t want a bunch of malicious links in your comments section.
- Some sites use the nofollow value with internal links, to not tell the search engines that they’re creating too many internal links. However, there’s no evidence this matters.
- SEO is affected by nofollow, but only when using affiliate links or redirecting to sponsored content, or anything you get paid to promote. Essentially, search engines don’t want to give link juice to sites just because they’re paying for the traffic. So, it’s a good idea to use
rel="nofollow"attributes when linking to affiliate pages.
The pros and cons of noopener
Many people confuse noopener with nofollow, and that’s usually why they think the rel="noopener" attribute is essential if you want to improve SEO or use affiliate links. But it cannot help with either of those. It does, however, have several other benefits.
Pros ?
- The noopener value blocks malicious sites from accessing the JavaScript window.opener object. The window.opener provides partial access to the linked site when opened in a new tab, so it helps eliminate that threat.
- It improves security while still allowing you to open links in new tabs, which many people feel makes for a more pleasant user experience.
- WordPress automatically inserts the attribute when creating a link that opens in a new tab. It does this if you use the Gutenberg or traditional WordPress editor, essentially removing any manual work on your end.
- You can always insert the attribute into the code if you want.
- It doesn’t affect SEO, affiliate linking, or performance on your website.
Cons ?
- It’s confusing when trying to distinguish between noopener, noreferrer, and nofollow. Some users even start adding noopener values to all links, hoping to improve SEO. But that’s just a waste of time.
- There’s a simple way to avoid the window.opener security hole altogether, and that’s by simply opening your links in the same tab. So, the value isn’t all that necessary since the threat is avoidable in the first place.
- Technically, noreferrer already restricts access to window.opener, so many people argue that noopener is redundant.
How to add, remove, and deactivate noopener in WordPress
You can use the “Open in new tab” switch to add or remove the noopener value from an individual hyperlink in WordPress.
Leaving the switch unchecked means the value has not been added. Unchecking the switch from a previous link removes the noopener value from your code, even though you can’t see it on the visual editor. Activating the switch adds the value to the hyperlink code. Again, that’s not visible unless you check the Code Editor.
To get to the Code Editor in Gutenberg, click on the options button (three vertical dots), then the Code Editor button.
Here, you can add the value inside the rel="" attribute. Removal simply requires you to delete the noopener text. You can also opt to delete the entire rel="" attribute if that’s what you want.
In the classic WordPress editor, you can add or remove a noopener value by clicking on a link in the Visual Editor. Select the Edit (pencil) icon.
This allows you to edit the link itself, but you want to click on the Link Options (gear) icon to adjust the more advanced settings.
To add noopener, mark the “Open link in a new tab” box. To remove noopener from a previous link, simply uncheck this box.
The classic WordPress editor provides a Text tab for modifying the page/post code. This is yet another way to add or remove noopener values for links. Click on the Text tab and locate the link you want to edit. Either add a rel="noopener" attribute before the closing bracket for <a href="">, or delete the noopener text to remove it from the link.
Remove noopener functionality from your entire WordPress site
It’s also possible to completely deactivate noopener across your website, but we highly recommend leaving it, since there are no SEO or affiliate marketing benefits. And without it, you’re vulnerable to attacks.
However, if you have a valid reason to deactivate noopener on your entire site, find your theme’s functions.php file and paste in the following code:
add_filter('tiny_mce_before_init','wpb_disable_noopener');
function wpb_disable_noopener( $mceInit ) {
$mceInit['allow_unsafe_link_target']=true;
return $mceInit;
}
Code language: PHP (php)? That stops WordPress from adding the rel="noopener" attribute whenever you choose to open a link in a new tab.
Summary
✅ In this article, we discussed the basics of noopener, and how it’s mainly an automated bit of code that gets added to WordPress links to protect your website from attacks. Those attacks usually happen when you unintentionally link to a malicious site containing malware or viruses.
✅ We also highlighted the difference between noopener, noreferrer, and nofollow, particularly how nofollow is the only rel="" value that has anything to do with SEO or affiliate marketing. Finally, we explained how to use, add, and remove noopener values from your WordPress site.
If you have any questions or thoughts about using rel="noopener" in WordPress, leave us a note in the comments section below!
