Recipe & Carousel (Recipe, ItemList)

What is recipe rich result?

Enhance the visibility of your recipes on Google by using structured data. Providing details like ratings, cooking times, and nutrition information helps Google understand and showcase your recipes effectively in search results and images.

Kindly Refer Google Doc (opens in a new tab) to know more about recipe rich result.

What are necessary data for recipe rich result?

1. Name

recipe.html

<div id="rjs-recipe-1">
  <!-- name of recipe -->
  <p class="rjs-recipe-1-name">Biryani</p>
</div>

2. URL

recipe.html

<div id="rjs-recipe-1">
  ....
</div>

3. Thumbnail

recipe.html

<!-- image thumbanails -->
<img class="rjs-recipe-1-img" src="https://i.imsur.com/ULHbPTa.jpeg" />
<img class="rjs-recipe-1-img" src="https://i.imsur.com/RstsU7N.jpeg" />

4. Author

recipe.html

<p class="rjs-recipe-1-aname">Darsan</p>

5. Date published

recipe.html

<p class="rjs-recipe-1-pdt">2023-01-12</p>

6. Description

recipe.html

<p class="rjs-recipe-1-desc">
Biryani is a flavorful and aromatic rice ..... <!-- shortened for brevity -->
</p>

7. Recipe cuisine

recipe.html

<p class="rjs-recipe-1-csnt">Indian</p>

8. Preparation time

recipe.html

<!-- ptm - means minutes-->
<p class="rjs-recipe-1-ptm">25 minutes</p> <!-- OR -->
 
<!-- pth - means hours-->
<p class="rjs-recipe-1-pth">1 hours</p> <!-- OR -->
 
<!-- pthm - hours and minutes -->
<p class="rjs-recipe-1-pthm">2 hours 15 minutes</p>

9. Cooking time

recipe.html

<!-- ctm - means minutes-->
<p class="rjs-recipe-1-ctm">25 minutes</p> <!-- OR -->
 
<!-- cth - means hours-->
<p class="rjs-recipe-1-cth">1 hours</p> <!-- OR -->
 
<!-- cthm - hours and minutes -->
<p class="rjs-recipe-1-cthm">2 hours 15 minutes</p>

10. Keywords

recipe.html

<ul class="rjs-recipe-1-kw">
  <li>Biryani recipe</li>
  <li>Homemade biryani</li>
  <li>Indian biryani</li>
  <li>Chicken biryani</li>
  <li>Spicy biryani</li>
  <li>Easy biryani recipe</li>
  <li>Delicious biryani</li>
  <li>Traditional biryani dish</li>
</ul>

11. Number of Servings

recipe.html

<p class="rjs-recipe-1-serves">2</p>

12. Recipe category

recipe.html

<p class="rjs-recipe-1-cat">Breakfast</p>

13. Calories

recipe.html

<div class="rjs-recipe-1-nutrition">
	<p class="cal">150</p>
</div>

14. Aggregated rating

recipe.html

<div class="rjs-recipe-1-aggrate">
  <!-- max rate -->
  <p class="mr">5</p>
  <!-- rated value-->
  <p class="arv">4.5</p>
  <!-- number of ratings -->
  <p class="rc">500</p>
</div>

15 Ingredients

recipe.html

<ul class="rjs-recipe-1-ingredient">
  <li>Basmati Rice - 2 cups</li>
  <li>Meat or Vegetables - 500 grams</li>
  <li>Aromatic Spices</li>
  <li>Yogurt - 1/2 cup</li>
  <li>Saffron - A pinch</li>
  <li>Rose Water - 1 tablespoon</li>
</ul>

16. Instructions

⚠️

Each step instance <div> mush have id for making deeplink / internal link. like line 4 and 18 in below.

recipe.html

<div class="rjs-recipe-1-instructions">
 
	<!-- steps instance 1-->
	<div class="step" id="step1">
 
		<p class="short">Prepare the Rice:</p>
 
		<img class="simg" src="https://i.imgur.com/9XdcrCN.jpeg" />
 
		<p class="long">
		Rinse 2 cups of basmati rice under cold water until.. <!-- shortened for brevity -->
		</p>
 
	</div>
 
 
	<!-- steps instance 2-->
	<div class="step" id="step2">
 
		<p class="short">Prepare the Meat or Vegetables:</p>
 
		<img class="simg" src="https://i.imgur.com/yisIi6d.jpeg" />
 
		<p class="long">
		Marinate 500 grams of meat... <!-- shortened for brevity -->
		</p>
 
	</div>
 
  <!-- add number of step instance as you need -->
 
</div><!-- INSTRUCTIONS OVER -->

17. Video

Use Youtube Embed Video

recipe.html

<iframe class="rjs-recipe-1-vframe" width="560" height="315"
src="https://www.youtube-nocookie.com/embed/E8GtcPT25Hs?si=lgkECFFRd86ypZoE"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay;"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Function and parameters

💡

By default input file is overwriiten with result so destination is optional

This is only for API method. We prefer CLI method for keeping it simpler (refer - Working with API & CLI).

func_params.js

const richResultType = 'recipe';
const filePath = 'recipe.html';
const destination = 'dist/recipe.html'; /* optional */
 
richie(richResultType, filePath, destination);

Example of a Instance

recipe.html

<body>
 
  <div id="rjs-recipe-1">
 
  	<!-- name of recipe -->
  	<p class="rjs-recipe-1-name">Biryani</p>
 
  	<!-- image thumbanails -->
  	<img class="rjs-recipe-1-img" src="https://i.imgur.com/ULHbPTa.jpeg" />
  	<img class="rjs-recipe-1-img" src="https://i.imgur.com/RstsU7N.jpeg" />
 
  	<!--author name -->
  	<p class="rjs-recipe-1-aname">Darsan</p>
 
  	<!-- published date -->
  	<p class="rjs-recipe-1-pdt">2023-01-12</p>
 
  	<!-- description -->
  	<p class="rjs-recipe-1-desc">
  	Biryani is a flavorful and aromatic.. <!-- shortened for brevity -->
  	</p>
 
  	<!-- ptm - means minutes-->
  	<!-- pth - means hours-->
  	<!-- pthm - hours and minutes (hours should be first ex: 2 Hours and 10 minutes)-->
  	<p class="rjs-recipe-1-ptm">25 minutes</p>
  	<!-- <p class="rjs-recipe-1-pth">1 Hours</p> -->
  	<!-- <p class="rjs-recipe-1-pthm">1 Hours and 25 minutes</p> -->
 
  	<!-- ctm - means minutes-->
  	<!-- cth - means hours-->
  	<!-- cthm - hours and minutes (hours should be first ex: 2 Hours and 10 minutes)-->
  	<p class="rjs-recipe-1-ctm">20 minutes</p>
  	<!-- <p class="rjs-recipe-1-cth">2 Hours</p>
  	<p class="rjs-recipe-1-cthm">1 Hours and 10 minutes</p> -->
 
 
  	<!-- serving counts (yield)-->
  	<p class="rjs-recipe-1-serves">4</p>
 
  	<!-- category -->
  	<p class="rjs-recipe-1-cat">Rich Dishes</p>
 
  	<!-- cuisine -->
  	<p class="rjs-recipe-1-csnt">Indian</p>
 
  	<!-- nutrition informations -->
  	<div class="rjs-recipe-1-nutrition">
  		<!-- calories -->
  		<p class="cal">300</p>
  	</div>
 
  	<!--  ingredients -->
  	<ul class="rjs-recipe-1-ingredient">
  		<li>Basmati Rice - 2 cups</li>
  		<li>Meat (chicken, lamb, or beef) or Vegetables - 500 grams</li>
  		<li> Aromatic Spices </li>
  		<li>Yogurt - 1/2 cup</li>
  		<li>Saffron - A pinch (soaked in 2 tablespoons of warm milk)</li>
  		<li>Rose Water - 1 tablespoon</li>
  	</ul>
 
  	<!-- instructions -->
  	<div class="rjs-recipe-1-instructions">
  		<!-- steps instance 1-->
  		<div class="step" id="step1">
 
  			<p class="short">Prepare the Rice:</p>
 
  			<img class="simg" src="https://i.imgur.com/9XdcrCN.jpeg" />
 
  			<p class="long">
  			Rinse 2 cups of basmati rice under cold water until.. <!-- shortened for brevity -->
  			</p>
 
  		</div>
 
 
  		<!-- steps instance 2-->
  		<div class="step" id="step2">
 
  			<p class="short">Prepare the Meat or Vegetables:</p>
 
  			<img class="simg" src="https://i.imgur.com/yisIi6d.jpeg" />
 
  			<p class="long">
  			Marinate 500 grams of meat... <!-- shortened for brevity -->
  			</p>
 
  		</div>
 
  	</div><!-- INSTRUCTIONS OVER -->
 
  	<!-- aggregate rating -->
  	<div class="rjs-recipe-1-aggrate">
  		<!-- max rate -->
  		<p class="mr">100</p>
  		<!-- rated value-->
  		<p class="arv">99</p>
  		<!-- number of ratings -->
  		<p class="rc">1200</p>
  	</div>
 
  	<!--embedded youtube video -->
  	<iframe class="rjs-recipe-1-vframe" width="560" height="315"
  	src="https://www.youtube-nocookie.com/embed/95BCU1n268w?si=I6Tdi-DXX3bVVuP3"
  	title="YouTube video player" frameborder="0"
  	allow="accelerometer; autoplay;"
  	allowfullscreen></iframe>
 
  	<!-- keywords -->
  	<ul class="rjs-recipe-1-kw">
  		<li>Biryani recipe</li>
  		<li>Authentic biryani</li>
  		<li>Homemade biryani</li>
  	</ul>
 
  </div>
</body>

Output of a Instance

recipe.html

<script type="application/ld+json">
[
  {
    "@context": "https://schema.org",
    "@type": "Recipe",
    "name": "Biryani",
    "url": "https://www.cresteem.com/pages/carousels/recipies#rjs-recipe-1",
    "image": [
      "https://i.imgur.com/ULHbPTa.jpeg",
      "https://i.imgur.com/RstsU7N.jpeg"
    ],
    "author": { "@type": "Person", "name": "Darsan" },
    "datePublished": "2023-01-12",
    "description": "Biryani is a flavorful and aromatic rice.....",
    "recipeCuisine": "Indian",
    "prepTime": "PT25M",
    "cookTime": "PT20M",
    "totalTime": "PT45M",
    "keywords": "Biryani recipe, Authentic biryani, Homemade biryani, Indian biryani .. ",
    "recipeYield": "4 servings",
    "recipeCategory": "Rich Dishes",
    "nutrition": {
      "@type": "NutritionInformation",
      "calories": "300 calories"
    },
    "aggregateRating": {
      "@type": "AggregateRating",
      "ratingValue": 99,
      "bestRating": 100,
      "ratingCount": 1200
    },
    "recipeIngredient": [
      "Basmati Rice - 2 cups",
      "Meat (chicken, lamb, or beef) or Vegetables - 500 grams",
      "Aromatic Spices",
      "Yogurt - 1/2 cup",
      "Saffron - A pinch (soaked in 2 tablespoons of warm milk)",
      "Rose Water - 1 tablespoon"
    ],
    "recipeInstructions": [
      {
        "@type": "HowToStep",
        "name": "Prepare the Rice:",
        "text": "Rinse 2 cups of basmati rice under cold water....",
        "url": "https://www.cresteem.com/pages/carousels/recipies#step1",
        "image": "https://i.imgur.com/9XdcrCN.jpeg"
      },
      {
        "@type": "HowToStep",
        "name": "Prepare the Meat or Vegetables:",
        "text": "Marinate 500 grams of meat...",
        "url": "https://www.cresteem.com/pages/carousels/recipies#step2",
        "image": "https://i.imgur.com/yisIi6d.jpeg"
      },
      <!-- reduced for brevity -->
    ],
    "video": {
      "@type": "VideoObject",
      "name": "SIMPLE CHICKEN BIRYANI FOR BEGINNERS | CHICKEN BIRYANI RECIPE FOR BACHELORS - YouTube",
      "description": "Simple Chicken Biryani for Beginners | Chicken Biryani Recipe for Bachelors | Simple Chicken Biryani for Bachelors | Chicken Biryani with Biryani Masala | Ch...",
      "thumbnailUrl": "https://i.ytimg.com/vi/95BCU1n268w/maxresdefault.jpg",
      "contentUrl": "https://www.youtube.com/watch?v=95BCU1n268w",
      "embedUrl": "https://www.youtube-nocookie.com/embed/95BCU1n268w?si=I6Tdi-DXX3bVVuP3",
      "uploadDate": "2020-05-15T22:30:00-07:00",
      "duration": "PT5M9S",
      "interactionStatistic": {
        "@type": "InteractionCounter",
        "interactionType": { "@type": "WatchAction" },
        "userInteractionCount": 34358614
      },
      "expires": "3020-05-16T11:00:00+05:30"
    }
  }
]
</script>

Let's see what's next!

Movie & Carousel Course & Carousel