SEO Friendly JavaScript URLs

This is a really simple topic, but something so many developers get wrong. Lets imagine you have a page showing photographs. When you click on the next button, you want some nice friendly JavaScript to take the user to the next photo. You develop a function to do this called “showNextPicture()” and put this on your Next button:

<a href="javascript:showNextPicture()" title="Show Next Photo">Next Photo</a>

The problem here is that users without JavaScript (and search engines) cannot follow the link to the next photo. Instead, a link like this works so much better:

<a href="link-to-next-photo.php" onClick="showNextPicture(); return false;" title="Show Next Photo">Next Photo</a>

In this case when the user has JavaScript enabled then their browser does the following when clicking on that link:

• See’s the onClick event, runs the showNextPicture() function.
• See’s return false, which tells it not to follow the href

If the user has JavaScript disabled (or is a search engine) then it does the following when clicking on that link:

• It doesn’t understand onClick, so it ignores the NextPicture() function
• Instead it just directly follows the href link

All users get a great user experience, and you end up with your pages properly indexed in the search engines.