SEO Friendly Ajax

By Jeremy Miller

In the last couple of years, browser support for connecting to a server directly via Javascript has been widely implemented breaking down a primary barrier to the forward-progress of internet development. Now becoming a widely adapted and highly visible part of the web through implementations on Google, NetFlix, ... the list goes on and on, Ajax, as the technology facilitating the integration between the browser and the server has become known, is an expected part of web-based application/e-commerce development for the future, called Web 2.0. TeraTask Technologies, LLC is hot on this technology and it's use in the e-commerce marketplace. After much research, we found that little is proferred to create websites employing Ajax in a search-engine-friendly fashion, so we decided to see if we could develop an implementation of Ajax which would allow us to take advantage of the full range of Ajax's capabilities while preserving search engine friendliness -- and we did it. This article will detail the basic algorithm we used to develop our website.

Search engines do not, as far as we know, parse Javascript. Most definitely they do not parse Javascript to the point of being able to execute an Ajax call, receive the feedback, and analyze how the content of the page was changed by the result. For the most part, they simply read the text on the page, follow it's links, and analyze the structure of the page. This leaves us with the sole option of using links to link from one page to another -- yes, that may sound redundant, but it's not as you can have any object, be it a div, image, or other item, function as a link when using Javascript, so the assumption alone cuts out many options. It is not, however, a show-stopping limitation as stylesheets allow links to be displayed in any fashion and an image can be linked using simply HTML tags which search engines can read. For instance, the top navigation on our homepage is a collection of links with css-based changes to style and the right-hand navigation is a collection of links within LI tags. So, now that we have that established, the next step is to maintain our links while enabling Ajax without the two features working at the same time.

To bifurcate your page's functionality in this fashion, you simply need to take advantage of the assumption that search engines do not parse javascript. Namely, setup your pages so that may be called in a fashion similar to index.php?page=some_page. This means that index.php?page=some_page should be able to be typed into the address bar and the full page be delivered by index.php. Next, alter your index.php script so that if the url has the additional GET variable of ajax_caller=true set, it then only returns the content unique to that page (e.g. index.php?page=some_page&ajax_caller=true). Now, configure your Ajax caller function to accept the page parameter and then and call the approrpriate URL. The final step is to setup each of your links with both their href attribute set to index.php?page=some_page and the onClick attribute set to ajaxCaller('some_page');return false (be sure that you return false so that when the javascript-enabled user clicks on the link, only the javascript is executed and the link is not followed!)

By making these changes, you'll have you have created a process where the search engine (or any Ajax-disabled viewer) can follow links and get exactly the same view as the user who instead has Ajax enabled and gets to see your more-advanced interface. Additionally, this methodology has the side effect of allowing the user to bookmark a specific page because you have provided the link and the most common browsers allow a user to right-click on the link and bookmark it (or any number of other options).

This method will allow you to maintain the search engine friendliness of your content while using Ajax. It does, however, leave open one question: how to control the TITLE and META tag content of a page. I'll leave this to the astute reader for now, but feel free to check our homepage frequently as I plan on writing this up and providing an example in the weeks to come.

Jeremy Miller TeraTask Technologies, LLC www.teratask.com

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