Options for Optimizing AJAX

AJAX-driven web applications are becoming increasingly popular on commercial websites. AJAX has an ability to enrich, yet simplify a userâ??s experience when used properly. AJAX can also provide a highly user-friendly interface that works smoothly, quickly, and often better than traditional programming.

AJAX is short for Asynchronous JavaScript and Extensible Markup Language. Make no mistake about it — JavaScript and XML are not “new” technologies. Both programming models have been around for some time. However, the unique combination of JavaScript and XML is relatively recent, as are the problems AJAX presents for a site’s search engine visibility.

The primary benefit of developing a site with AJAX is the ability to work invisibly in the background of a site. AJAX is used to supply data to the client browser that renders up as a relatively seamless “application” instead of the click-and-wait-to-load functionality associated with more conventional web page constructs.

How seamless is the user experience with AJAX? Check out Google Maps or Google Suggest to see world-class AJAX applications in motion. You can find what you want, when you want it, with relative ease and accuracy when AJAX is in use. What you can’t find is a unique URL or navigational links for search engine spiders to crawl and index, which brings us to our first SEO barrier to overcome — the “J” in AJAX.

JavaScript has been a stumbling block for search engine visibility for quite some time. None of the major search engines show any indication of overcoming these types of scripted data issues anytime soon. Consequently, the single greatest optimization issue with AJAX is the tendency to not generate unique, bookmarkable, linkable and therefore indexable URLs.

The comparative shopping engine Become.com overcomes this barrier by creating and linking together static URLs of search results pages. A quick [site:www.become.com] search in Google reveals how well this AJAX-workaround in indexed.

Meanwhile, sites like Scion.com fail to make the same programmatic leap to provide a similar search experience. Imagine how the carmaker could promote celebrity built custom automobiles in the search engines if only static pages of a punked-out Ashton Kutcher or a blinged-out Usher-mobile were rendered and linked to throughout the site.

While AJAX can be a great way to enhance the user experience, not all visitors will have a great on-site experience when non-JavaScript-enabled browsers are being used. When it comes to site accessibility and SEO, itâ??s imperative that an AJAX-alternate experience be provided.

Because AJAX relies on JavaScript — as well as Cascading Style Sheets (CSS) and XML â?? itâ??s relatively easy to provide an alternate experience for non-JavaScript users. The key is to tap into your CSS and XML files to render other versions of the AJAX application. This tactic is as â??progressive enhancement.â??

Progressive enhancement is a web design strategy that emphasizes accessibility, semantic markup, external style sheet, and scripting technologies. By layering designs in a concatenated progressive enhancement allows all users â?? and search engine spiders â?? to access the basic content and functionality of any web page.

When implementing progressive enhancement, a basic markup document is created, geared toward the lowest common denominator of browser software functionality. The web designer then adds functionality or enhancements to the presentation and behavior of the page using CSS, JavaScript or other combinations of Flash or Java applets. In tandem with user-agent detection, progressive enhancement will automatically render both user- and search engine-friendly pages.

You can observe progressive enhancement in motion by visiting Amazonâ??s Create Your Own Ring page. Simply turn off your JavaScript capabilities to see how the program maintains its AJAX-like functionality for all users. Also note that the initial load of the AJAX application contains the optimized elements such as title attributes, header tags and meta description, as well as a crawlable static URL. All of this is visible in Google cache and revealed in the pageâ??s search engine snippet:

Amazon.com: Create Your Own Ring: Diamond Search
The Amazon.com Collection. Why Buy Jewelry & Watches at Amazon?
… More to Explore. Preset Engagement Rings … Create Your Own Ring …
www.amazon.com/gp/cyo/cyor-fork.html

To produce these particular SEO elements, server side scripts and .htaccess rewrite modules are required. (If site is not Apache server-based then the rewrite module may not be an option, but there are always solutions.)

When optimizing AJAX it’s important to remember three things: Search engine results are affected by on-the-page, behind-the-page and off-the-page factors. It’s essential to provide an alternate way for users and spiders to navigate their way through to all of your great content without sacrificing usability, accessibility and linkability.

Comments