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>

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>

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:

Screenshot of WordPress's "link" module in the Gutenberg/block editor. "Open in new tab" has been toggled one.
The settings under the “Open in new tab” option (which we’ve toggled “on”) are provided by Yoast SEO. Not all WordPress sites will have them.

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 noreferrer") added by default. (That’s the weird HTML I was talking about above 🤓)


1 Response

Comments

  • James says:

    I really dislike the way WordPress inserts both of these options when adding links.

    Under the html spec, noopener should be used to prevent the new page from being able to access the window.opener property and ensures it runs in a separate process. This is a security thing.

    The noreferrer option includes the noopener settings plus hides referral.

    There is no need for WordPress to add both of them.

    From the spec: β€œIt indicates that no referrer information is to be leaked when following the link and also implies the noopener keyword behavior under the same conditions.”

    Source: https://html.spec.whatwg.org/multipage/links.html#link-type-noreferrer

Add a Comment

Your email address will not be published. Required fields are marked *