Adding the nofollow attribute to external links with jQuery

andyMatthews.net

Adding the nofollow attribute to external links with jQuery

Today over at House of Fusion Jeff Becker asked:

I'm looking for a working rel="nofollow" regex to modify links. For example:
Goto <a href="http://google.com">Google</a> now!
turning it into:
Goto <a href="http://google.com" rel="nofollow">Google</a> now!

While Jeff was looking specifically for a ColdFusion option, I wanted to let him know how simple this would be to add using jQuery. First, the links:


&lt;a href="/somepage.html"&gt;This is an internal link&lt;/a&gt;

&lt;br /&gt;&lt;br /&gt;

&lt;a href="http://google.com"&gt;And this is an external link, with no follow&lt;/a&gt;

Secondly the 45 characters of jQuery needed to convert all external facing URLs and add the nofollow parameter


$('a[href^="http"]').attr('rel','nofollow');

All hail jQuery.

See the results in action.

It was pointed out to me on Twitter, and via the comments in this post, that this particular example might not be the best use of jQuery's magic. Why? Because search engines / spiders don't execute JavaScript. This, however, is incorrect...or at least not one hundred percent accurate. I did a quick search and found several search engines that reportedly execute JavaScript code. So, while there are FAR better uses for jQuery's magic, this post stands as a good example of how to add attributes to elements using jQuery.