With the "Web 2.0" world that we live in, companies are inclined to create "snazzy" new AJAX experiences for users. I have been dubbing this the AJAX Dilemma lately because organizations/companies/website owners are creating sites that are not accessible and SEO friendly. They are risking crippling their businesses in the areas of search traffic by not planning SEO into the lifecycle of the product. Ensuring there is a Non-Javascript experience for search engines and accessibility is not a new practice. Creating sites using "Progressive Enhancement" and using "Unobtrusive JavaScript" has been around for quite some time.By creating web standard code and using the methods above, you are not sacrificing SEO for User Experience. This is important to creating search friendly websites because ensurng search engines are able to crawl and index your content is necessary to acquiring search traffic and market share. By not embracing these approaches, you are leaving yourself in a handicap for SEO efforts and leaves you at a competitive disadvantage. In fact, it should not even just be designed on a project per project basis, but should be built into code that takes advantage of web standards and progressive enhancement.

The AJAX Dilemma for SEO

Show and Hide type interactions that are used in content areas throughout a site, like tabs or accordions, can create a crippling effect on the amount of content crawled by search engines, if they are not built correct. This content is typically built with poorly written JavaScript that does not take advantage of Web Standard code. The hidden content areas, when clicked on, will provide a string that follows the URL like, #somehiddencontent. Traditionally search engines ignore everything after the "#" (hash) tag. Here are some examples of these interactions that are poorly written and don't provide a graceful fail when JavaScript is turned off. Here is an example of tabs used on iFoods.tv with JavaScript on: Here is that same interaction, with JavaScript turned off: Notice something different? Of course you do, it is VERY blatently obvious that the entire content within the tabs is completely missing. This is a large opportunity that is missed by ifoodstv.com at getting content not only indexed, but great internal links to deep content. Now, taking a look at the way that iMedix does tabs is a little different, here it is with JavaScript on: Here it is with JavaScript Off, on a different tab: Do you notice a difference here at all? No?! Well, thats right, because there isn't one. Also, to add to that, iMedix is rewriting URLs so that there are no hash tags in the URLs: This is a fantastic job of ensuring that there is not only crawlable content, but crawlable URLs. This is very important, search engines tend to ignore things after hash tags (#) in URLs. This is especially impotant with AJAX since that is typically how urls are created. Jeremy Keith (JavaScript expert extraordinaire) has described some ways to get around the AJAX issues, including has tags, and has described it as Hijax.

The Solution

The solution to creating AJAX that is SEO friendly is to ensure that you are building your site using Progressive Enhancement and Unobtrusive JavaScript. Along with that, url issues that could lead to canonicalization and duplicate content issues can be avoided using methods like Hijax. With the extremely competitive markets out there on the web, this is VERY important. It is possible to create rich user experiences with Ajax that are great for SEO. As an example of how to do this, you can build standard interactions on your site that are accessible and search friendly. (This is how we built any standard interaction at PayPal). Any standard show/hide type interaction can be built using standardized JavaScript APIs. Doing this will create Non-JavaScript versions of interactions that are accessible and search friendly, but along with that will drastically reduce the amount of code that you have to write and increase developer efficiency.

Resources to help with AJAX and SEO

Google Webmaster Central: A spiders view of Web 2.0 Dom Scripting: Hijax Progressive Enhancement with AJAX Follow me on Twitter for more info @tonyadam or subscribe to my feed to keep up to date!