AJAX and SEO

AJAX and getting it to play nice with search engines seems to be a common problem faced when developing modern web sites.

The problem lies in the fact the content fetched via AJAX in a page, is not "seen" by search engines.

This may very well result in you removing AJAX from areas of pages where it is critical that search engines are able to parse the content.

As an example:

You have a page on your site that allows the user to search and filter through all available products, this being the main way for users to find products on your site. The results, consisting of an image, a basic description and a link to that product's page, are returned to the end-user via AJAX.

You will soon realize that search engines are not indexing product's pages, which is a pretty serious problem.

The solution

The solution that probably comes to mind is to simply remove the AJAX at the sacrifice of improved functionality.

There is however a solution that allows you to retain the AJAX and keep the SEO.

Its a best practice that doesn't get implemented enough, and that is to ensure your pages gracefully degrade, functioning correctly when javascript is disabled. Once you've got this right, then add the javascript and AJAX in.

A common example is javascript executed when clicking a link. One of the solutions suggested (known as Hijax) to this problem is quite simple:

<a href=”ajax.htm?foo=32” onClick=”navigate('ajax.html#foo=32'); return false”>foo 32</a>

If the user has javascript disabled, he will be redirected as per normal link behaviour, where if he has javascript enabled, the onclick javascript will be executed. For simplicity I used the onclick attribute as opposed to the unobtrusive approach.

Conclusion

Depending how far you are into your site development, making it degrade can be quite challenging. Ensuring your site can degrade from the beginning is relatively trivial, so its best to start early. Your site will be more accessible, to both users and search engines, while allowing you to add in AJAX functionality that won't affect your sites SEO.

Cater for the blind, cater for Google

I'm sure every web developer who's worked on a public facing site, frequently hears about SEO.

SEO entails doing everything you can as a developer of a site to get its Google page ranking up and also allow Google to getter a better "understanding" of the web sites content and how it relates to user's searches.

Something that regularly gets overlooked during development, is that you are guaranteed to have at least one blind user frequenting your site, Google, even though SEO is one of the most important aspects of modern site development.

Google is effectively a blind user. It has no concept of how things are displayed on your web site, just what it can find and "understand" in your page markup, similar to screen reader technology. Understanding this, is the first step in understanding how to improve to your sites Google ranking.

Making web sites more accessible to the blind has always been one of the great strengths of CSS based layouts, keeping your page markup clean and all the layout fuss in seperate files. By following the basic rules of CSS based layouts, you've already taken great steps in improving both the SEO and accessibility of your site.

This is not to say that table based layouts cannot be made accessable to the blind without putting in some additional effort, its just something you get "out of the box" by following CSS layout guidelines.

In conclusion

By employing best practices, proper use of HTML tags,CSS for layout and ensuring screen readers can parse the markup on site correctly, you improve the accessibility of your site and directly improve Google's "understanding" of your site.