Single page website with SEO friendly ajax & history

Question

I am busy building a single page website. The basic layout of the page is as follows - one section below the other:

• Header & Navigation
• Content Section 1 (example about us)
• Content Section 2 (example products)
• Content Section 3 (example clients)
• Footer

Each section will have a small menu inside it to ajax the content for the specific section. So Products section will have a product title menu, once clicked, product details will be ajaxed.

I can do these with normal techniques, but the problem is, I need the site to be SEO friendly, and indexed/crawled by Google.

I've never worked with it before, but history.js looks promising. I've done some testing, but can't find resources for my specific question. I am also open to other suggestions. All Ajaxed content will be separate HTML files - for SEO, hence the use of history.js sounding good to me.

Specific Questions:

• As the user scrolls down, passing each different section, the URL should change appropriately.
• The ajaxed content in each section should also change the URL.
• Google should be able to crawl the site an index the separate pages.
• I can change all of the content in a page with history.js, but is there a way to target my sections, so it only changes the content in my desired sections, instead of all content on the page?

Answer 1

I suggest using backbone.js. Its depending on jquery and underscore.js. It provides you the following features

• MVC architecture
  • It gives more structure to the client side code
• Templating
  • You can maintain templates in the client side which gives you a more organized code.
• URL re writing
  • Re-write urls on ajax calls. It Helps to develop SEO friendly website.