Microdata, Mustache and Bootstrap for SEO and speed.

This article was originally posted on the Peecho blog.

Peecho is a pretty lean company. Apart from being cheap, one of the rules of Peecho is that being fast is important - if you are slow, you can't grow, right?

One of the other rules is that product owners do 50 push-ups for each feature request. Try it - it will save you from feature creep.

As a consequence, we try really hard to enforce the separation of concerns in our code, so we can change things that have nothing to do with each other independently and quickly. At some point, we ran into trouble: server architectures are pretty easy to chop up in logical parts and optimize, but for the front-end this can be much harder.

So, we retreated to the kitchen and started experimenting. In the end, our efforts lead to an approach that does not only make our front-end easy to maintain, but has great SEO potential and speedy performance as side-effects. Almost by accident, we created a website set-up that is like fast food for search engines.

This article tells you what the secret ingredients are, so you can start cooking your own dish. The recipe comes with an open-source project called Paradax, including an example website containing documentation, source code and several examples. Feel free to play around!

Preparation: Bootstrap, a hot potatoe

Let me give you some context first. Like many of today’s start-ups, Peecho loves to use the Bootstrap front-end framework to quickly create HTML user interfaces. Bootstrap consists of an awesome collection of HTML, CSS and javascript design templates for typography, forms, buttons, navigation and other interface components. You can use it for free, as reportedly over 1% of the entire web does.

Using Bootstrap allows for rapid development. There are some caveats, though. Similar to other front-end frameworks, Bootstrap does not really encourage a proper separation of concerns. It uses class names and structure that are only there to help in the presentation of things - they don’t really mean anything.

An example is the grid system, in which the relative width of an element can be set by adding class names like “col-lg-something”.

<div class="row">
    <div class="col-lg-5">
        Sander
    </div>
    <div class="col-lg-7">
        He is the skinny bald guy.
    </div>
</div>

If you need to change the width for this element, this method forces you to change the code on every single web page that contains this particular layout. If you ever migrated Bootstrap from version 2 to 3, you will know this can cause an enormous headache. So, the previous example should really be something like this.

<div class="some-peecho">
    <div class="name-of-some-peecho">
        Sander
    </div>
    <div class="about-some-peecho">
        He is the skinny bald guy.
    </div>
</div>

The Bootstrap presentation classes have been replaced by something meaningful, but now the Bootstrap magic is gone! Since we are big fans, we decided to look for a way to keep the semantic structure and still be able to use Bootstrap.

The secret ingredient is microdata

It is important to realize that most of the visitors of your website don't care about structure, semantics or messy code. All they care about is the resulting pretty view. So, the HTML source code should only be written for three other audiences: programmers, browsers and... search engines. Which standard format could we use to write HTML that would make all three of those really happy? Enter microdata.

Microdata is a syntax for embedding machine-readable metadata in HTML. The microdata standard from Schema.org can be used by developers to make search engines understand the meaning of what is in their code. It's like a common language for search engines. The project is backed by Google, Yandex, Bing, Yahoo and more. Using microdata, you could create super-search-engine-optimized web pages.

Let's follow up on the previous example. Using microdata, the skinny-bald-guy-HTML can be written like this.

<div itemscope itemtype="http://schema.org/Person">
  <div itemprop="name">
    Sander
  </div>
  <div itemprop="description">
      He is the skinny bald guy.
  </div>
</div>

This way, Google knows it is about an actual person, with an actual name - rather than just some text! But now, the information is still set in stone. How can you extract this data, so you can use it to build your screens?

Whisk with jQuery

As Bill Gates once hinted: all good programmers are lazy, so they need their meal ready-to-eat. Luckily, somebody else already cooked something up. MicrodataJS is an existing jQuery plugin that provides an API for accessing microdata in a document. We have stripped it down a little for this project.

If we let this script analyse the previous example, it would serve JSON like this auto-magically.

{
  "items": [
    {
      "type": [
        "http://schema.org/Person"
      ],
      "properties": {
        "name": [
          "Sander"
        ],
        "description": [
          "He is the skinny bald guy."
        ]     
      }
    }
  ]
}

Now this is something programmers can use as input to build some really nice-looking screens for your visitors.

Serve with Mustache templates

We are nearly there. We have source code that search engines can read and data that programmers can use... But we still need to generate the user interface for your visitors to look at. Client side templates should do the trick. We picked Mustache, a very simple templating language.

It is named "Mustache" because of the heavy use of curly braces that resemble a mustache. Really.

You could feed the JSON that was extracted previously into a Mustache template easily. The template would look like this.

<div class="row">
  {{#items}}
    {{#properties}}
      <div class="col-lg-5">{{#name}}{{{.}}}{{/name}}</div>
      <div class="col-lg-7">{{#description}}{{{.}}}{{/description}}</div>
    {{/properties}}
  {{/items}}
</div>

This outputs the following HTML to the DOM - that's the stuff the browser uses to render a view.

<div class="row">
    <div class="col-lg-5">
        Sander
    </div>
    <div class="col-lg-7">
        He is the skinny bald guy.
    </div>
</div>

Seems familiar, right? That is where we started off. That's awesome. Now we have created a method that does the following.

Icing on the cake

A few years ago, Google announced website speed would start to have an impact on search ranking. Nobody really knows, but speed is important to your users for sure. Here are a few tips and tricks to use in the context of this article.

At Peecho, we use Hogan to compile Mustache templates into vanilla Javascript functions. It really speeds up rendering, especially if you pre-compile your templates on the server. Once compiled, you can wrap all Javascript in a single file, containing all Mustache templates and partials in their compiled state. After initial load, the presentation code for your entire website will be cached in your browser. The only thing that gets over the wire after that is microdata HTML - which tends to be pretty tiny.

If you are really going for it, you can serve all of it from a CDN. This ensures not only faster delivery of your content, but since most of your website will be pre-compiled static stuff, it will save you many direct server hits. We use Google PageSpeed service for the Paradax website and Cloudfront at Peecho. Both are awesome.

Paradax, a recipe for home cooking

We love to share things with you, so feel free to visit the Paradax website for all of the secret sauce. We created it as a simple example of the technique that we just described. It contains documentation and source code. Check it out if you would like to experiment.

Happy coding!