read

I wanted to share my no-weighing flapjack recipe with the world so I added a post last month.

Before I published it I researched how to mark up the HTML so that Google knew it was a recipe rather than just a bit of text. Turns out there’s a reasonably mature markup schema that Google uses to show recipes differently in its search results.

Here’s how my recipe looks on Google:

Flapjack recipe

As you can see, Google shows the preparation time as well as the calorific content and the star rating. This is because the post I created has the proper markup for a recipe.

I wanted to be able to do this easily for any other recipes I posted in the future, so I created a template that ensures that all the recipe elements are marked up correctly.

To add a recipe using this template, the recipe elements (ingredients and method for example) need to be added to the page as Front Matter (YAML) rather than just text.

I tried to make this easy and human-readable. Here’s the flapjack recipe as data:

---
ingredients:
  porridge oats: 1kg
  condensed milk: 400g
  soft brown sugar: 500g
  butter: 500g
instructions:
  - Preheat the oven to 150C fan.
  - Line a large baking tin with baking parchment (my tin measures 39cm x 26cm).
  - Melt the butter and sugar in a large pan over a low heat. Don't cook the butter, just warm it enough to melt it.
  - Remove the pan from the heat and stir in the condensed milk.
  - Mix in the oats until well coated by the mixture.
  - Pour into the baking tin and smooth out with the back of a large spoon.
  - Cook for about 15-20 minutes. When the flapjack starts to brown around the edges of the tin, take it out of the oven - it should still be relatively pale in the middle.
  - Leave to cool for a few minutes before cutting into pieces.
calories: 10547
prepmins: 20
cookmins: 15
layout: recipe
title: Moist flapjack with condensed milk
date: 2017-04-21 08:00:00 +0100
image: flapjack.jpg
thumbnail: flapjack.jpg
tags:
  - featured
  - recipe
---
This recipe makes enough flapjack for two hungry children for several weeks of school lunches.

To translate this front matter into HTML I created a simple layout. You should be able to adapt this for your own recipes.

<!-- recipe post-content -->
<div class="post-content">
  <div class="post-reading">
    <span class="post-reading-time"></span> read
  </div>

  <!-- ingredients -->
  <div>
    <h3>Ingredients</h3>
     <ul>
        {% for ingredient in page.ingredients %}
        <li itemprop="ingredients">{{ ingredient[1] }} {{ ingredient[0] }}</li>
        {% endfor %}
     </ul>
  </div>
  <!-- ingredients -->

  {{content}}

  <!-- instructions -->
  <div itemprop="recipeInstructions">
    <h3>Instructions</h3>
    <ol>
      <li>{{ page.instructions | join: '</li> <li>' }}</li>
    </ol>
  </div>
  <!-- instructions -->
</div>

{% if page.prepmins or page.cookmins %}
  <dl class="dl-horizontal">
    {% if page.prepmins %}<dt>Preparation time</dt><dd>{{ page.prepmins }} mins<span itemprop="prepTime" class="invisible">PT{{ page.prepmins }}M</span></dd>{% endif %}
    {% if page.cookmins %}<dt>Cooking time</dt><dd>{{ page.cookmins }} mins<span itemprop="cookTime" class="invisible">PT{{ page.cookmins }}M</span></dd>{% endif %}
  </dl>
{% endif %}

<p class="invisible" itemprop="description">{{ page.excerpt | strip_html | strip_newlines | truncate: 200 }}</p>
<p class="invisible" itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation"><span itemprop="calories">{{ page.calories | default: 2 }}</span></p>
<p class="invisible" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"><span itemprop="ratingValue">5</span><span itemprop="reviewCount">1</span></p>
<!-- recipe post-content -->

Boom! Now I can add recipes easily and quickly.