28

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

mate64
  • 9,876
  • 17
  • 64
  • 96
Marko
  • 71,361
  • 28
  • 124
  • 158
  • 7
    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 Jul 20 '11 at 03:37
  • Thanks @Daniel, I've taken your advice and have posted it as an answer. – Marko Jul 20 '11 at 03:54
  • @Marko I understand hash but what does bang have to do with it in the context of ajaxy websites? – Dale Forester Jul 25 '11 at 22:11
  • @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 Jul 29 '11 at 09:43
  • For anyone considering implementing hashbangs, make sure you look at this first: http://danwebb.net/2011/5/28/it-is-about-the-hashbangs and this: http://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 May 02 '12 at 11:40

3 Answers3

11

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.

Marko
  • 71,361
  • 28
  • 124
  • 158
  • 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`). – switz Jul 21 '11 at 21:16
  • 1
    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... – Wesley Murch Jul 21 '11 at 21:19
  • 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. – Marko Jul 21 '11 at 21:55
  • I was under the impression that google would penalize duplicated content -- not sure if this solution would count as such – Soren Jul 29 '11 at 02:09
9

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'));
    });
}
Ewout Kleinsmann
  • 1,287
  • 1
  • 9
  • 20
  • But this way users can't bookmark pages on the site because the URL will never change. – Marko Jul 25 '11 at 20:58
  • 4
    The url will change. This line will take care of that: history.pushState({},'',this.href); – Ewout Kleinsmann Jul 25 '11 at 20:58
  • what happens in older browsers? Is there a script that takes care of this cross-browser? – Marko Jul 25 '11 at 21:26
  • 1
    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. – Ewout Kleinsmann Jul 25 '11 at 21:28
  • I quite like the idea. I just have to figure out how to implement the ajax functionality I need using both methods. – Marko Jul 25 '11 at 21:36
  • @marko: look at my updated example for a push in the right direction :-) – Ewout Kleinsmann Jul 25 '11 at 21:46
  • 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 :) – Marko Jul 30 '11 at 02:35
0

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.

Darm
  • 5,581
  • 2
  • 20
  • 18