SEO Best Practices Use HTML5's "PushState" for AJAX URLs

The combination of AJAX and HTML5 "pushState" help in creating web pages that are search-engine friendly.

Bing Webmaster blogs to help web publishers and Content Management Systems (CMS) companies providing Search Engine Optimization (SEO) best practices for AJAX URLs.

AJAX (or Asynchronous JavaScript and XML) is often used as a technique for creating interactive web applications, but more people are using it to spice up their site.

Exchanging data asynchronously requires the execution of scripts when particular page events occur. Search engines face challenges when it comes to interpreting or executing this kind of code. However, with the new HTML 5 JavaScript function called "pushState." it is all changing--as all modern browsers including Internet Explorer 10 now support this funciton.

HTML5 pushState

""pushState" function allows web developers to change the entire display URL -- with the exception of the domain, port and scheme (http://) portions -- using JavaScript. It also allows web developers to modify the page title and the session history information," bing explains.

"With pushShate, we can fully omit the complexity of transforming between "pretty" AJAX URLs and "ugly" static URLs (as previously JavaScript was only allowed to change the URL fragment, that is, anything behind the "#" symbol)," Bing explained.

With pushState, you can generate almost any URL you want in the browser's address bar. Search Engines will crawl and index the same URL used by your customers such this URLs schema http://domain/path/file?name=value_parameters.

"We are still supporting the #! crawlable AJAX method but as I said, we do not recommend it at all and we really prefer pushState which is far easier for webmasters and web developers to adopt and maintain," said Bing's Fabrice Canel.

Here are a few things to keep in mind:

Avoid broken links. As a best practice avoid broken links creating URLs with pushState is to limit change to URLs query parameter values. "Search engines discovering this link should be able to see the same content as well (and remember that Bing recommends you avoid cloaking)."

Avoid duplicate content. With pushState, a web site may start to generate way too many URLs. Bing advises to use pushState to inject all useful parameters before the question mark and all -- at least from a search engine's perspective -- "useless" parameters after the fragment part of the URL (that is, after the #).

For instance, for a music player web app that offer the ability to pause a song and bookmark it, use the URL http://www.example.com/musicPlayer.aspx?song=TheCanadaSong#pausedAt=42 (instead of http://www.example.com/musicPlayer.aspx?song=TheCanadaSong&pausedAt=42).

As, the latter URL may lead to many duplicate content URLs. The Ignore URL Parameters tool in Bing Webmaster Tools can help mitigate this issue, but it is better to avoid it beore.

Bing advises that for browsers and crawlers that do not yet support pushState, "you should continue to offer links that allow direct navigation to a URL for a given page state."

While, for customers with pushState support, "you can refresh parts of the web page and update the URL," Bing said.

Update 03/26: Google has long been supportive of HTML5--now it has published a video in support of HTML5 pushState.

"A correctly implemented site that uses pushState typically doesn't need any extra support in order for us to be able to crawl it. We do support both [pushState and #!] and we do handle both standards… but [pushState] is something that I would encourage you to look into and it can be quite helpful in making sure things can be crawlable," noted Cutts in the video.