Streaming live at 10am (PST)

Adding no follow links through webflow CMS

I understand it’s not currently possible to individually add no-follow tags to certain links in webflow CMS.

However, we publish a lot of blog content that includes some affiliate links through to amazon.

Is it possible to somehow add in some sort of blanket rule for my site that adds a no-follow tag to all amazon affiliate links?

2 Likes

I would greatly appreciate an answer on this too.

@Waldo any ideas of who to speak to about this? :slight_smile:

If all hrefs with amazon string inside - should be with rel="nofollow" very small custom code could solve this:

before body 1/2

Select all href contain amazon string

/*   *= is contains   */
var noFollowLinks = $('a[href*="amazon"]')

before body 2/2

The attr() method sets attributes and values for selected elements.

noFollowLinks.attr('rel', 'nofollow');

http://api.jquery.com/attr/

Summary (copy-paste)

<!-- change all amazon hrefs to nofollow -->
<script>
  var noFollowLinks = $('a[href*="amazon"]')
  noFollowLinks.attr('rel', 'nofollow');
</script>

Publish your site --> Live url - inspect code and see the rel=“nofollow”.

  • If not “all” amazon links should be with nofollow add example (Same idea - another selector).
2 Likes

sorry for my incredibly slow reply but I’ve only just looked at this
It worked perfectly so thank you very much!

I did the same for a few other affiliates and simply copy and pasted the same code four times, each time replacing the word and it seemed to work just fine :slight_smile:

1 Like

Just a quick follow up question, hope you can help :slight_smile:
I’ve now added a number of sites as nofollow.
So the code used now looks like this:


Is that correct? Or is there a way to shorten it and make it run faster?
Thank you in advance! Bradley

Your code is very long (Anyway no need each time to create <script></script> tag).

Try this Copy - paste before body (Jquery)

<script>
var noFollowArray = [
  "amazon",
  "ebay",
  "airbnb"
];  

noFollowArray.forEach(function(element) {
  console.log(element);
  var noFollowLinks = $('a[href*=' + element +"]")
  noFollowLinks.attr('rel', 'nofollow');
});
</script>

Only update noFollowArray array.

Important - remember to add , and "(open) and "(close) for each item/site (Common error).
Useful tool for this idea:
https://esprima.org/demo/validate.html

Publish --> Inspect element and see the rel added.

Heya :slight_smile:
Thank you for this, but it doesn’t seem to have worked. None of these links now have the rel attribute added in the published version of the site.
Here is the complete code:

<script>
var noFollowArray = [
  "amazon",
  "amzn",
  "ebay",
  "airbnb",
  "booking.com",
  "getyourguide",
  "viator",
  "miaomiao",
  "landedvibe",
  "hostelworld",  
];  

noFollowArray.forEach(function(element) {
  console.log(element);
  var noFollowLinks = $('a[href*=' + element +"]")
  noFollowLinks.attr('rel', 'nofollow');
});
</script>

Here is an example page with a number of such links that should now have the rel attribute:

Look at it using F12 inspector not view source.

1 Like

Are you able to quickly tell me where I’m going wrong please? :slight_smile:

What does that mean? :slight_smile:

It means the script is working. Source is rendered by the server, JavaScript is rendered on the client. You can’t see client side changes to the source. Only by using the inspector.

CloudApp

1 Like

Yeah but I inspected the code after changing the javascript and the links were no longer showing as nofollow. So surely the code is wrong?

I provided a screen shot of the source for the page you provided. The screenshot shows a link to booking.com that has rel=nofollow. I went back and looked right now. It is still there. Maybe you are looking somewhere else?

That’s because I changed the custom code back to how it was seeing as the new code doesn’t work. If you check you’ll see that

Well here is a live page with your RTE content and the script running. It works just fine.

https://codepen.io/wfhow/live/WVgzxZ

1 Like

Hey @Siton_Systems are you able to see what’s going wrong please? :slight_smile:

Make sure the script is placed before the </ body > tag, rather than inside the < head > tag, and it will work.

Unfortunately that doesn’t make it work. Any other ideas? :slight_smile:

I can’t provide much guidance other than this screenshot of the page’s settings on which I want nofollow to appear:

Copying the script in the thread above and pasting in this spot (as shown in the screenshot) should work flawlessly.