Just recently Google’s Matt Cutts announced a change in how Google handles NoFollow attributes in links thus making a “rel=nofollow” useless on your JavaScript-enabled onClick event handlers. The best method in this case would be to hide links on your page that you would normally have used “nofollow” on so you could only show them via JavaScript.
Instead of using “rel=nofollow” on your links as you did previously you may want to hide the links completely and only make them appear when JavaScript is enabled. You should also show a user which does not have JavaScript enabled that there is a link but it is not enabled. So I decided to create a small JavaScript which converts <span> elements with a specific class name to links when the user has JavaScript enabled. If there is no Ja
vaScript the “links” will look like this:
If JavaScript is enabled and the page has finished loading the links will look like this:
This is the HTML code for the <span> tag which will be converted into a link which needs to be given as the title attribute of the element:
1 |
<span class="hiddenJSLink" title="http://www.saschakimmel.com/">Hidden Link</span>
|
This is how the link will look after the script has been executed:
1 |
<a href="http://www.saschakimmel.com/">Hidden Link</a>
|
You can also add both an id and additional classes to the source <span> – they will be copied to the final link.
The script requires the prototype.js JavaScript framework – I am using this because I know that many websites are already using it on their pages.
This is some code of an example HTML page – you can download it and the JavaScript file in a package below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Hidden Links</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="hiddenLinks.css" type="text/css" />
<script type="text/javascript" src="prototype-1.6.0.3.js"></script>
<script type="text/javascript" src="hiddenLinks.js"></script>
</head>
<body>
<ul>
<li><a href="http://www.saschakimmel.com/">Normal Link</a></li>
<li><span class="hiddenJSLink" title="http://www.saschakimmel.com/">Hidden Link</span></li>
</ul>
</body>
</html>
|
So in essence the only thing you need to do is to add these three lines of code to the <head> section of your HTML file after you have downloaded the JavaScript/HTML/CSS package below:
1 2 3 |
<link rel="stylesheet" href="hiddenLinks.css" type="text/css" />
<script type="text/javascript" src="prototype-1.6.0.3.js"></script>
<script type="text/javascript" src="hiddenLinks.js"></script>
|
Acessibility Notice!
Please note that from an accessibility standpoint using JavaScript is not recommended as it renders the links useless on screen readers. But currently there seems to be no other way to hide links from Google for legitimate PageRank sculpting.
License
This code by Sascha Kimmel is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License. This means that if you are using it on your site (personal and commercial sites are ok) you need to add a link somewhere (only on one page) as provided here:
1 |
HiddenLinksJS by <a href="http://www.saschakimmel.com/" target="_blank">Sascha Kimmel</a>
|
If you don’t want to add a link to your site you can donate any amount to my PayPal account which will entitle you to use the HiddenLinkJS on any page without any requirement for adding a link:
View hiddenLinks.js
View hiddenLinks.css
View hiddenLinks.html demo page
Tags: javascript, nofollow, Prototype.js, seo
It’s sad that it’s come to this again but if I have to use javascript for links then I will
Good work!
[...] « Seo …Should We Abandon ‘No Follow‘ Tags? | Kikabink News – Internet …How To Hide Links To Avoid NoFollow PageRank Sculpting Issues …Why I Won’t Follow You Back on Twitter | Snipe.NetWho Do I Follow On Twitter – 5 Tips (for [...]
does this actually work? The links show up in google’s cache when you do this, and they also show up on link checker tools: http://www.seochat.com/seo-tools/site-link-analyzer/
Of course it shows up in Google’s cache because JavaScript is still executed in your browser if you are accessing the Google cache version of the page. If the link shows up in a link checker it will surely be a fault in the checker because it’s simply not a link at all – I suppose the link checker only uses a regular expression to extract everything that begins with an “http://” – but that is not necessarily a link.
Nice script !
Clearly, we need that kind of trick, now.
Is there a way to open the link in a new window ?
Not currently, but with a bit of work this is possible as well.
Thanks for post. It’s really imformative stuff.
I really like to read.Hope to learn a lot and have a nice experience here! my best regards
guys!
–
aad!
–
how do i apply this for a joomla menu item?
please help!
Nice post and thanks for the download, javascript is the only way to hide links from search engines to crawl. Anyway, have you also build such code that could be use as a plugin for a wordpress.
From what I gather, if you use the no-follow tag, it is like telling the search engines that you don’t trust that site. Not sure if that is true, but all of the more reason to hide no-follow links with a java script.
My thoughts are, I wonder if this script could be made into a WordPress plugin? That would be pretty useful if the plugin could do all of the work for you.
Is it possible to rewrite this to work with jquery instead of prototype? I have jquery on my site already and these two are not very compatible. I tried some of the fixes around the net but no go. Besides, I really shouldnt have two frameworks going at once. Thanks in advance!
Should be possible but I’ve never used jQuery so I’m sorry for not being able to help you.
Very interesting take on hiding links from the bots. Question. Doing some testing with it and not able to get it to work correctly when a page is in a folder. Works fine on the home page.
Thoughts as to why?
Dear Author,
Does this javascript workaround still work?
Has G picked up on it yet?
How do you calculate that this actually works and that you can redirect your link love to your inner pages over say your category pages?
John
Is it possible to specifie color for the texte and having somethink else than blue ?
I have tried to simply put:
.hiddenJSLink {color: #FFFFFF;}
.hiddenJSLink:hover {cursor:progress; color: #003366; text-decoration: underline;}
but it does not work ;?
Very good script but i need to open my link in a new window.
)
I am not good in javascript so someone could help me ?
Thank you