How to add "Nofollow" for image and button links?

Hi, 

I am trying to understand:

I was under the impression that you want most of your external links to be no follow but all of your internal links to your own site to be followed. So would you need the opposite scenario from above? Everything no follow except for links to your own site? How would you make an exception for an external link you are providing back links for, for example if you had a guest blog post or links to a copywriter you want your clients to work with?

@tuanphanI cannot thank you enough for providing this solution. Nofollow and sponsored links have been a problem for me for three years -- I kept hoping Squarespace would provide a solution. Your code will save me SO MUCH time. Again, I cannot thank you enough!!!!

On 4/5/2021 at 1:53 AM, cavitee said:

Hi,

I wonder if anyone can help me with a code which can nofollow multiple root sites. For example there are various pages i mention 2 different sites (ebay and amazon) which i want to set as nofollow. Can i just follow the same script but place "amazon.co.uk" (and a comma or something) before putting "ebay.com" like below?

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('[href*="amazon.com"],'[href*="ebay.com"]).attr('rel','nofollow');
});
</script>

@cavitee

Using commas to separate multiple sites did not work for me. However, this format worked:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>

$(document).ready(function() {
    $('[href*="amazon.com"]').attr('rel','sponsored');
    $('[href*="ebay.com"]').attr('rel','sponsored');
});
</script>

I hope this is correct, @tuanphan!
 

Hi All 🙂

Thanks for solving this. It also works for adding a tooltip to a button or link as follows:-

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>

$(document).ready(function() {
     $('[href*="amazon.com"]').attr('title' , 'Your tooltip text here');
});
</script>

Now when you hover over any button or link that points to amazon.com the tooltip appears.

Regards,

Simon.

On 3/4/2021 at 3:05 PM, tuanphan said:

We can use code to target links, but the link does not contain your domain, all will be set to nofollow.

Hi tuanphan, I wonder if this javascript solution will work with Google Crawler Bot, since initial all link still not have nofollow attribute until javascript kick in, let me know how you think about this

tuanphan

Not sure if I understand your note:

We can use code to target links, but the link does not contain your domain, all will be set to nofollow.

I've set up the no follow link for the entire site and it works perfect, thank you!

I'd like to turn all my internal links into do-follow.

I have been messing with combining the two scripts you've  provided like below but can't get it to work.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$("a").attr('rel','nofollow');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('[href*="bigwavesurfing.com"]').attr('rel','follow');
});
</script>

});
</script>4

how can i change one domain ( my site) to do-follow, while all external links stay NonFollow?

Skip to next answer.

-----

Hey @Surfjunk!

It's been over a year since your comment but if you or anyone else is wondering. Here is a the answer to your question: the code for marking groups/all external links - also at the end I included a plugin to make this easier for editing individual links.

According to MDN Docs there is no default value for the `rel` attribute. And `follow` is not a valid value. Now technically, if the value is invalid it defaults to no value and no value is what is considered the regular follow behavior.

Regarding your question about how to mark all links as `nofollow` but mark all internal links as do-follow, here are two equivalent solutions, and a third solution which is a continuation of your approach.

<!-- Approach 1: -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $('a[href^="http"]:not([href*="bigwavesurfing"]), a[href^="//"]:not([href*="bigwavesurfing"])').attr('rel', 'nofollow');
    });
</script>

<!-- Approach 2: -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $('a[href^="http"],a[href^="//"]').not('[href*="bigwavesurfing"]').attr('rel', 'nofollow');
    });
</script>

<!-- Approach 3: (Slightly less efficient: two DOM updates) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("a").attr('rel','nofollow');
        $('a:not([href^="http"]):not([href^="//"]), a[href*="bigwavesurfing"]').removeAttr('rel');
    });
</script>

The first solutions do the following:

1. Target all links that start with `http` or `//` (per the Protocol-Relative-URL). This is because most internal links are relative and do not include your or any domain name (ex: `/page-1` or `page-1`).

2. Exclude all absolute links (ex: `https://bigwavesurfing.com/page-1`) that are internal, as notated by the inclusion of your domain name. This can be done by using the css `:not` selector, or the jQuery `.not` method.

3. The targeted links are now all external (we selected all absolute links and filtered out any internal ones). Now set the attribute of `rel` to `nofollow`.

The third solution follows your approach. It marks all anchor tags (links) as `nofollow`. It then goes and finds relative links (which we know are internal) and absolute links with the matching domain and removes the `rel` attribute, making them do-follow.

Edge cases: All solutions have the following edge cases.

1. If their is a domain as notated by `http` somewhere else in the URL, like a url query. This is supported and won't get targeted as a nofollow link. This is supported by only looking for `http` and `//` as prefixes.

2. There is a empty name folder resulting in a double slash `//` directory navigation. This is also supported and won't get targeted as a nofollow link, although I don't think Squarespace supports this even happening in the first place as of writing. This is supported by only looking for `//` as prefixes.

3. The do-follow target domain (your domain) is in a url query. This edge case is not supported in the first 3 solutions. If your domain name is in an external link (ex: `https://external-site.com/affiliate-link?referrer=bigwavesurfing.com`). This will be marked as do-follow. To address this the code would have to be exampled to look for all variations of `http://bigwavesurfing.com` `https://bigwavesurfing.com` `http://www.bigwavesurfing.com` `https://www.bigwavesurfing.com` `https://www.bigwavesurfing.com` `//www.bigwavesurfing.com` rather than just `bigwavesurfing.com`. Note that just adding `www.` likely won't help. 

Here is a more robust solution for adding support for that edge case.

<!-- Approach 4: -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $('a[href^="http"],a[href^="//"]').not('[href*="http://bigwavesurfing"], [href*="https://bigwavesurfing"], [href*="https://www.bigwavesurfing"], [href*="http://www.bigwavesurfing"], [href*="//bigwavesurfing"], [href*="//www.bigwavesurfing"]').attr('rel', 'nofollow');
    });
</script>
<!-- Approach 5: Variable for easier editing -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        var DOMAIN = "bigwavesurfing";
        $('a[href^="http"],a[href^="//"]').not(`[href*="http://${DOMAIN}"], [href*="https://${DOMAIN}"], [href*="https://www.${DOMAIN}"], [href*="http://www.${DOMAIN}"], [href*="//${DOMAIN}"], [href*="//www.${DOMAIN}"]`).attr('rel', 'nofollow');
    });
</script>

-----------

I also wrote a tiny script that allows you to put "&rel=sponsored" or "&rel=nofollow" at the end of any link URL in the Squarespace link editor (or anywhere) and the plugin script will update the anchor tag with the rel attribute.

It's worth mentioning, that to utilize this plugin (or any other JavaScript solution), you'd need to be on a Squarespace plan that supports JavaScript. Then import the script and once set up, the plugin makes the process almost effortless.



For anyone interested, here's the link to the free plugin for easy access: Excito's Squarespace Affiliate Link Plugin (https://www.excitollc.com/squarespace-plugins/squarespace-affiliate-link-plugin).

Hope this helps!
 

Found a better answer provided by @tuanphan in another discussion.

For more insight and explanation look at my previous response, but the approaches are not longer necessary. All edge cases are covered by this answer.

I made one adjustment to @tuanphan answer. By returning undefined, we leave the `rel` attribute unchanged, in case it was previously set. Also while invalid values default to the same as an unset value, no value is what is considered follow or do-follow behavior.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function () {
    $('a').attr('rel', function () {
      if (this.host == location.host) return undefined;
      else return 'nofollow'
    });
  });
</script>

<!-- Equivalent slightly shorter version: -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function () {
    $('a').attr('rel', function () {
      if (this.host !== location.host) return 'nofollow'
    });
  });
</script>

Also, in the previous answer, I linked a plugin for handling nofollow behavior on individual links.