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

Defer

As this is written, it looks more like a blog post. You should take the "solution" part and actually post it as an answer. As a bonus, you're more likely to attract other people's answers as well. – Zelmazelten

Thanks @Daniel, I've taken your advice and have posted it as an answer. – Defer

@Defer I understand hash but what does bang have to do with it in the context of ajaxy websites? – Cavity

@Marko: If you want to award zzzzBov the bounty I could vote the deleted answer to undelete it (one person only can not undelete an answer). – Nesmith

For anyone considering implementing hashbangs, make sure you look at this first: danwebb.net/2011/5/28/it-is-about-the-hashbangs and this: blog.benward.me/post/3231388630. If you are thinking about SEO-friendly URLs, then you shouldn't be thinking about hashbangs. hashbangs are for applications not sites – Obstruent

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.

Defer

This is similar to what I do on my website. The normal links are just directories /directory/file1, but if a user goes to that it redirects to my main site with the hash there (#/directory/file1). – Shumaker

This is exactly where I'm at and what I came up with (I was really surprised to see people actually changing urls instead of just respond to the click event and change the hash with js). The one thing that I couldn't get past was making urls work when user A shares a link with a hash fragment to user B without javascript. It's a niche case, but did you consider it? Also the initial flash of content before the ajax fragment loads is always annoying... – Quintessence

Switz, is Google crawling your website OK? @Wesley, the UI has been developed so that the homepage expects a hash in the URL in which case it dims the UI and shows a loading bar while the content is loaded. I've got a test case on my localhost working pretty good but unfortunately I can't upload it yet. – Defer

I was under the impression that google would penalize duplicated content -- not sure if this solution would count as such – Reborn

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'));
    });
}

Schoolmistress

But this way users can't bookmark pages on the site because the URL will never change. – Defer

The url will change. This line will take care of that: history.pushState({},'',this.href); – Schoolmistress

what happens in older browsers? Is there a script that takes care of this cross-browser? – Defer

Well the snippet of code you see in my answer is checking for HTML5 history management support. If there is, use it, if not revert back to using hashtags. – Schoolmistress

I quite like the idea. I just have to figure out how to implement the ajax functionality I need using both methods. – Defer

@marko: look at my updated example for a push in the right direction :-) – Schoolmistress

Cheers for the answer, but as much as this code is useful, it doesn't quite answer my question. I've awarded you the bounty because it will otherwise expire and go to waste :) – Defer

Answer 3

Use jQuery BBQ and use a js function at the top of your pages to check if there is a valid hash, if so, redirect to the page.

Everard

I've searched all over the web for jQuery BBQ sauce. I couldn't find it though. I hear it's awesome. – Creese