SEO Considerations and client side templating frameworks

A few weeks ago, I created a shopping cart application using Knockout. The page loaded the knockout templates and then ajaxed the product data in and bound it to the knockout templates (this is the typical flow of events for knockout). The ajax request would load all the individual items in a product range, allowing the user to browse all products without doing any further requests. Increasing quantity and adding items to the cart were all ajax driven, events bound via Knockout data bindings. Overall, a fairly nice user experience.

However, there is a problem with this in terms of SEO. The crawler will see just the empty template:

<div data-bind="foreach: Products">

    <div data-bind="text: Description">div>

    <div data-bind="text: UnitPrice">div>

    Quantity: <input data-bind="value: Quantity" />

div>

<div data-bind="text: Subtotal">div>

<button data-bind="click: AddToCart"> Add To Cart button>

Just looking at the template, what can be said about what is being sold? How many products? What are they? How much do they cost? Nothing.

So while the framework was great to use, and produced a really nice user experience, I ripped it out and went back to basics: Build the page without javascript, and then add on the javascript afterwards. Now the rendered page looks like this:

<div data-entity="product">

    <div data-var="description">Red bedsheetsdiv>

    <div data-var="unitprice">$32.99div>

    Quantity: <input data-var="quantity" />

div>

<div data-entity="product">

    <div data-var="description">Blue bedsheetsdiv>

    <div data-var="unitprice">$32.99div>

    Quantity: <input data-var="quantity" />

div>

<div data-var="subtotal">div>

<button type="submit" data-command="addtocart">Add To Cart

button>

All the products are rendered and the crawler will be able to index the content on the page. I included some “data” attributes for unobtrusive javacript to locate the correct elements and their data. But until search engines can handle templated content a little better, this will be my method of development.