As a member of the Bing Index team I am often asked by web publishers and Content Management Systems (CMS) companies to provide coding best practices for their web sites. Today, I am pleased to share a fundamental improvement to our previous coding best practices related to AJAX.
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. Therefore, content contained within an AJAX-enabled page or control was often not accessible nor indexed except if you were following SEO best practices overly-complicated techniques or protocols.
The new recommended SEO Best Practice for AJAX URLs
The Internet has some great examples of webpages showcasing the use of pushState, such as http://diveintohtml5.info/examples/history/fer.html, and http://blogs.msdn.com/b/ie/archive/2011/10/31/html5-history-in-ie10.aspx is a great place for coding best practices including cross-browser considerations.
With pushShate, we can fully omit the complexity of transforming between “pretty” AJAX URLs and “ugly” static URLs. Search Engines will crawl and index the same URL used by you customers. We are back to business as usual for SEO, including pretty SEO well-understood URLs schema http://domain/path/file?name=value_parameters. This helps you focus on the usual SEO activities (links, page content, etc.) without having to do worry about complex page transformations.
Linking Strategies using pushState
With pushState, you can generate almost any URL you want in the browser’s address bar. However, with such great power comes great responsibility. Here are a few things to keep in mind when exercising that power:
Avoid broken links
A common mistake with pushState is that you may create a broken link in the address bar, remember that people may bookmark, share, link to the link created by pushState also any URL created by pushState should work directly, too, also refresh the whole browser for any URLs created by pushState to verify if this URL exist. A coding best practice to 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, it is easy to create new URLs. In fact, it is so easy that a pushState-enabled web site may start to generate way too many URLs. Remember that less is more for your site and that having fewer URLs better. Another tip is to use pushState to inject all useful, significant 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, if you have a music player web application and offer the ability to pause a song and bookmark it, it is highly preferable to link to a URL such as http://www.example.com/musicPlayer.aspx?song=TheCanadaSong#pausedAt=42 instead of http://www.example.com/musicPlayer.aspx?song=TheCanadaSong&pausedAt=42. The latter approach may lead to many duplicate content URLs. The Ignore URL Parameters tool in Bing Webmaster Tools can help mitigate, but prevention is better.
What about Browsers or Crawlers that do not support pushState?
Since not all browsers or even crawlers will support pushState you should make sure that both have a good experience:
• 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.
• For customers with modern browsers that support pushState, you can refresh parts of the web page and update the URL.
As with our blog post related to building Websites Optimized for All Platforms, we aim for our SEO guidelines to be easy to adopt and to remain valid for years ahead. We feel you should not need to be an expert to create web pages that are search-engine friendly and want to avoid technically overcomplicate solutions. The combination of AJAX and pushState make this possible.
• HTML5 History in IE10
• MSDN Magazine : Building HTML5 Applications : A History (API) Lesson
• SEO And Accessibility With HTML5 PushState
• Dive Into HTML5
• HTML5 WC3 browsers history
Principal Program Manager
Microsoft – Bing