To hashbang or not to hashbang?

Question

I'm developing a new website and I'd like to make use of AJAX as much as possible. Basically, I want users to almost never navigate away from the homepage and have everything displaying in popup windows, sliders, sections etc.

Now our existing website already ranks pretty high so I also want to keep Google happy. I've been reading the Making AJAX Applications Crawlable by Google and understand that I have to provide the same content for the crawler via _escaped_fragment_.

The problem
I want to develop this website using Umbraco which already provides SEO-friendly URLs. i.e.

• http://www.domain.com/about-us.aspx
• http://www.domain.com/about-us/our-team.aspx

But the issue is that I don't have an easy way of implemeting _escaped_fragment_ without hacking the Umbraco core (at least that's my knowledge), and using the solution(answer) I have posted below will also keep users without Javascript happy. Win-Win situation? You tell me! =)

Update
There was an answer from another user yesterday (now deleted) who suggested that Google no longer uses the _escaped_fragment_ method and suggested this be left out. Is this true? Will Google actually run the AJAX to see the content?

Thanks
Marko

Answer 1

I'm taking the advice from @Daniel Pryden's comment and posting this as an answer instead.

I had a think about this problem and thought - why not create the website in an old fashioned manner, actual pages and everything but then perform the following steps.

1. Intercept all internal links on the homepage using jQuery and prepend a hash (#) before the window.location.pathname, thus triggering the hashchange event. (see step 3)
2. Add a javascript redirect on all pages apart from the homepage to redirect pages back to the homepage, but append the window.location.pathname after a hash (#). For example, Google crawls http://www.domain.com/about-us.aspx but when a user visits the page, they're redirected to http://www.domain.com/#/about-us.aspx
3. On the homepage, use jQuery BBQ or a similar plugin to listen for the hashchange event including when the page loads so that dynamic content can be loaded. Umbraco can be configured to serve partial or full page content based on whether the request is an AJAX one or not.

This way, users without Javascript will have a full-blown (semi-good-looking) website, Google will crawl all of the pages without any issues, but users with Javascript will always stay on the homepage - and the cool concept of having a Web App rather than a Web Site will be accomplished.

Answer 2

Have you also considered to use the HTML5 history session management?

This way you don't have to use hashes in newer browsers and that way the user won't notice a thing.

A bit simplified you would do something like this:

EDIT: updated example.

function route(path) {     $.get(path, function(data) {         //parse data     }); }  if (typeof history.pushState !== 'undefined')  {     $(window).bind('popstate', function(e)     {         route(window.location.pathname);     });     $('a').click(function(event) {         event.preventDefault();         history.pushState({},'',this.href);     }); } else {     $(window).bind('hashchange', function(e)     {         route(window.location.hash);     });     $('a').click(function(event) {         event.preventDefault();         $(this).attr('href', '/#'+$(this).attr('href'));     }); }