Ability to add rel="nofollow" to links within the CMS Editor on Rich Text Fields - Up your SEO Game

Hi Redleo,

Thank you for this script, it seemed like the ultimate solution for the affiliate links on my blog, but for some reason it doesn’t work on my website.
I have tried several times and pasted the script in the head of the blog post template page, but instead of rel= nofollow - I just see the “#nofollow” at the end of the link.
Any ideas?

Thank you so much!!

Ami from Yesbaby

read only

For now - Very simple code solution.

WARNING
** Will override all External - rich-text links.
** Sometimes one website have more than one domain (sites group -or- diff url for login and ideas like this) - in this case - do not use this code.

Your site domain for example:

www.paris.com

Before body (On blog CMS page):

<!-- add rel="nofollow" to all rich text block External links -->
<script>
let host = window.location.host; // return www.paris.com
let all_post_links = $('.w-richtext a'); // all a elements inside w-richtext 

/* loop throw all a links */
all_post_links.each(function( index ) {
  let current_href = all_post_links[index].href; /* return X of Y href */
  if(! current_href.includes(host)){
      /* if domain do not include host name = outer link => add not follow */
     console.log( "Add rel nofollow to: "  + current_href );
     $( this ).attr("rel","nofollow");
  }
});
</script>

Console:

More than one rich-text on a page? Change the selector to be more specific:

let all_post_links = $('.my_article.w-richtext a'); // all a elements inside .my_article
4 Likes

Hi Siton,

Thank you for this! I tried it and it works like a magic.
I keep looking for a more specific way, like to add #nofollow to the link itself and change it to rel nofollow.

Thanks a lot

read only

1 Like

Thank you for this.

Is there any way to add links to dofollow in this code. A few of my sites need a couple of dofollow links I would like to exclude from the nofollow tag.

Thank you in advance.

In general it related to the case. One way is to create array of “exclude” links (Separate by comma).

let host = "hello.com"; // return www.paris.com
let all_post_links = $('.w-richtext a'); // all a elements inside w-richtext 

let exclude_from_no_follow = [
  "cnn.com",
  "nike.org"
]

/* loop throw all a links */
all_post_links.each(function( index ) {
  let current_href = all_post_links[index].href; /* return X of Y href */
  if(! current_href.includes(host)){
    /* if domain do not include host name = outer link => add not follow */
    console.log( "Add rel nofollow to: "  + current_href );
     $( this ).attr("rel","nofollow");
    
    /* EXCLUDE LIST */
    for (i in exclude_from_no_follow) {
      let exclude_url = exclude_from_no_follow[i];
      if(current_href.includes(exclude_url)){
        /* DO Something for exclude list */
        $( this ).attr("rel","follow");
        /* or remove by $( this ).removeAttr("rel")
      }
    }
  }
});

image

Legend thank you for the code

Fixed the code of @Redleo. Just place this piece of code before the body tag, add #nofollow to the end of any URL, and it should work like a charm.

$("a").each(function() {
  var url = ($(this).attr('href'))
  if(url.includes('nofollow')){
    $(this).attr( "rel", "nofollow" );
  }else{
    $(this).attr('rel','dofollow')
  }
  $(this).attr( "href",$(this).attr( "href").replace('#nofollow',''))
  $(this).attr( "href",$(this).attr( "href").replace('#dofollow',''))
});

Hi @RoryVB, tried your code but it’s not working. Added it before the body, but it’s not working on my page (check the Notion link).
Screen Shot 2023-03-06 at 4.17.47 PM

I can’t believe Webflow doesn’t have this feature. It might be a deal-breaker for me using it, and I REALLY want to move away from WordPress for my main site.

3 Likes

This worked for me! Thanks

1 Like

Which link on the page are you trying to add the nofollow to?

Is this seriously still not a feature?

2 Likes

I tried and pasted the code into my project, but it did not work. Maybe I misunderstood where or how to use.

Do you mean that the code itself should be inserted in the head, and the links themselves need to write #nofollow, just to the end of the link. If so, that’s what I did and nothing worked. Can you give me a hint, maybe I misunderstood you.

Thanks for your reply))

Hi @Vlad_Usenko!

This is what a link in the cms should look like:
image

https://www.perspective.design/example/example/#nofollow

This would be the result in:

The default would be:

Code should be placed in page settings before the body tag:
image

<script>
$(document).ready(function() {
  $("a").each(function() {
    var url = ($(this).attr('href'))
    if(url.includes('nofollow')){
      $(this).attr( "rel", "nofollow" );
    }else{
      $(this).attr('rel','dofollow')
    }
    $(this).attr( "href",$(this).attr( "href").replace('#nofollow',''))
    $(this).attr( "href",$(this).attr( "href").replace('#dofollow',''))
  });
});
</script>

Edit: Added Ramans $(document).ready function

1 Like

Thank you very much for explaining :pray::pray::pray::pray:

1 Like

I have added to @RoryVB 's snippet

In some instances that code will not work as it waits for document readiness.

This snippet will work.

$(document).ready(function() {
$(“a”).each(function() {
var href = $(this).attr(“href”);
if (href && href.includes(“nofollow”)) {
$(this).attr(“rel”, “nofollow”).css(“color”, “red”);
} else {
$(this).attr(“rel”, “dofollow”);
}
});
});

1 Like

Just adding my voice of disbelief that this isn’t natively possible in Webflow and that (as usual) it seems the solution seems to be adding code to a platform that prides itself on being no code.

We have marketers who use our CMS and we need to make it as easy for them to do this. This discussion has been going on for five years now, it’s absurd.

3 Likes
$(document).ready(function() {
$(“a”).each(function() {
var href = $(this).attr(“href”);
if (href && href.includes(“nofollow”)) {
$(this).attr(“rel”, “nofollow”).css(“color”, “red”);
} else {
$(this).attr(“rel”, “dofollow”);
}
});
});

Thanks for this code snippet. Can I clarify, should this go in the head or before the closing body tag?

Thank you.

The code should be placed before the body tag

@RoryVB

Thanks for your reply. I placed it in the head and it still doesn’t seem to be working. I’m trying to add nofollow to the news websites I’ve linked toon my bio page

I’ve added the #nofollow to the end of each of the links but it’s not adding rel=“nofollow”

Fyi, I think the script might have accidentally added rel=“nofollow” to the navbar About link as well as a div with class cms_rte w-richtext that wraps the content starting with ‘Background and Career’.

Here’s my share link:
https://preview.webflow.com/preview/semh?utm_medium=preview_link&utm_source=designer&utm_content=semh&preview=40abbf0ec7016c9018e7676b025fdd2d&pageId=64cfcabad93ac10636bbdeae&itemId=64cfcabad93ac10636bbded5&workflow=preview

I’d be grateful for any help you can provide, thank you.

Graham

You should place it before the body tag, not the body.