Skip to content
CodeinWP content is free. When you purchase through referral links on our site, we earn a commission. Learn more
Home / Blog / Noopener: What It Is and How I...

Noopener: What It Is and How It Affects Your WordPress Site?

You may have seen the term “noopener” when creating a link in WordPress. It most often appears when you insert a link in a page or blog post then open the Text/Code Editor to view the HTML that makes up that link. Sometimes it shows up and sometimes it doesn’t. Other times it gets paired with separate bits of code like “noreferrer” or “nofollow.”

The noopener attribute gets added automatically based on whether or not you choose to open that link in a new tab. And it usually looks like this: rel="noopener".

Noopener

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.

empty checkbox before adding noopener

As you can see from the Text Editor, a standard <a href=""> element gets generated for the hyperlink with no rel="noopener" attribute.

a link on the backend code

Marking the checkbox and clicking the Enter button for a hyperlink changes that entirely.

check open in a new tab

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.

what noopener looks like

WordPress noopener values look a little different for Gutenberg visual editor users; instead, each new URL shows a switch to “Open in new tab.”

open in a new tab adds the noopener

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).

simple a href link

But turning the switch “On” activates the automated value insertion from WordPress.

open in new tab switch

A glance at the code shows this link with a rel="noopener" attribute, and it gets paired with a noreferrer value.

the noopener value in the editing code section

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 the target="_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.

open in new tab

To get to the Code Editor in Gutenberg, click on the options button (three vertical dots), then the Code Editor button.

code editor link

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.

find rel=noopener in code editor

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.

edit the link button

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.

link options to find noopener

To add noopener, mark the “Open link in a new tab” box. To remove noopener from a previous link, simply uncheck this box.

open link in new tab

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.

text tab

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!

Don’t forget to join our crash course on speeding up your WordPress site. With some simple fixes, you can reduce your loading time by even 50-80%:

 
Show Comments

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!

Most Searched Articles

Best JavaScript Libraries and Frameworks: Try These 14 in 2022

In this post, we look at the best JavaScript libraries and frameworks to try out this year. Why? Well, with JavaScript being available in every web browser, this makes it the most accessible programming language of ...

25+ Best Free WordPress Themes for 2022 (Responsive, Mobile-Ready, Beautiful)

If you're looking for only the best free WordPress themes in the market for this year, then you're in the right place. We have more than enough such themes for you right ...

12 Best WordPress Hosting Providers of 2022 Compared & Tested

Looking for the best WordPress hosting that you can actually afford? We did the testing for you. Here are 10+ best hosts on the market ...

Handpicked Articles

How to Make a WordPress Website: Ultimate Guide for All Users – Beginners, Intermediate, Advanced

Many people wonder how to make a WordPress website. They’ve heard about WordPress, its incredible popularity, excellent features and designs, and now they want to join the pack and build a WordPress website of their own. So, where does one get ...

How to Start an Ecommerce Business: Ultimate Guide for 2022

Is this going to be the year you learn how to start an eCommerce business from scratch? You’re certainly in the right place! This guide will give you a roadmap to getting from 0 to a fully functional eCommerce business. ...