Search Engine Friendly AJAX Navigation

By Mike Duffy

AJAX is an excellent technology for providing interactive responsive websites. Most popular websites today use AJAX in one form or another. However, AJAX is an organic technology that has grown out of a need to lever more interactive techniques into a system that was never designed to work this way.

The fundamentals of the world-wide web are quite simple. The web is composed of web sites which in turn contain pages. All these pages are linked together in various ways by interconnecting links between each other. The address of a web page describes its exact location, and returning to that address should give you the same page.

The problem comes because AJAX moves significantly away from that paradigm. With AJAX, pages are modified on the fly by a combination of client side code and requests to the server for additional information. Obviously this means that the page available at a particular URL is fluid and constantly changing. This moves us away from the original World Wide Web idea of static pages linking themselves together.

So the problem we need to address is, how do we make our page's URL reflect the contents that our user is seeing? Firstly, if the modifications are slight and down to a user selecting various options, it may not be important to you that users returning to that URL see exactly what was on the screen when the URL was recorded. For example, a holiday site allowing users to select dates, times, number of people travelling, etc., would wish to have users start afresh without seeing the data that another user had entered.

However, if a site made fundamental modifications, for instance navigating between pages using AJAX, then it would more than likely be preferable for someone following that URL to see exactly the same page. For example, you may have designed a site where navigation between the pages uses some funky client side code that requests the page and fades it into a central area on the screen. In this instance, for all intents and purposes the user experience is one of having navigated to a different URL.

There is a standard way of altering the URL to reflect the AJAX navigation that has taken place. Most of the URL displayed at the top of a browser cannot be altered by client side code for security reasons. Allowing client side code to modify the URL indiscriminately would allow malicious code to fool a user into thinking they were using a different trusted site. However, the bookmark portion of the URL can be modified by client side code as it is only intended to be for navigation within the current page.

The bookmark portion of a URL starts after the "#" character (for example, "http://www.mysite.com/my-page#paragraph2", where "paragraph2" is the bookmark). For AJAX navigation, we should place a "!" character immediately after the "#" character. This is recognised by most search engines as an AJAX navigation component. For example, if someone clicks on a link in the root of your site and it uses AJAX navigation to browse to a new page named "new-page", your client side script should modify the URL to become, "http://www.mysite.com#!/new-page". If someone then copies and pastes this link into a blog, forum or another site, the link will contain information about what actual page the user had browsed to using AJAX.

Your client side code will have to deal with incoming requests and parse them for AJAX navigation information. This cannot be done server-side as bookmarks are only visible to the browser. However, using this technique you can easily use AJAX navigation to control the pages of your site, safe in the knowledge that anyone copying the URL will navigate back to the intended page.

Search engine friendly AJAX navigation is easily achievable using the above techniques. Always give careful consideration to exactly what it is you are trying to achieve and whether AJAX navigation is the correct way forward for your particular application. For most websites, SEO is king, and if you are going to implement this kind of interactive navigation, take your time to make sure that your SEO will not suffer.

Mike Duffy is a software developer working for Symatix Ltd. For more information on the above techniques, please see this SEO friendly AJAX navigation page.

Article Source: http://EzineArticles.com/?expert=Mike_Duffy