When & How to Use Noopener Noreferrer in WordPress

It’s pretty common for WordPress folks to start looking harder at their page’s HTML from time to time. If you find yourself doing that, you may see this rel="noreferrer noopener" on some links. What’s noopener noreferrer? You’re in the right place to find out. Short answer: it’s a security measure for when you want a link to open in a new tab (or window) for your website visitors. It’s additional security related to target="_blank", if you know what that is. But we’ll get to that in a bit…

Make a Link Open in New Tab, the Video

We often shoot videos for our Quick Guide, and this one is one way for you to learn about this “noreferrer” thing.

Quick note: the “sponsored” and “noindex” options that I mention and discuss at the end of the video are provided by the Yoast SEO WordPress plugin. If you don’t see them, it is because you’re not running that plugin. It’s not a problem at all 🙂

Also, the Mozilla Development Network article referred to in the video is “Link types: noreferrer.” It’s quite short, but the “MDN” is a great resource from the makers of Firefox.

Make WordPress Add noreferrer noopener to a Link

So, you want to make a WordPress link point open in a new tab? That’s when WordPress will automatically also add the noopener noreferrer. What happens when you make a link open in a new tab is that the underlying HTML of the link changes. A “normal” link’s HTML will look like:

<a href="http://example.com">Example.com is cool</a>Code language: HTML, XML (xml)

But to make a link open in a new browser tab (or window) you’ll want the HTML to look like:

<a href="http://example.com" target="_blank" rel="noopener noreferrer">Example.com is cool</a>Code language: HTML, XML (xml)

If all of that looked like “weird programming stuff” to you, don’t worry. WordPress makes this controllable with a quick little click. Here’s a screenshot of that:

Basically, here’s how you make WordPress open a link in a new tab:

1. Create a link. (Here’s our Quick Guide about doing that in Gutenberg.) My favorite method of making links in WordPress is is to just “Paste” over a highlighted block of text. It’s like magic!
2. Then you’ll want to make it open in a new tab, to do that you’ll click the link in the Gutenberg block editor, which will bring up the “link options” menu.
3. In this “link hover menu” you will see the URL of your link, and below that a toggle labelled “Open in new tab” (pictured above). When “Open in new tab” is toggled “on”, the link will have noopener noreferrer (that is rel="noopener") added by default. (That’s the weird HTML I was talking about above 🤓)