Ability to Add "No Follow" Links Via the Toolbar

Ideas
1

Highlighting text, and clicking on the link option via the toolbar is nice and straightforward way to add links. However, it doesn’t give you the option to make those links “no flollow”, only to make them open in a new window, et cetera.

The link component gives you this option, but I find it both time-consuming and fiddly, especially when you have lots of external links to add.

Other software programs I’ve used, such as WordPress gives you a tick box, to enable the option. It would be nice if this was present in Bootstrap Studio.

1 Like
2

A workaround could be to do it with JavaScript. Here’s a snippet that does just that:

document.addEventListener('DOMContentLoaded', function() {
  const links = document.querySelectorAll('a');
  links.forEach(link => {
    if (link.href.startsWith('http')) {
      link.setAttribute('rel', 'nofollow noopener');
    }
  });
});
3

Thanks for tip. Unfortunately, this also makes internal links “no follow”, when I only want to apply it to external links. Anyway to modify the code?

Many thanks.

4

Normally, your internal links start with /, followed by the page name (e.g., /index.html), unless you manually specify the protocol and hostname in your internal links
(e.g., https://example.com/index.html).

If you manually add https to your internal links, you can open external links in a new tab and modify the script to select all links with target="_blank" instead of filtering by http.

If you select your internal links from the options panel, the original script will not select internal links.

1 Like
5

Thank you for the suggestion! This would be a good addition to the link dialog, we will add it in one of our next updates.

2 Likes
6

@martin

Will you also add other options to the link dialog, such as:

  • Class names for styling
  • Custom attributes (e.g., title, data-, aria- for accessibility)?
1 Like
7

I can see a case for title and aria-label but the rest seems like too much duplication with the attributes panel and users should use Link component instead.