This is a place devoted to giving you deeper insight
into the news, trends, people and technology behind Bing.
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
Interesting article. Thanks for this. More forthcoming than most articles tackling the subject, including on the Google blogs. From considerable experience, you hit the nail on the head with the most important line in your article is this:
"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."
If you're wanting your site to gain any traction from Search Engines, this is essential. Too many developers are creating 'beautiful' sites for clients that unbeknownst to the owner and payer of the re-assuringly expensive bill, are an untamable monsters when it comes to Search.
IMHO, if you want or may wish to have some traffic from Search Engines in the future, make sure that AJAX is a 'nice-to-have' additional feature and is not baked into the core.
Keep it coming.
Thanks for reading and for your input Dave. :) I know Fabrice is watching this thread. ;)
I was newbie here... Still learn all of it..
So what about the #!. What if I come up with a solution as suggested by Google to to get pages indexed, will Bing behave similarly. As it stands, Google will take the #! and turn it into ?_escaped_fragment_=. It is up to the dev to return a snapshot based on this. This seems like the most sensible approach, especially because most browsers don't support push state yet. So at the end of the day, its actually more complicated now to add support for push state and #!. IMHO
THANK YOU MY FRIEND.
Does Bing support the scenario supported by Google whereby you insert into the head of the www.example.com/page1.html page and Gbot knows to turn around and request a page at URL www.example.com/page1.html?_escaped_fragment_=
I'm trying to see what else can be done to ensure crawlability of pages with lazy-loaded content (just in case - lazy loading as in you scroll close to the bottom of the page and JS requests a new portion of the page, if there is more content, to be loaded with AJAX and added to the page, kinda like FB does it)
It seems like this , then serve to Gbot www.example.com/page1.html?_escaped_fragment_= with everyting already loaded is the way to do it with Google.
How about Bing?
Sorry, in my previous comment the mega tag got cut off. So, to reiterate, it would be like show "meta name="fragment" content="!" tag in the header, then add ?_escaped_fragment_= to the URL
Hello, I'm using pushState to create some URL from the website below, I'm using only the (?) not the #! for Google fragment. Do you think the way I'm using the SEO going to work? or I'm going to change to #!?
URL, with pushState:
what about AppCache ? I think the meta fragment tag is the best way to indicate that the page/website is ajax
. Not surprisingly Bing doesn't support it. Why don't you get that we have web apps not web pages? I would poke Fabrice in the head "Bing bing bing bing!" until he understands this.
© 2013 Microsoft