Change <Bold > to <Strong>

Hello,

I need to change all my attribute to .

Can you explain me how I can do this in my webflow ?

Kind regards,

Here is my site link only

https://preview.webflow.com/preview/ferrstudio?utm_medium=preview_link&utm_source=designer&utm_content=ferrstudio&preview=8ce34230447b4da555b8cac6977ab89c&workflow=preview

If you want any assistance please follow the posting guidelines.

Thanks you @webdev I updated

Can you elaborate on that?

I want to highlight some text to , do you know how to do it ?

If you are talking about text formatting there is a page in the Webflow University that I recommend you review if you haven’t. It should help you resolve your issue.

If you are still stuck, let us know.

Hello Jeff,
Thanks for your anwser, are you part of webflow team ?

This is exactkly what I want, but instead of bold I want to add strong

Do you have an idea how to do it ?

It’s important for our SEO

Regards,

Hi @Pandore
I am not part of Webflow. I have my own company and am just a long term community leader whom lends a hand where I can.

As for the difference between bold and strong for SEO there is none as both are supported HTML tags. If you want to control the inline element then you can use custom code if your plan supports it but this approach creates potential editing limitations. My recommendation would be to focus your efforts on more impactful things.

1 Like

Thanks a lot for your time.

It’s a new way to win points on SEO with google.

Do you know some tuts on how to do it ?

Kind regards,

Do you have any modern guidance from Google on this change?
According to Google Engineer Matt Cutts, the SEO value of semantic <strong> was a misconception for a long time. He states that there is no difference to Google between <b> and <strong>.

Strong and Bold Tags - Seobility Wiki.

However I’ll add that it does make a difference for certain screen readers, so if you’re hard-out on specific a11y requirements, it could be worth the custom code hit.

1 Like

A last update, anyone ?

Hi @Pandore here is a simple example of how it can be done. But…
HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p><b>bold</b></p>
    <p><b data-strong>bold->strong</b></p>
    <p><b>bold</b></p>
    <p><b data-strong>bold->strong</b></p>
    <script src="script.js"></script>
  </body>
</html>

To change node tags only for certain <b> tags, add something _(class, attribute, etc.)_to grab only these.

JS

const boldToStrong = document.querySelectorAll("b[data-strong]");

boldToStrong.forEach((b) => {
  // regex replace node <b></b> to <strong></strong>
    b.outerHTML = b.outerHTML.replace(/<b\b[^>]*>/i, "<strong>");
});

// check if node tags changed
setTimeout(() => {
  console.log(document.querySelectorAll("strong")); // returns 2 <strong>
  console.log(document.querySelectorAll("b")); // returns 2 <b>
}, 1000);
1 Like

Still waiting for your answer Christopher. Everything we know at this point is that this is a waste of energy. <b> and <strong> are identical to Google. Same with <i> and <em>.

the article you have posted is from 2014. MDN says there is a difference.

It is often confusing to new developers why there are so many ways to express the same thing on a rendered website. <b> and <strong> are perhaps one of the most common sources of confusion, causing developers to ask “Should I use <b> or <strong>? Don’t they both do the same thing?”

Not exactly. The <strong> element is for content that is of greater importance, while the <b>element is used to draw attention to text without indicating that it’s more important.

The truth is that Google’s last few years have pushed a lot on accessibility for ranking and screenreaders fall into this group.

It is a minor thing to have a noticeable impact on ranking. Just saying If @Pandore need <strong>:man_shrugging:

Agree, just pointing out that all of the current information from Google itself is that they do not differentiate, even though the purpose of the tags was styling v. semantic.

Part of the reason I’m trying to determine whether <strong> support is worth the effort is that SA5’s Rich Text lib has a markup feature in alpha. It supports macro expansions, etc, but also arbitrary class assignments, ID assignments, etc.

It wouldn’t be hard to add markup for strong support, but as far as I can tell it would only benefit a small set of advanced a11y projects.

Agree, all depend on website content and their clients as making a website that fulfil a11y is extremely hard and takes time especially when you turn text to speech to make it the correct way together with Tab key jumping to correct content when zoom is 300% etc. but that is another story. :sunglasses: :man_shrugging:

1 Like

God is in the details @memetican

Thanks for the code and the tips @Stan I’m sure it will help people too.

:laughing: :joy: :rofl:

Ludwig would be proud, but the more common saying is the devil is in the details.
You’re much more likely to harm your core vitals and consequently your SEO by slowing down your site with unnecessary scripts.

If you do decide to actually do your research and find anything really useful from Google engineers, do share it. I’ll put this on the SA5 backburner for now, maybe make it part of our a11y lib.

1 Like

IMHO this script will have no impact on page speed or SEO. BTW if I remember you are recommending calling your library for things that can be done internally. Not bad feelings as WF functionality is pure and needs to be hacked in many cases, I’m just saying.

1 Like

I have found the video from 2023 on Google Search Central that confirms that is SEO beneficial to use semantically correct HTML.

There are a few other new articles about <b> vs <srong>.

The thing is that WF should have it as option along <b> tag

1 Like