A recipe template for Blogger/Blogspot posts

One of the projects I'm working on Blogger is a culinary blog in the Romanian language, where both my wife and I write. We use this blog as a replacement for our parents' recipe book. We usually access it from our tablet when we cook one of our favorite recipes that we don't know by heart.

Having a culinary blog on the blogger platform comes with an unexpected problem - the lack of a recipe template that supports a recipe markup scheme to facilitate the indexing of recipes in Google.

Long time ago, when I was writing on WordPress, I had the option of installing a ready-made recipe plugin. Now I don't have that facility anymore and I had to create a recipe template from scratch myself.

When I was working on developing this template I thought that other blogger.com users have the same problem. So I decided to publish the template here, maybe it will be useful to other bloggers.

Because it's quite a long code I published it as a Gist on GitHub and embedded it here. This way it is easier to take the code with copy-paste and use it on your blog.

The recipe created with this template looks like this:

 

Here comes the story behind the recipe

Enter Recipe Title Here

Preparation Time: Enter preparation time here (also update duration code)
Cooking time: Enter cooking time here (also update duration code)
Servings: Enter number of servings here
Calories per serving: Enter calories per serving here

Diet: Special diet (eg. gluten-free)

Enter a short description of the recipe within 200 characters.

Ingredients:

• Ingredient 1
• Ingredient 2
• Ingredient 3
• Ingredient 4
• and so on...

Instructions:

Step 1

Step 2

Step 3

Step 4

and so on...

Notes:

• Note 1
• Note 2
• Note 3
• and so on...

Some final words...

 

How to use the recipe template

In order to be use the recipe template basic knowledge of HTML is required, as most of the editing is done in HTML mode.

So, create a new post on blogger, then take the code from the gist with copy-paste and put it in the newly created article.

The recipe template has been designed to take as many styling elements from the theme as possible. However, some editing in HTML mode is required.

In the template, look for the line <!--Write post excerpt/intro here--> and replace it with the introductory text of the article. 

Everything above the line of code <!-- more--> is included in the post excerpt. You can delete this line if you do not use the post excerpt.

The text Here comes the story behind the recipe is not part of the recipe. Here you can write whatever you like.

Now you have to go on the line <div class="recipe-title"><span itemprop="name"><h1>Enter Recipe Title Here</h1></span></div> - it's line 47 in my gist. Change the title of your recipe here.

Editing the recipe image is a bit more complicated. In this example I will first image in the blog post as the recipe image, but you can use just any other image you want.

When you enter an image in the article blogger.com creates a code similar to the one below:

<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHNvjHk4e0z5ToVbtonISCEDAqy5Sbc0CQNRmGqz2ycZWQsQlgugORIzmsIVecXJfN_dSZd1jiN6VWvlCGWiDOyT1T2coim425TXFPsxgYkLduSO2Jvk__nTno40IXQPM6YiPXsPkFt_IcitTQ5KGn1_ulmt3zma4J5Px6BhcbAtCFVjkdHUkxWeh7/s200-c/recipe-placeholder.jpg" style="display: block; padding: 1em 0px; text-align: center;"><img alt="" border="0" data-original-height="1800" data-original-width="2400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHNvjHk4e0z5ToVbtonISCEDAqy5Sbc0CQNRmGqz2ycZWQsQlgugORIzmsIVecXJfN_dSZd1jiN6VWvlCGWiDOyT1T2coim425TXFPsxgYkLduSO2Jvk__nTno40IXQPM6YiPXsPkFt_IcitTQ5KGn1_ulmt3zma4J5Px6BhcbAtCFVjkdHUkxWeh7/s600/recipe-placeholder.jpg" width="600" /></a></div>

What we are interested in here is the source code of the image, that portion of the code highlighted in light blue.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHNvjHk4e0z5ToVbtonISCEDAqy5Sbc0CQNRmGqz2ycZWQsQlgugORIzmsIVecXJfN_dSZd1jiN6VWvlCGWiDOyT1T2coim425TXFPsxgYkLduSO2Jvk__nTno40IXQPM6YiPXsPkFt_IcitTQ5KGn1_ulmt3zma4J5Px6BhcbAtCFVjkdHUkxWeh7/s600/recipe-placeholder.jpg

The s600 parameter tells blogger to resize image with longest side of 600px. We don't need such a large image. The schema.org specifications say that the image for the recipe should be 185px x 185px minimum. So we will replace s600 with s200-c as you see on line 51 in the gist file (the -c parameter crops the image to a square).

Since you are here, it's a good opportunity to fill in the  alt parameter of the image on the same line of code, fto help with SEO.

The next step in editing the recipe is to fill in the preparation time and cooking time. These times are found on lines 54 and 55 of the code published on GitHub. In both cases, both the time in datetime format, to be interpreted by search engines, and the time in human-readable format must be filled in.

Then fill in the number of servings and the number of calories per serving. If you don't know the number of calories per portion you can delete this information - it is on line 58 of the code.

Also, the special diet information on line 60 of the code can be deleted if not used. I use it to mark recipes that fit special diets, such as gluten-free recipes.

When you fill in the recipe description, be careful not to exceed 200 characters.

The code for adding an ingredient is <li><span itemprop="ingredients">Ingredient 1</span></li>. Leave only as many code blocks as the recipe has ingredients. Delete the extra blocks, or add new blocks if necessary.

Proceed in a similar way for the recipe instructions. The code block for the instructions is <p><span itemprop="recipeInstructions">Step 1</span></p>.

The notes section is not part of the recipe scheme. You can delete it altogether or add any information you wish here.

Checking the information in the recipe schema

Once the recipe is published, it is a good practice to check it with the Rich Results Test. To do this copy the URL of the post where the recipe appears, go to https://search.google.com/test/rich-results and insert the URL there.

If everything is OK you should not receive any errors. It is normal to get some warnings, because in this recipe template I have not implemented some optional fields from the recipe schema.

For the moment these warnings are not a problem, they do not have an impact on the ranking of the recipe in Google searches.

One more thing...

If you have an older blog, with many recipes written in plain text, it's easier to enter the recipe schema in JSON-LD format. How you can do this I have explained in another article.