Question

I’m currently redesigning a site and considering whether or not too use .load for most navigation to make it faster for the user and just nicer to use.

To do this I have links with <a href="/the/link" id="linkId">link</a>

I then use $("#main").on("click", "linkId" with return false so that the links aren’t followed.

I have /load/page.php and /page.php to supply either the load code needed or the full page version if a user is going straight to it.

Lastly on all load page changes I update the page hash using document.location.hash = "/" + $(this).attr("href");

This means urls of the site would look like the following to the users:

domain.com/#/file/page

and this to the search engines:

domain.com/file/page

If a user types in the hashed url they are redirected with the following code to the actual search engine url so I think I have everything covered?

if (location.href.indexOf("#") > -1) {
    location.assign(location.href.replace(/\/?#/, ""));
}

I’d block the hashed urls from being indexed and only allow the proper urls to be reached, I was then thinking if people linked to the hashed url would you need to do a page moved for seo?

Are there any massive disadvantages to this approach and/or are there better ways to go about it when trying to create fully dynamic sites?

Answer 1

First of all, I wouldn’t use two versions of php dispatcher. Instead, check if request is ajax, if so – serve the content only (otherwise, serve the full html – this should make the web crawlers still see the html version).

secondly, instead of providing different hrefs, use sth like this:

$(function(){
  $('a').click(function(){
      // load content of $(this).attr('href')
      // & change the hash
      return false;
  });
});

this will keep the site seo friendly (and also user-without-js – friendly 😉 )

Have a look at http://tkyk.github.com/jquery-history-plugin/

// — added 18:45Z

if, for some reason, modifying the dispatcher is too complex or impossible, you might want to consider using jQuery’s load filtering ability (see jQuery load docs), however that method produces unnecessary overhead and it’s better to avoid it.