Adding the nofollow attribute to external links with jQuery
Filed under: jQuery
comments (13) Views: 7,396
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:
<a href="/somepage.html">This is an internal link</a>
<br /><br />
<a href="http://google.com">And this is an external link, with no follow</a>
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.
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.
If this article was interesting, or helpful, or even wrong, please consider leaving a comment, or buying something from my wishlist. It's appreciated!
Given that search engines don't process JavaScript, I'm not sure this would be necessarily equivalent to doing adding those "nofollow" attributes on the back-end :-/.
Alex Bischoff - January 16, 2009 01:52 pm
Only problem with this is that spiders donâ??t execute javascript while crawling the page...
Brandon Kelly - January 16, 2009 01:54 pm
Yeah, but the problem is this: this is useless :) google doesn't know javascript. And I don't think you want to add nofollow only for... users, right? :D
Ionut Staicu - January 16, 2009 02:01 pm
I may be confused here, but... isn't this rather useless, given that the whole point of rel="nofollow" is to be spotted by Google and other crawlers, which (IIRC) won't execute Javascript?
Yoz - January 16, 2009 02:02 pm
Which search engines execute JS when crawling pages?
Rob Kenny - January 16, 2009 02:16 pm
mmm but who uses Alexa or SearchMe to search?, I mean google is still the big mamma on this field, and it doesn't executes javascript. But.. I agree with you that this is a nice and simple example of how to add attributes to elements with jQuery.
Yëco - January 16, 2009 02:31 pm
Thanks for your comments everyone. Like I mentioned in my update, it's not the best example of jQuery's power, but I still thought it was a good way to illustrate to Jeff how jQuery could be used.
andy matthews - January 16, 2009 02:39 pm
While this may not be that useful in most situations... it could be quite useful when using server-side javascript technologies like Jaxer.
Mr. Awesome - January 16, 2009 02:59 pm
I agree with everybody, it's useless as searchengines don't interpret JS. Following your example, I use something similar for adding "target=_blank" without touching HTML (in order to validate with Strict Doctypes). Something like this: $("a").attr("target","_blank");
Marcelo - January 16, 2009 04:38 pm
Marcelo... I use almost the very same line of code on this site. Only difference is that I only apply the target='_blank' to a class of extLink.
andy matthews - January 16, 2009 07:07 pm
Well, if not for rel=nofollow we can implement jQuery for other obvious reasons. Rock on jQuery! :)
Lenin - January 16, 2009 10:43 pm
Do follow links attract a lot of spam...but i still think it is the best bet as far as attracting new comments on young blogs is concerned !!
Viraj Sawant - March 06, 2009 01:48 pm
Googles DOES process javascript. Take a look to this page: http://www.antezeta.com/blog/google-css-javascript
Tester - June 27, 2009 11:33 am