How to Cook up a Storm With Recipe Schema Markup

Of the many world-changing effects of Covid-19, preparing more homemade meals is a welcome one. In a Hunter survey of over 1,000 Americans, 54% are cooking more and 46% are baking more. This lifestyle change is likely to stick even after the coronavirus pandemic has subsided, as 51% of those who are cooking more have also said they will keep doing so when the crisis is over.

In the same survey, 34% are looking for more recipes, 61% of recipe users are looking for practical solutions, while 45% are looking for inspiration to try new foods. 

Simply put, people are hungry for home-cooking recipes. You can satisfy this basic need with ease when you implement recipe schema markup on your website.

What Is Recipe Schema Markup?

Schema markup is code added onto web pages to tell search engines specific information relating to any number of topics. This includes recipes and includes things like estimated cooking time, nutritional facts, and ingredients. This information is then displayed in the SERPs.

Schema markup in general is helpful for search engines to present more informative search results for a better user experience. 

How Do I Benefit From Recipe Schema Markup?

There are multiple ways recipe schema markup can help improve your site’s performance on the SERPs:

1. Rich Results = Higher Click-through Rate (CTR)

The most obvious benefit to implementing recipe schema markup is that the search results for your webpages will have attention-grabbing info. 

These “rich results” for recipes will show up in the carousel at the top of the results page with additional data, including the thumbnail, calorie count, and the standard text description. People searching for recipes online are drawn more toward search results that have appealing images, high star ratings, and a handy list of ingredients. 

2. Increased Site Traffic

It stands to reason that getting more clicks on your links will lead to more traffic on your website. Data bears this out, as exemplified by Google’s case study on Rakuten Recipe. Rakuten is a Japanese web platform where home chefs share their recipes and menus on a website or an app. 

After collaborating with Google Search and optimizing their use of recipe schema markup, Rakuten Recipe got 2.7 times more search engine traffic. That traffic is also meaningful traffic, as the average session duration on their recipe pages also got 1.5 times longer. 

3. Guided Recipes for Voice Search

Google has recently added the Guided Recipes feature to Google Search Console. Guided Recipes basically lets users look for recipes using voice search on their Google Assistant, which then repeats out loud the step-by-step instructions while displaying accompanying pictures and videos. It’s a complete hands-free search experience catering to cooks. 

Gartner predicted that 30% of web browsing will be done without a screen by this year, thanks to voice search and smart speakers. In Microsoft’s 2019 voice report where they surveyed 5,000 US consumers, 69% have used a digital assistant and 72% use voice search with a digital assistant. 

Currently, the only way to take advantage of this growing market of voice search users looking for recipes is to implement recipe schema markup on your site. 

How Do I Get My Recipes to Display as Rich Results?

If, for any reason, you have set your recipe pages to be not indexed by search engines, change your robots.txt or meta tags to allow Google’s crawlers to index those pages before doing anything else. 

Once you’ve allowed your recipe pages to be crawled, you can start implementing rich schema markup to your pages.

Schema markup properties

There are only two Schema properties that are necessary for Google to show recipes as rich results: “image:” (a picture of the completed dish) and “name” (the name of the dish). 

The name property is as simple as it gets, but there are certain guidelines for the image property that you must follow.

• The image has to be crawlable and indexable
• The image must be representative of the dish
• The file format must be supported by Google Images
• If you have multiple pages for a recipe, every page must have an image

Google also suggests that you provide multiple high-res images with aspect ratios of 16×9, 4×3, and 1×1.

If you want your recipes to show more compelling rich results, it’s highly recommended that you use the following properties:

• aggregateRating — The average review score of your recipe
• cookTime — How long it takes to cook the dish (always use it with prepTime)
• description — A brief description of the dish 
• keywords — Terms related to your recipe (e.g. Thanksgiving, authentic)
• nutrition.calories — The number of calories per serving
• prepTime — How long it takes to prepare the dish (always use it with cookTime)
• recipeCategory — The type of meal your dish is (e.g. breakfast, dessert, snack)
• recipeCuisine — Where your dish is associated with (e.g. Japanese, Italian, Mexican)
• recipeIngredient — The necessary ingredients 
• recipeInstructions — The steps to make the dish
• recipeYield — How much of the dish is produced from following the recipe
• totalTime — How long it takes to prepare and cook the dish (if you aren’t using cookTime and prepTime)
• video — If you have a video demonstration of your recipe, this property will ensure the video shows up as a rich result

How Do I Implement Recipe Schema Markup?

There are two ways for you to add recipe schema markup:

• Use plugins if your site is on a CMS — Popular content management systems like WordPress and Magento have free and premium plugins that can automate the whole process for you.
• Create custom code — If your website is custom-built, you will have to create code for it. If you don’t have any experience with coding, don’t worry, there are tools that can generate code for you.

You can get started with your recipe schema markup using Web Code Tools’ JSON-LD Recipe Generator. 

All you have to do is fill in the fields with the relevant information about your recipe, and the tool will automatically generate the code for you to the right of the screen.

Copy the generated code and paste it below the <head> section of your recipe page’s HTML, and that’s it!

Testing your recipe schema markup code

Of course, it’s important that you take some precautions before making drastic changes to all of the recipe pages on your website. Test out the generated code using Google’s Rich Results Test tool.

Click on the tab that says “<> CODE”, paste the generated code onto the empty field below, and then click on the TEST CODE button.

You will know the code is working properly if the test result says that the page is eligible for rich results.

Pro tip: If you’re only using the JSON-LD Recipe Generator, the test result will have warnings. That’s because the generator doesn’t cover all of Google’s recommended Schema properties, and you will have to add the rest of those properties manually. The page will still show rich results, so don’t worry about that, but you can add more properties with a little extra effort. 

Reap SEO Rewards With Recipe Schema Markup

People are learning to eat healthier, spending less from dining out, acquiring new skills, and regaining a sense of control over their lives amidst uncertain times as they look for and share recipes online. Tap into this growing demand with recipe schema markup, and you can establish your food website firmly into the new normal.

You can do much more to tailor your recipe’s rich results to your liking, as long as you devote time to studying how schema markup works. Check out Schema.org’s Recipe page for a comprehensive list of properties.

If you want to find out how you can take your SEO to the next level, book in a free strategy call today to explore how we can help.