Jump to content

Add NoFollow to Image Caption?

Recommended Posts

Site URL: https://thedetoureffect.com/blog/digital-nomad-gift-ideas

Hi there,

I found out that I can give an image link a nofollow attribute by pasting this onto the end of the affiliate link: "rel="sponsored

This works when you click on the image itself. But if I write a caption and try to include a link there, it doesn't work. Example: I chose the "overlap" design for my images here because it looks cooler than other methods of advertising/linking to products. I wrote long captions to go with each image and included some links in the caption. If I paste "rel="sponsored onto the end of those links, clicking on the links will bring up an error. So I removed "rel="sponsored from all of them, but this is going to hurt my SEO ranking. 

Any ideas? 

Thank you!

Link to comment
On 10/26/2021 at 9:56 AM, TheDetourEffect said:

Site URL: https://thedetoureffect.com/blog/digital-nomad-gift-ideas

Hi there,

I found out that I can give an image link a nofollow attribute by pasting this onto the end of the affiliate link: "rel="sponsored

This works when you click on the image itself. But if I write a caption and try to include a link there, it doesn't work. Example: I chose the "overlap" design for my images here because it looks cooler than other methods of advertising/linking to products. I wrote long captions to go with each image and included some links in the caption. If I paste "rel="sponsored onto the end of those links, clicking on the links will bring up an error. So I removed "rel="sponsored from all of them, but this is going to hurt my SEO ranking. 

Any ideas? 

Thank you!

I don't see image caption. Can you take a screenshot?

https://thedetoureffect.com/blog/digital-nomad-gift-ideas

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 10/28/2021 at 2:34 AM, TheDetourEffect said:

With the overlap style, all of the text next to each image is the caption; those aren't text boxes, they're part of the image block:

 

Screen Shot 2021-10-27 at 3.32.58 PM.png

I thought they are image, looks text same as image ☝️

Try adding this code into Settings > Advanced > Code Injection > Footer

<script>
$(document).ready(function() {
	$('.image-card a[href*="amzn.to"]').attr('rel','nofollow');
});
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 10/29/2021 at 5:34 AM, tuanphan said:

I thought they are image, looks text same as image ☝️

Try adding this code into Settings > Advanced > Code Injection > Footer

<script>
$(document).ready(function() {
	$('.image-card a[href*="amzn.to"]').attr('rel','nofollow');
});
</script>

 

Thanks! How do I know if it worked or not?

Is "amzn.to" a reference to Amazon? Some of my links are not Amazon, I have some other types of affiliate links in there

Link to comment
On 10/31/2021 at 9:49 PM, TheDetourEffect said:

Thanks! How do I know if it worked or not?

Is "amzn.to" a reference to Amazon? Some of my links are not Amazon, I have some other types of affiliate links in there

Hover on link >> Right Click >> Click Inspect Element >> and find rel="nofollow"

The code didn't work, try this new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('.image-card a[href*="amzn.to"]').attr('rel','nofollow');
});
</script>

Which affiliate links you use on your site?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...
On 11/2/2021 at 2:26 AM, tuanphan said:

Hover on link >> Right Click >> Click Inspect Element >> and find rel="nofollow"

The code didn't work, try this new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('.image-card a[href*="amzn.to"]').attr('rel','nofollow');
});
</script>

Which affiliate links you use on your site?

Holy smokes I think that did it for the Amazon links!! Wow, thank you so much! I really appreciate you, I wasn't sure if this would be possible. I bet I will use this code all the time on lots of posts now.

The other affiliate programs I use are AvantLink and TravelPayouts

Edited by TheDetourEffect
Link to comment

Actually, sorry, I think I'm wrong - I replaced the term 'nofollow' in your code with 'sponsored' instead, but when I did "inspect" it still said 'nofollow', so maybe it wasn't working? I think what I was seeing under "inspect" when I thought it was working, was actually a result of trying out this code in my footer injection. When I went into there and replaced nofollow with sponsored, and then tried to inspect again, it did update to sponsored.

Next to where it says 'a[href*="amazon.com"], a[href*="amzn.to"], I wrote in the following so that it would work for avantlink and travel payouts too:

a[href*="alnk.to"], a[href*="avantlink.com"], a[href*="tp.media"]'

And now when I inspect my avantlink links in the image card, they are rel=sponsored in addition to my amazon links. So I think I'm set?! Unless anyone has an opinion that this code is not ideal for whatever reason. 

(Just writing this all out in case anyone else has the same question and comes across this thread)!

If this means I can stop manually doing a markdown block to insert nofollow/sponsored code individually for every single link I am going to jump for joy. I'm a little nervous to stop doing that though since I'm in the habit, I'm not sure if I trust my footer code injection.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.