SEO and AJAX

Introduction

AJAX - For the purpose of this article I will define Asynchronous Javascript and XML as a method used in conjunction with a scripting language such as PHP, ASP and ColdFusion to seamlessly retrieve and return information from a server to be displayed on a page.

SEO - Search Engine Optimization, is the practice of building, developing and shaping a site in a manner that will help it rank as highly as possible on search engines by utilizing the various site elements that search engines use to determine rankings according to their patented search results determination methodologies.

Site - A publicly accessible website that is not an application where users have to login to access private or sensitive data that shouldn't be crawled by search engine spiders and robots.

AJAX really came to the fore in the Web 2.0 Community, online applications and other web sites even though it was in use prior to the Web 2.0 explosion. Technologically savvy users can recognize when AJAX is used on a site, but for the most part, most users do not know that the functionality they are using is AJAX and is slightly different from the standard technologies they use everyday. It won't be long now before the last sentence is obsolete but such is the Internet world.

AJAX does have its benefits. It can save on bandwidth, it can be quick, helps to seperate logic, data and styling and it can make your site look pretty slick.

That said there are numerous SEO challenges faced when using AJAX for a site. There are plenty of sites out there using AJAX but how many of them are actually using AJAX effectively for a site to benefit from any SEO they might also have to perform?

To begin with, AJAX should only be used on specific elements of a page and not to control the whole page and the entire navigation of a site. I will define elements here as parts of a page that are independent from other parts on the same page but offer users additional functionality, information and navigation.

Why not use AJAX to control your entire page and navigation?

You may need to plug in a bit of extra code or use an iframe, bloating your site even further. The trusty old "Back" button may be put out of commission and we, as developers, all know how important the "Back" button is the average user.

Another problem, depending on your way of using AJAX, is that your URL may not change. So a user could land on your homepage called http://www.example.com and then navigate to another interior page that in the past could have been http://www.example.com/an-example-page.php but because you are not appending your $_GET variables to the old URL or for other implementation reasons, your URL stays as http://www.example.com.

What's wrong with that you ask?

Well, what if the average user adds your site to their favourites? The entry in their favourites folder will lead them to http://www.example.com and not the page they wanted. This is another way to irritate a valuable visitor.

Site owners and administrators might want to also consider the effect AJAX has on their stats. If your server thinks it's always on the same page, then only one of the site pages will have any stats. That's not good.

So how do you avoid that?

Well you can append a $_GET variable such as ?page_id=3 to your URL and use that in conjunction with your AJAX and scripting language to retrieve the required info from your database but that's not very informative to a user or a search engine spider. All it tells us is that the page ID is 3. Alternatively you could use ?page=how-to-make-a-webpage. That's slightly more descriptive, tells us pretty much what the page is about but still not as good as it could be.

To get the right mix of SEO friendliness we can use rewritten $_GET variables to get URLS like http://www.example.com/tutorial/how-to-make-a-webpage. These are easy to bookmark to your favourites, easy to understand, without too many query parameters to confuse search engine spiders and descriptive to all.

So, at least in my opinion you should use AJAX to refresh or repopulate a specific areas of a page, say a drop-down list that is dependent on another drop-down list in a booking form, and avoid refreshing the whole page, wasting a users' time, bandwidth and patience with something that can be avoided.

You can also use it to append new input, for example comments on a page, without having to refresh the whole page either.

Conclusion

Those little AJAX 2.0 icons indicating the page is loading are quite nifty but frankly I would rather have my content quickly than see an arrow go around in circles unnecessarily for 20 seconds.

That's just my 2 cents worth and then some.