Question

I’m going to build my application based on ajax, and my URLs are something like:

http://server.com/module/#function_name,param1,param2...etc

After referencing some discussions about google’s suggestion: hashbang (#!), it’s not hard for me to realize that it was not the best solution. There are several reasons:

• The URL is pretty ugly, anyway.
• It’s terrible if someday Google(or some other search-engines) suggest a better solution other than hashbang. I must keep my ugly url with hashbang, or write some js-code to make link to my page still alive.
• HTML5 pushState will be popular someday.

For all things above, I decide to make it my way: my navigation links will be like this:

<a href="http://server.com/module/for-crawler/function-name/param1/param2/...">
Some text </a>

And some jQuery code will make it capable to load ajax content instead of page-change like a normal link:

$(function(){
    $('a').live('click',function(e){
        var realURL = translateURL( $(this).attr('href') )
        loadContent( realURL );
        e.prevetnDefault(); 
        return false;
    })
})
/* -- the function translateURL will turn url like :
..... http://server.com/module/for-crawler/function-name/param1/param2/...
Into:
..... http://server.com/module/#function-name/param1/param2/...
    That's the real url I think all ajaxers are used to dealing with
*/

When crawler reads my page, it will follow the url in “href” attribute, and I will provide it with static non-js version of my page just for google to read. After some days, my page is indexed & user will see my page on Google’s results like this:

http://server.com/module/for-crawler/function-name/param1/param2/...

I’m going to user js again to redirect user to my normal ajax version, I mean, to the real URL :

http://server.com/module/#function-name/param1/param2/...

That’s the best approach I can think about at this time. Please give me advices : should I do it that way, or can I make it better ? Thanks all guys !

Answer 1

Depending on your audience I would suggest to use HTML5 PushState anyway.

If the client is not supporting HTML5 PushState let him simply use the same version of your app as the crawlers do. In my opinion a page reload is not as bad as a hashed URL. Since users share URLs your hashed URL gets exposed to other users. This URL wouldn’t work for, let’s say Facebooks Link sharing previews or any other client that doesn’t support JavaScript.

Instead I would only use the crawler-friendly app in combination with HTML5 PushState. With PushState you will always expose a single URL, independent of the JavaScript support of your client.

First, detect whether PushState is supported:


function supports_history_api() {
return !!(window.history && history.pushState);
}


Then your click-handler would look something like this:

$('a').live('click',function(e){
  var url = $(this).attr('href');
  e.preventDefault();
  loadContent( url );
  history.pushState({"url":url}, $(this).attr('title'), url);
  return false;
})