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:
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.
Boom! Now I can add recipes easily and quickly.