Adding custom attributes to links in dynamic rich text

Design help CMS
1

Hello!
I always add custom attributes of rel=“noopener” to any external links on my websites to prevent this ‘links to cross-origin destinations are unsafe’ warning in Google lighthouse.

google-lighthouse
google-lighthouse598×608 37 KB

However I can’t figure out a way to apply this attribute to links in dynamic rich text coming from a CMS collection.
I know you can add custom attributes to links in static rich text like so:
static-attribute
static-attribute1921×1010 109 KB

Unfortunately, as soon as I get the rich text from CMS collection, there’s no way to add these attributes. It’s also not possible to add attributes when editing the rich text of your CMS, the only available settings are link type and ‘open in new tab’
link-settings
With my very limited coding knowledge I also tried adding this custom code but it didn’t work:

<style>
.rich-text a{
rel="noopener"
}
</style>

Any help would be appreciated!

Here is my public share link: [LINK][1]
([how to access public share link][2])

Live website: https://radkas-fantastic-site.webflow.io/blog/et-quo-voluptatem-est

2

I’d love to know how to add custom attributes to rich text too.

3

@Evan1 - here you go

@Radka - in case you’re still looking

That’s actually a CSS style element you’ve put in, but you have the right idea.
As script, you could do this; place it in the before /body section, site-wide or on the pages you want;

<script>
$(function() {
  $(".rich-text a").attr("rel", "noopener");
});
</script>

However, lighthouse may evaluate the page before the script has run, in which case it won’t make those errors go away, even thought the attribute exists after the page runs.

2 Likes
4

Thank you @memetican

1 Like