How to generate Structured Data for Recipes

This video is all about the Structured Data that is needed for Recipes.

Links from the Video:

Transcript:

In this video I want to demonstrate how to build the recipe snippet using Structured Data.

If your site is using Structured Data for recipes it’s eligible to not only get an image, star ratings, the number of calories and the preparation time into search results but also enable the Google Assistant to guide users through your recipes on Google home and smart displays. Plus: it maybe appear in a carousel of rich search results.

Let’s make some yummy cookies! 😉

music playing

I am welcome back nice to have you in the second lesson of module 3 of my Structured Data Training.

I am Florian the developer of SNIP, the Rich Snippets and Structured Data plugin for WordPress. If you want to use the plugin please feel free to follow the link that you can find in the description area.

In this video I want to show you how a Recipe Snippet is built. You hopefully took all the lessons from the previous modules. If not, please jump back to the beginning or to a video where you think you need to refresh your knowledge.

In this video it’s important that you have understood what Structured Data is and what Rich Snippets are. You need to know how and where you can find the right schema classes as well as their properties to create a Rich Snippet.

Let’s jump right in!

Read through the docs

As always: we look up the recipe page on Google’s reference to see

A) how a Rich Snippet in search results may look like.
B) What you should do and should not do. And be really serious about that! If you do violate Google’s policies your markup might not show up in search results and maybe never come back.
C) And last but not least what properties are totally necessary and which ones are just recommended.

This is the page where you find this document. Look it up, read through, and then follow me to the next page.

Of course you should also have a look on schema.org. This page is the one that defines all properties in every detail. On schema.org we see that a Recipe is a “HowTo” which is a “CreativeWork”, which is a “Thing”. If you don’t know what I’m talking about right now please go back to module one of my Structured Data Training. It will be explained in full detail how schema.org is structured.

As you can see the Recipe schema can have dozens of properties. However you don’t need every single one to get a Rich Snippet in search results. But as always: you can add more if you can fill the properties properly. I am sure that Google and other search engines will mark more and more properties as mandatory in the future. For now we stick with the recommended ones.

Alright! Let’s get started!

In the video I will use the built-in generator in SNIP – my Rich Snippets in Structured Data Plugin for WordPress. If you don’t have the plugin already please feel free to use the Structured Data generator on my website to follow the video instructions. You will find the link in the description area as well.

The free generator does not have all the features the built-in generator has. So you may be stuck at some point because I will show you how you can work with overridable properties which is a feature that is not available in the Structured Data generator [on my website].

Let’s begin!

Create a Global Snippet (for automation)

Let’s assume that you have a lot of recipes on your site. It makes total sense to create a Global Snippet so that you only create one snippet that then generates Structured Data automatically on all your recipe pages. If you don’t know what Global Snippets are please jump back to module 2 of my Structured Data training. I have a video that you can watch and that explains again what Global Snippets are.

At this point in time the plugin comes shipped with an example recipe snippet. So why not use this one? The plugin normally asks if you should install the examples but if you have missed the notice – like you can see here – it’s the case in on my page – you can always go to the settings page of the plugin and reinstall them hitting just “Go for it!”-button.

Yep! So here you can see the recipe. It’s currently in a draft mode and we edit this one. On a second tab I have opened the Google’s reference page for a recipe. As described earlier in the video it shows us all the properties that we need to get a Rich Snippet in search results. As you can see only image and name are required. But I would also recommend to use all the recommended properties as well.

So switching back. You can see that the demo snippet is already configured perfectly for you. All the properties are already there but I will go through every property anyway so you can see how it works all together. It might be that Google changes the list of recommended and required properties in the future. So please keep an eye on this to make sure you stay up to date.

recipeYield is the quantity produced by the recipe. Because it’s different within every recipe-post I selected “overridable” here. I also selected “Direct text input” so that we can enter a custom number later.
The recipeCategoryis maybe self-explanatory. I have set the property to use the category of the post.
This is almost the same for the image. It uses the posts featured image. So its URL, the width, and the height.
Because on my blog the recipe name is also the title I have configured the property to use the post title here.
Currently I don’t have a rating plugin installed so I rate all my recipes myself. That is because I’ve selected the five-star rating system here. As you can see it produces these stars. The property is also marked overridable.
The recipeIngredient property holds all ingredients. Because this property can be listed more than once, it is marked overridable and as a list. You can see later why this is important.
The recipeInstructions consists of multiple steps on how to cook a dish. You could use the “post content” field here. But I have decided to go with multiple “HowToSteps” instead. The reason for this is because Google’s Assistant is then able to read out one step after the other if someone searches for a recipe using voice search.
The nutrition property consists only of one sub-property that is the calories property of the “NutritionInformation” schema. These fields are also marked as overridable as you can see here.
The prepTime – as the name suggests – is the preparation time of the dish. Because this normally needs to be a special ISO-duration format I have built a special wrapper function that allows you to only enter a time in minutes. The number you will enter later will then be transformed into that format that is readable by search engines.
dateModified as well as datePublished here down below should be clear. I use WordPress’ internal values for the dates. So “post modified date” and “post published date”.
The cookTime as well as the totalTime also needs to be in a duration format. So I have chosen “duration” here as well.
For the description I have chosen a “direct text input” And is also marked as overwritable. You could also use the post except here. Especially if you’re working with post excerpts on your site.
Keywords and recipeCuisine should be self-explanatory. They are both overridable.
And last but not least there is the video property and that is the only property that I would delete if you don’t make videos for your recipes at all. Currently it’s only a recommended property. Googles Structured Data Test Tool would output an orange warning but as you know from a previous video orange warnings are not errors. And so your Rich Snippets will show up even there is no video.

Set up rules

Alright! After that all you need to do is to make sure you Global Snippet will appear on the right post. So you can define a set of rules here to determine which pages your Structured Data will used on. I will use here pages for now. Save your settings, click on publish or save or update and then we head over to “Pages” and I have prepared “Flo’s Favorite Donuts” recipe for you!

Hooray!

Enter data to the (recipe) post

This is a short overview of a recipe. It shows all the data in the text. Like yield, the preparation time, the ingredient list, the instructions of course, and some side information like the calories or the cook time. However this data is really difficult to fetch from a search engine side of view. That’s the reason why you have to add this data to a markup.

You can now click on the “Edit Global Snippets” button on the right sidebar here or you can scroll down to the Rich Snippets metabox. Here you can find the same button again. It opens up a new window that shows all Global Snippets on the left side. A click on the recipe brings up all the properties that have been checked overridable. Now you see why we marked them as overridable at all.

Please note the properties that we have marked as “lists”. In this example it would be the recipeIngredient property and the recipeInstructions property. Because they have been marked as “list” properties you will find two new buttons on the right side. They allow you to duplicate a property so that they are in the markup multiple times. That is totally fine because the plugin will later merge them together what we as developers call an “array”.

music playing

Test your Structured Data

So now we hop over to Googles Structured Data Test Tool to test our snippet. You would enter your URL to a recipe page here. I will instead copy the snippet code the plugin has generated because I’m on a local development site that Google has no access to. So I’m pasting the code here and run the test.

And after the validation we get four errors and one warning. There is a video available to describes the difference between warnings and errors but primarily you just have to know that warnings are okay because they do not prevent you Rich Snippet from showing up. However the read errors do! So we should fix them.

Then we scroll down we see that the author is missing within the Review schema. On Google’s reference page there are no mentions that the author is a required field. Nevertheless we should fix it.

Because we don’t have a video for this recipe Google shows some warnings. I would recommend to either always work with videos or never. So in this case it would be better to delete the property all together.

So we have two things to do now:

remove the video property
and add the author property within the Review sub-schema.

Let’s go back to our global snippet again.

Fix errors

Alright! We scroll down and delete the video. Then open up the review and we search for the author. Yep! And the author should be a “Person” with the name of – I would say – post author name. And the URL should be the “post author URL”.

Alright! That’s it!

Now we update our schema. And then test our page again.

Just one quick word: if you still get errors you have the option to go to SNIP -> settings and go down to “Clear the Cache”. That would flush the cache on all pages and the snippet will be regenerated.

Test again

Yeah! So let’s do the test again.

I will paste the new code into the field. And revalidate. And now we see that everything is ok except there is still one warning. And that is because the video property is a recommended field and Google wants you to add this field. However it does not pretend you Rich Snippet from showing up in search results because it’s not a required field.

Check the preview

You can then click on the preview button to see how your snippet should look like in search results but be warned: this preview at this point in time is not very accurate. In this case it doesn’t help me at all as it only shows the structured data itself in the headline. So I guess this is still a very buggy thing and Google has to work one more.

Summing up

Alright let’s sum everything up what we have learnt in this video.

At the time of the making of this video the recipe snippet shows up and image, star ratings (if you use a rating system on your site) and the preparation time. Google is playing a bit with what is displayed. I can remember that they displayed the calories of the dish a few weeks ago. Now they show the preparation time instead. I guess this depends on the searched keyword, too. Google says that they display the recipe in a carousel as well. I never saw this in action because I rarely look up recipes on the internet.
Anyway every search result is enriched in a certain way even your images in an image search.
Recipe snippets enable the Google Assistant to guide users through your recipes on Google home and smart displays.
To find the right properties use Google’s reference pages to learn more what you should and should not do.
Use schema.org to integrate more properties. I totally recommend to use as many properties as possible.
Automate as much as you can by setting up a Global Snippet as shown in this video using SNIP – my Rich Snippets and Structured Data Plugin.

In the next video I will show you how to create a Review snippet to show stars in search results. That is for everyone who provides reviews for critics products or other things. See you in a bit!

music playing