Adding target = noopener to links

Lighthouse is complaining about some of my external links showing as target = blank. Is there a way of changing to (what I understand to be best practice) noopener?

Target and rel are different attributes. If you want to add as an attribute that can be added in the designer. If you need it inside RTF’s then the approach is to use custom code to add the attribute on all links that are external. You may also consider “nofollow” when appropriate. There are posts in this forum that show how it is done with jQuery or vanilla JS.

Note: Setting target="_blank" on <a> elements implicitly provides the same rel behavior as setting rel="noopener" which does not set window.opener . See browser compatibility for support status. -MDN

So I would ignore the lighthouse recommendation in that case, unless you have to support a browser that does not treat them the same like IE.

MDN is an authoritative reference for HTML, CSS, JavaScript (and more) that I recommend you bookmark. Always check there first for these types of questions.

Thanks, Jeff, I’ll have a hunt around.

I updated my post. See the NOTE.

1 Like

Hey Jeff, replying to an old sort-of-related post. Hope you don’t mind. I’ve been told by my client’s devs that the Linkedin and Twitter links I’ve added to their website might have some vulnerability issues. So they want to add code to the HTML. Basically they want to change

a href=“” target=“_blank” class=“link-block-4 w-inline-block”


a href=“” target=“_blank” rel=“noopener noreferrer nofollow” class=“link-block-4 w-inline-block”

Is there a way I can add - rel=“noopener noreferrer nofollow” - via the custom code?