To hashbang or not to hashbang?

28
votes

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.

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

3
jqueryajaxseoumbracohashbang
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. – Daniel Pryden
Thanks @Daniel, I've taken your advice and have posted it as an answer. – Marko
@Marko I understand hash but what does bang have to do with it in the context of ajaxy websites? – Dale Forester
@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). – Oleg
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 – Colin Pickard

3 Answers

11
votes

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.

9
votes

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

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.