7

Intro

I know this has been asked before but the questions I found were either to specific or to general to provoke the kind of answer I was looking for. The best possible answer I can imagine would be an example using backbone and the least amount of server-side logic possible (no preferred language/framework there).

Problem

I am planning an javascript/ajax-heavy (backbone + mostly-json backend) application that implements a facetted search. Take for example a facetted search of a simple shoe shop application that lets you filter color, brand and type of shoes and sort by price and size or whatever else.

Assume I am using backbone or a similar framework on the client and a json service as a backend.

What would be a good (tradeoff between effort and result) strategy to achieve seo-friendliness as well as a snappy interface?

Resources

A solution that came to my attention is Hijax by reusing client-sided templates on the server-side, as described here: http://duganchen.ca/single-page-web-app-architecture-done-right

Resources that I digested without final conclusion

Community
  • 1
  • 1
Domi
  • 553
  • 4
  • 6
  • 2
    I'd suggest using the design discussed in the "Single Page Web App Architecture Done Right" link you posted: Make your web application non-Javascript friendly first, and then you won't have this problem. – Ivan Jan 04 '12 at 20:47

3 Answers3

3

The general point in SEO friendliness: It should work without JavaScript.

It's also good for accessibility, so you should do it like this, if the user does not have JavaScript enabled (like the search engine does), it will work.

If he has JavaScript enabled, (like any sane human being does), it will work with all the nifty JavaScript features you've added.

As a general usability rule of thumb: If it works, it should also work without JavaScript!

Madara's Ghost
  • 172,118
  • 50
  • 264
  • 308
1

The solution of your first link sounds right. The main issue of a single page app is that you have to render your templates on both sides, the backend and the frontend. Using the Mustache or google closures template will be good solution for this.

The same solution that was used for google+, where initially the side will be rendered on the server and you load a static html page, after that the page will be rendered on the client side but with the same templates as on the server.

Andreas Köberle
  • 106,652
  • 57
  • 273
  • 297
1

Also remember that the search engines follow links much more often than they (ever?) complete forms.

This problem of enabling the crawlers to see your db contents is called the "dark web," "invisible web", "deep web" or "hidden web". Blog post

So re your problem statement:

a facetted search of a simple shoe shop application that lets you filter color, brand and type of shoes and sort by price and size or whatever else.

I'd suggest that you include searches via a hierarchy of links in addition to searching via forms with select fields.

Eg, on a secondary menu include all the different brands as individual links. Then each link should lead to a list of the products sold by that brand. The trick is arrange things so that the link to an individual shoe will take you back to the first page (the rich one page app) but showing the specific shoe. -- And the page should implement the Google Ajax-crawling recommendations that you reference in the OP.

Larry K
  • 47,808
  • 15
  • 87
  • 140