Way Too Long; Did not Read
I wrote a Django application hosted on Heroku that you can find at Exercise-Library.com. It’s a single page web application that’s using Backbone.js to filter and render an exercise library.
True Story Follows
In my last post I wrote about the need to build a website exclusively for the purpose of driving traffic to the Workout Generator application we’ve been hustling on. The idea is that free content can help to attract users and hopefully drive them to a paid product.
It needed to be optimized both for search engines and for actual IRL people. On one hand, I’m trying to rank for obscure exercises on Google where competition might be easy, and in a shotgun blast of a few hundred exercises with their own pages, I’m sure to emerge victorious. On the other hand, it’s 2K15, and navigating a site by making multiple web requests is simply not hip anymore.
Making a Site Search Engine Friendly
Of the things that I know for sure in the obscure world of SEO, the things that I know for sure:
- The URL helps rank for keywords
- The title tag helps rank for keywords
- The above the fold H1 tags help rank for keywords
Therefore, I wrote a really simple Django application where I render a page for every exercise I have stored in a simple json file.
You can see that I have a very simple Django setup with only 3 URL patterns and 3 corresponding view functions:
But these functions end up creating several hundred crawlable web pages. From here, I can try adding write ups for each exercise over time.
You can see that there’s a dynamic URL hierarchy that emerges:
But from a search engine or user perspective, it’s just static.
Making the Site User Friendly
The content in place for the search engines is actually not intended for users in the least. Even the potential write ups may or may not have any value for the user. The actual use case that’s trying to be captured is that someone is just trying to learn about some exercises he or she could do given muscle group and equipment.
So I took the same data that was otherwise rendered by Django and instead just took its json representation and turned it into a Backbone collection. The result is a single page view that renders super fast and has HTML5 videos:
So I have a simple backbone collection:
Then server-side, I’m passing the json data directly to the HTML template:
(There’s actually more data being passed, but I stripped it down to convey what’s happening).
Then I can instantiate the backbone collection:
Then I can just start creating a standard backbone application:
Views are separate from models, and everything is loosely coupled. Views re-render from listening to changes in models.