Recipe Markup

Best practices

Confidential + Proprietary Confidential + Proprietary

Getting started: markup options
If the site has no recipe markup yet, the developer will have to add it in accordance with guidelines &
documentation from Intro to Structured Data & Creating a Recipe Action.
Since the JSON-LD format is within
<script> tags and not tied to the page’s
Both of these follow the community global standards from Schema.org. HTML content like the other two
formats are, the nesting can be more
specific and better target programs
that are reading the data non-visually
Microdata (like search engines).
JSON-LD
This format is the preferred option,
<div itemscope itemtype="http://schema.org/Recipe"> though using other formats will not
<script> currently hurt your recipe display.
{
"@context": "http://schema.org",
"@type": "Recipe"
RDFa }
</script>
<div vocab="http://schema.org/" typeof="Recipe">

*Examples are truncated, more necessary fields will be discussed later in this document.
Confidential + Proprietary
Getting started: testing existing markup
To get started with evaluating recipes on a given site, use the Search Console to run a
Rich results status report. *Note: this report is for a standard, static website with no recipe markup, your console view will likely look different.

View your report by clicking

“Open report”.

Check the “Valid with

warnings” tab. If any Recipe
pages have warnings for
“recipeInstructions” or
“recipeIngredient”, they are
not valid for Smart Displays.

Check the errors tab as these

will likely need to be
addressed as well.

Required fields for Smart Displays will be

discussed in more detail later in this
document.

Confidential + Proprietary
Further testing: necessary fields Note: Sometimes the tool times out. Just keep trying!

Find out whether a specific recipe page has the necessary fields by using the
Structured Data Testing Tool.
The “Recipe” type is mandatory. If you
do not see this as a result, the recipe
will not show up on the smart display.
This will show a preview of the
markup as it’s rendered by mobile
search. It’s a good indicator as to
whether your markup is working, but
there is no specialised preview for
smart displays at this time.
Having warnings is usually okay
unless the recipe is missing either
“recipeIngredient” or
“recipeInstructions”. Having either of
those as a warning means the recipe
won’t be read by the smart display.

There should be no errors. Errors

are often automatic indicators that
Click the bar to get markup details &
there is some work that needs to be
use the next slide to more accurately
completed.
determine whether all of the
necessary fields are present.
Confidential + Proprietary
Necessary fields - detail
Showing the six* required fields using the Google-preferred format, JSON-LD:
{
1 "@context": "http://schema.org",
2 "@type": "Recipe",
3 "name": "Beef panang curry",
"image": [
4 "https://realfood.tesco.com/media/images/Beef-panang-curry.jpg",
"https://realfood.tesco.com/media/images/RFO-Main-472x310-TescoOnline-Curry.jpg",
"https://realfood.tesco.com/media/images/RFO-Thumb-146x128TescoOnline-Curry.jpg"
],
The schema.org parent “ingredients”
5 "recipeIngredient": [
"4 garlic cloves, roughly chopped",
property will also work, but isn’t as
"1 red chilli, halved and deseeded", programmatically specific and may be
"2 sticks lemongrass, trimmed and roughly chopped", deprecated in the future.
"1 tsp chilli flakes" “recipeIngredient” is preferred.
],
6 "recipeInstructions": [
{
"@type": "HowToStep",
"text": "To make the panang paste, pound all the ingredients together in a large pestle and mortar for at least 5 mins to form a paste."
}, {
"@type": "HowToStep",
"text": "To make the curry, put the peanuts in a dry frying pan and toast over a low heat for a few minutes."
}
]
}

Confidential + Proprietary
*Note fields (1) and (2) may be combined to one HTML tag if using the Microdata or RDFa formats.
Partial Example from Tesco
Best practices
Images

Acceptable:

"image": [
"https://realfood.tesco.com/media/images/Beef-panang-curry.jpg"
]
It is better to give a few fallback
images of different sizes and
resolutions to target a larger number
of devices and screen sizes.

Best practice: For best results, provide multiple

high-resolution images (minimum of
"image": [ 50K pixels when multiplying width and
"https://realfood.tesco.com/media/images/Beef-panang-curry.jpg", height) with the following aspect
"https://realfood.tesco.com/media/images/RFO-Main-472x310-TescoOnline-Curry.jpg", ratios: 16x9, 4x3, and 1x1.
"https://realfood.tesco.com/media/images/RFO-Thumb-146x128TescoOnline-Curry.jpg"
]

Confidential + Proprietary
Best practices
recipeIngredient

JSON-LD Microdata or RDFa

One indice in the recipeIngredient array per item: One correctly attributed HTML tag per item:

"recipeIngredient": [ Microdata:
"1 box Pillsbury dough", <span itemprop="recipeIngredient">3 or 4 ripe bananas, smashed</span>
"6 cups thinly sliced, peeled apples (6 medium)", <span itemprop="recipeIngredient">1 egg</span>
"3/4 cup sugar", <span itemprop="recipeIngredient">3/4 cup of sugar</span>
"2 tablespoons all-purpose flour",
"3/4 teaspoon ground cinnamon",
"1/4 teaspoon salt", RDFa:
"1/8 teaspoon ground nutmeg", <span property="recipeIngredient">3 or 4 ripe bananas, smashed</span>
"1 tablespoon lemon juice" <span property="recipeIngredient">1 egg</span>
] <span property="recipeIngredient">3/4 cup of sugar</span>

Confidential + Proprietary
Best practices NOTE: Though this option gives the editor slightly more control, the
smart display will still split instructions at every sentence.

recipeInstructions - See details Using HowToStep may give more control over future/non-Google uses of this markup (as
the format is open source), but isn’t necessary for the current smart display functionality.

Separate each step into a “HowToStep” When not using “HowToStep”, the smart display will split
instructions “based on the context”, which means at
JSON-LD is used here for the example, see the every sentence:
schema.org entry for HowToStep for more.
"recipeInstructions": "Preheat the oven to 350 degrees. Mix in the
"recipeInstructions": [ ingredients in a bowl. Add the flour last. Pour the mixture into a loaf
{ pan and bake for one hour."
"@type": "HowToStep",
"text": "Heat oven to 425°F."
}, {
"@type": "HowToStep", 1. Preheat the oven to 350 degrees.
"text": "Place 1 pie crust in ungreased 9-inch glass pie plate, 2. Mix in the ingredients in a bowl.
pressing firmly against side and bottom." 3. Add the flour last.
}
]
4. Pour the mixture into a loaf pan and bake for one hour.

Hint: For more complicated instructions with sections, see documentation & examples for HowToSection
Confidential + Proprietary
Common mistakes
Grouping all ingredients into one code block where only the parent has the correct attribute markup:

<div itemprop="ingredients"> <div>

<p> <p itemprop="ingredients">1 tsp olive oil</p>
1 tsp olive oil<br> <p itemprop="ingredients">400g pack shallots, peeled</p>
400g pack shallots, peeled<br> <p itemprop="ingredients">4 garlic cloves, halved</p>
4 garlic cloves, halved<br> </div>
</p>
</div>

✖ ✔
Adding extra metadata to recipeInstruction or HowToStep:
(Google tries its best to guess which of the extra metadata to remove, so best to not include it at all, especially in JSON-LD)

"recipeInstructions": [{ "recipeInstructions": [{
"@type": "HowToStep", "@type": "HowToStep",
"text": "Step 1. Heat oven to 425°F." "text": "Heat oven to 425°F."
}] }]

✖ ✔ Confidential + Proprietary
FAQs
Can I use more than one cuisine or category for the recipeCuisine or recipeCategory fields?
Yes, format them in a comma-separated list like the format for the keywords field.

What if my recipe has images for the recipe instructions?

This is currently not supported, but may be supported in the future (no timeline set for this feature, so
there is no guarantee that it will be implemented). For now, keep the images on the webpage as it is still a
helpful user feature there.

Do I need to implement all fields that are coming up as “Warnings” in the tests?
Both recipeIngredient and recipeInstructions are required, but other warnings are not required fixes.
However, it is better from a user perspective to have as much information available as possible, so
making the information in the other fields markup-compatible (like recipeCuisine or aggregateRating) will
give the user more details when they’re making their recipe selection.

Confidential + Proprietary