How To Add A Printable Recipe To Your Blogger Blog

Pizza cut in slices If you're running an inviting food blog on Google's Blogger platform, key SEO setup is vital for better presence on search engines. One such important setting is using a recipe schema markup to get rich snippets in the search results. Configuring it ensures that search engines can interpret key recipe data in an easy way and can display it in a nice formatted manner. The end result is more clicks and qualified traffic from search engines. But unfortunately, there is no plugin or widget for the same that facilitates easy implementation of the same. The following tutorial will help us in adding recipe schema markup on a food blog hosted on blogger platform. All you need is basic knowledge of HTML tags and CSS code with elementary skills of copy pasting the code at the right place. You can use this markup both on blogs using a custom domain as well as on the regular ones using a blogspot subdomain. So, let's make our food blog a better candidate for search engines to get an influx of hungry readers. Head over to the blog's dashboard.

Pizza cut in slices

Note: Before attempting to implement this feature, make sure you've taken backup of your blogger blog else you may inadvertently mess up your design template.

Why I Need Recipe Schema Markup?

If you're not familiar with recipe schema markup, you may end up skipping its implementation. So, first, we'll try to understand what it is all about and how its implementation benefits both the food blogger as well as the reader.

Recipe schema is how a food blogger provides key information about the published recipe in such a way that search engine crawlers can easily pick it and can use it to display the recipe result in a rich format in the search results. Take a look at the image below.

Recipe rich snippets in Google search results
At a glance, you can easily deduce that using recipe schema markup makes the entries of your recipe in the search results more attractive and appealing to the potential readers. One gets to see the snapshot of the delicious recipe with quick information about the cooking time, nutritional information, ratings and much more.

Implementing recipe rating/review within a blogger post is omitted to simplify the entire process. We'll focus on recipe snapshot, nutritional information and cooking time which are good enough for attracting clicks on the result pages. After integrating the recipe schema markup, a typical rich snippet will look something like this.

Eggplant recipe rich snippet
So, let's get started and integrate this feature into our food blog hosted on Google's blogger platform. Once again, I'll remind you to take a backup of your blog before proceeding.

Integrating Recipe Schema Markup

As I mentioned before, basic working knowledge of HTML & CSS is a prerequisite for using this feature. So first, you need to understand that while using recipe schema markup you have to use the post editor in HTML mode leaving the Compose mode altogether. It also requires quick default settings to ensure the markup is interpreted correctly while publishing the recipe post. Let's start the configuration.

Step 1: After taking the backup, create a new blank post on your blog and click the HTML mode tab on the top of the post editor as shown below.

Blogger editor HTML mode button
Step 2: Thereafter, select the Options drop down menu to change the default editor settings. The two most important settings are related to interpretation of HTML markup and activation of inserting new line breaks whenever an enter key is pressed on the keyboard. The settings should be as shown below.

Blogger editor HTML mode options and settings
Step 3: Once these settings are done, give a demo title to this sample post and publish it. Immediately after publishing, delete it. I repeat again, immediately after publishing this demo post, delete it.

Step 4: Within your blog's dashboard, now go to 'Settings → Posts and comments → Post Template → Add' option. You'll get a text box after clicking this option. First, paste the following CSS code in it.

                      <style type="text/css"> #recipe-schema { border: 1px dashed #89D2BD; padding: 25px; background: #F1FEF9; font-size: 15px; margin-bottom: 10px; } .recipe-schema-image { float: right; clear: right; margin-left: 10px; padding: 5px; background: #eee; border: 1px solid #ddd; } .recipe-schema-name { font-size: 18px; } .schema-primary-meta-data { margin-top: -25px; border-bottom: 1px solid #D0E3DF; padding-bottom: 20px; } .recipe-schema-ingredients, .recipe-schema-instructions { font-weight: bold; } .recipe-schema-description { font-style: italic; } @media screen and (max-width: 550px){ .recipe-schema-image { float: none; clear: both; margin-bottom: 30px; margin-left: 0; } } </style>

Step 5: Right below this CSS code, paste the following recipe schema HTML markup and click the Save settings button.

                      <br /><!--Write post excerpt/intro here--> <br /><!--more--> <br /><!--Write general recipe information and/or step-by-step preparation photos here-->  <br /><div id="recipe-schema" itemscope itemtype="http://schema.org/Recipe"> <img class="recipe-schema-image" itemprop="image" src="Upload and insert image URL here" width="150" alt="Write recipe photo description here"  /> <br /><div class="schema-primary-meta-data"> <span class="recipe-schema-name" itemprop="name">Enter Recipe Title Here</span> <br /><strong>Author: </strong><span itemprop="author">Author name here</span>  <br /><strong>Preparation Time: </strong><time datetime="PT20M" itemprop="prepTime">Enter preparation time here (also update duration code)</time> <br /><strong>Cooking time: </strong><time datetime="PT15M" itemprop="cookTime">Enter cooking time here (also update duration code)</time> <br /><strong>Servings: </strong><span itemprop="recipeYield">Enter number of servings here</span> <br /><strong>Calories per serving: </strong><span itemprop="calories">Enter calories per serving here</span> </div>  <br /><span class="recipe-schema-description" itemprop="description">Enter a short description of the recipe within 200 characters.</span>  <br /><br /><span class="recipe-schema-ingredients">Ingredients:</span> <ul> <li><span itemprop="ingredients">Ingredient 1</span></li> <li><span itemprop="ingredients">Ingredient 2</span></li> <li><span itemprop="ingredients">Ingredient 3</span></li> <li><span itemprop="ingredients">Ingredient 4</span></li> <li><span itemprop="ingredients">and so on...</span></li> <li><span itemprop="ingredients"></span></li> <li><span itemprop="ingredients"></span></li> <li><span itemprop="ingredients"></span></li> <li><span itemprop="ingredients"></span></li> <li><span itemprop="ingredients"></span></li> <li><span itemprop="ingredients"></span></li> </ul>  <div class="recipe-schema-instructions"> Instructions:</div> <span itemprop="recipeInstructions"> <ol> <li>Step 1</li> <li>Step 2</li> <li>and so on....</li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ol> </span>   </div>

After completing these steps, whenever you will open the post editor for writing a new recipe post, it will automatically open in HTML mode and the recipe schema template will be automatically inserted in it. The new post editing screen will now look something like this.

Default post template of Blogger platform with recipe schema markup
Before we go into the details on how to use this template for getting a rich snippet in the search results as shown above in the first section, I'll show a partial screenshot of how the formatted recipe schema section will look on the blog after it is published. Here's how it looks.

Recipe section with schema markup
If this formatted section doesn't gel well with your existing blog theme, you can freely edit and modify the CSS code given above to tweak the visual appearance of this section. And now let's move on to the next important section to understand how to use this recipe schema template.

Working with Recipe Schema Default Template

Within the default template, the first line is  which should be deleted and should be replaced with the opening summary or excerpt of the recipe post. This excerpt will be used on a homepage as well as on the archive pages if you've opted to showcase partial snippets of the posts.

The next line is  which is simply used as a delimiter for post excerpt and the rest of the post body. So you can leave it as it is. Anything above this line is included in the excerpt.

Right below is the following line  which simply explains what you have to do with the space available right below . Delete this line and use it for writing general details about the recipe including step-by-step snapshots of the recipe, if any.

So, out of these 3 lines, only  needs to be retained and the other two will be deleted for writing the relevant details within the respective sections (viz., excerpt, general post body).

And now we step into the actual recipe schema markup section to fill it with the appropriate details. The first line that needs attention is as follows.

                      <img class="recipe-schema-image" itemprop="image" src="Upload and insert image URL here" width="150" alt="Write recipe photo description here"  />

Here, you simply have to upload and insert the recipe image URL mentioned within the src attribute of the <img> tag. Within the same tag, also fill the photo description within the alt attribute to let search engines get more information about the recipe snapshot.

The next line that needs attention is as follows.

                      <span class="recipe-schema-name" itemprop="name">Enter Recipe Title Here</span>

Now this one is pretty straightforward. All you have to do is to provide the recipe title here. This can either match with the title used previously within the title editing field or you can provide an entirely new title.

The next line addresses the author name.

                      <strong>Author: </strong><span itemprop="author">Author name here</span>

Provide your name (assuming you're the author of the recipe) here and ensure you're using both the first name and the last name instead of just jotting down the pen name or just the first name.

Next important information that needs attention is the preparation time for the recipe. Here's the line in question.

                      <strong>Preparation Time: </strong><time datetime="PT20M" itemprop="prepTime">Enter preparation time (also update duration code)</time>

You have to fill two pieces of information in this line. The first one is the preparation time in a human readable format that will be visible to the readers and second is its equivalent code that search engine can understand. The former part can be written in this format.

20 min → 20 minutes
1 hr 16 min → 1 hour 16 minutes

The latter part will be written within the datetime attribute of the <time> tag. It'll be written as follows.

15 minutes → PT15M
1 hour 20 minutes → PT1H20M
50 minutes → PT50M

Always make sure that the latter coded format duration matches with the former human readable time duration.

And now comes the cooking time duration. The following line needs to be edited.

                      <strong>Cooking time: </strong><time datetime="PT15M" itemprop="cookTime">Enter cooking time here (also update duration code)</time>

It's the same as the preparation time when it comes to updating both the time formats. Again, make sure that both the time durations are equal.

The next two lines display the numbers of servings and the calories per serving.

                      <strong>Servings: </strong><span itemprop="recipeYield">Enter number of servings here</span> <strong>Calories per serving: </strong><span itemprop="calories">Enter calories per serving here</span>

Updating these entries is dead simple. For the number of servings, use entries like 10 pieces, 1 jar, 20, 3 dozen or 4 glasses. For a second entry, following are some of the examples, 250 cal, 700 cal, or 165 cal..

And now comes the recipe description.

                      <span class="recipe-schema-description" itemprop="description">Enter a short description of the recipe within 200 characters.</span>

Simply describe the recipe in about 160 to 200 words that may be used within the rich snippet on the search result pages. So make sure the recipe description is alluring and eye-catching.

Recipe description is followed by the ingredients list. Here's the default template.

                      <span class="recipe-schema-ingredients">Ingredients:</span> <ul> <li><span itemprop="ingredients">Ingredient 1</span></li> <li><span itemprop="ingredients">Ingredient 2</span></li> <li><span itemprop="ingredients">Ingredient 3</span></li> <li><span itemprop="ingredients">Ingredient 4</span></li> <li><span itemprop="ingredients">and so on...</span></li> <li><span itemprop="ingredients"></span></li> <li><span itemprop="ingredients"></span></li> <li><span itemprop="ingredients"></span></li> <li><span itemprop="ingredients"></span></li> <li><span itemprop="ingredients"></span></li> <li><span itemprop="ingredients"></span></li> </ul>

You can increase and decrease this list depending on the number of ingredients required for the recipe. Use standard metrics for measurements and make sure the entries are unambiguous.

And last but not the least is the section listing the steps for making the recipe. Here's the default template for this section.

                      <div class="recipe-schema-instructions"> Instructions:</div> <span itemprop="recipeInstructions"> <ol> <li>Step 1</li> <li>Step 2</li> <li>and so on....</li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ol> </span>

Quite similar to the ingredients section, you can increase or decrease the number of steps to be used in this section. Use one sentence for each step clearly explaining the methodology for completing the recipe.

Once you've completed editing this section, you can go ahead with publishing the post. Before pressing the publish button, you may add tags, custom permalink, and the search description within the post settings menu on the right side of the post editor.

Miscellaneous Tips and Guidelines

Following are some of the pointers and tips that'll help you implement and use this feature in a correct way. Once more, I'll remind you to take backups of your blog before attempting to integrate this markup. So, let's wrap up and see what we've learned so far.

After integrating recipe schema markup, older posts need to be edited manually to include this feature.
It takes some time before rich snippets start to appear in the search results. So be patient and wait for a few weeks after integrating this feature.
Apart from changing the visual appearance through modification of the CSS code, you can also change the HTML markup in terms of order/placement of information. For example, you can shift the recipe image below the title and so on.
Do not use this default template for general review posts or list posts. It's only for regular recipe posts.
Use the following testing tool with the URL of the published recipe post to see if the schema markup is correct or not.
In case you struggle to integrate this feature, feel free to send me an email for help.