Restaurant & Carousel (Restaurant, ItemList)

What is restaurant rich result?

When users search for restaurants on Google Search or Maps, results may feature a prominent knowledge panel with details about the restaurant. For queries like 'best NYC restaurants,' a carousel of related businesses may appear. Using Local Business structured data, you can inform Google about your restaurant's hours, departments, and reviews. To enable reservations or orders directly from Search results, use the Maps Booking API for bookings, payments, and other actions.

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

What are necessary data for restaurant rich result?

1. Name

restaurant.html

<div id="rjs-restaurant-1">
    <p class="rjs-restaurant-1-name">Hookie Dookie</p>
</div>

2. Thumbnail images

restaurant.html

<img class="rjs-restaurant-1-img" src="https://i.imgur.com/3aIBedv.jpeg" alt="picture of reception">
 
<img class="rjs-restaurant-1-img" src="https://i.imgur.com/RbIZogg.jpeg" alt="another 1">

3. Location

restaurant.html

<div class="rjs-restaurant-1-loc">
    <!-- loc-st for street -->
    <!-- any number of stl(street line) can be created but 2 is good -->
    <p class="stl">008, Papanna street</p>
    <p class="stl">St Mark's Rd</p>
 
    <!-- city -->
    <p class="ct">Bengaluru</p>
 
    <!-- state -->
    <p class="st">Karnataka</p>
 
    <!-- pincode -->
    <p class="pc">560001</p>
 
    <!-- country -->
    <p class="ctry">India</p>
</div>

4. Reviews

restaurant.html

<section class="rjs-restaurant-1-reviews">
 
    <div class="urate">
        <!-- rating value -->
        <p class="rv">4.5</p>
 
        <!-- max rate -->
        <p class="mr">5</p>
 
        <!-- authorO is Organisation class - pub class prop not req-->
        <!-- authorP is Person class - pub class prop req-->
        <!-- <p class="review-authorO">Foogle</p> -->
        <p class="raterP">Dean</p>
 
        <p class="rpOn">Amazon</p>
    </div>
 
    <div class="urate"> 
        <!-- rating value -->
        <p class="rv">4.5</p>
 
        <!-- max rate -->
        <p class="mr">5</p>
 
        <!-- authorO is Organisation class - pub class prop not req-->
        <!-- authorP is Person class - pub class prop req-->
        <!-- <p class="review-authorO">Foogle</p> -->
        <p class="raterP">Someone</p>
 
        <p class="rpOn">Noogle</p>
    </div>
 
</section>

5. Telephone & Reservation availability

restaurant.html

<!-- data-reserve="true" for reservation accepted -->
<p class="rjs-restaurant-1-tel" data-reserve="true">+91-84259372x3</p>

6. Cuisine

restaurant.html

<!-- It can be more than 1-->
<p class="rjs-restaurant-1-csnt">Asian</p>
<p class="rjs-restaurant-1-csnt">Mexican</p>

7. Price range

restaurant.html

<p class="rjs-restaurant-1-cost">INR 200 - INR 500</p>

8. Work Hours

restaurant.html

<!-- opening hour specification -->
<section class="rjs-restaurant-1-workhours">
    <!-- wdr for working day range -->
 
    <!-- wdr-HR HR means 24 hour format spec -->
    <!-- wdr-hr hr means 12 hour format spec -->
    
    <!-- sepeartor should be (-) hyphen in range -->
    <p class="wdr">Sunday - Thursday <span class="HR">(10:00 - 21:00)</span></p>
    <!-- OR -->
    <p class="wdr">Sunday - Thursday <span class="hr">(10:00AM - 09:00PM)</span></p>
 
    <!-- wd for single working day-->
    
    <!-- wd-HR HR means 24 hour format spec-->
    <!-- wd-hr hr means 12 hour format spec -->
    
    <p class="wd">Saturday <span class="HR">(13:00 - 18:00)</span></p>
    
    <p class="wd">Friday <span class="hr">(10:00AM - 06:00PM)</span></p>
 
</section>

9. Menu Link

restaurant.html

<a class="rjs-restaurant-1-menu" href="https://www.restaurant.com/menu">Menu</a>

10. Aggregated rating

restaurant.html

<div class="rjs-restaurant-1-aggrate">
    <!-- aggregate rate that got -->
    <p class="arv">100</p>
 
    <!-- max possibly rate -->
    <p class="mr">100</p>
 
    <!-- total user rate count -->
    <p class="rc">1000</p>
</div>

11. URL

⚠️

id is mandatory to make deeplink. Even though it is meant for Carousel.

restaurant.html

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

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 = 'restaurant';
const filePath = 'restaurant.html';
const destination = 'dist/restaurant.html'; /* optional */
 
richie(richResultType, filePath, destination);

Example of a Instance

restaurant.html

<body>
    <div id="rjs-restaurant-1">
        <!-- name -->
        <p class="rjs-restaurant-1-name">Hookie Dookie</p>
 
        <!-- image=[] -->
        <div>
            <img class="rjs-restaurant-1-img" src="https://i.imgur.com/3aIBedv.jpeg" alt="picture of reception">
            <img class="rjs-restaurant-1-img" src="https://i.imgur.com/RbIZogg.jpeg" alt="another 1">
            <img class="rjs-restaurant-1-img" src="https://i.imgur.com/UL6OJWN.jpeg" alt="another 1">
        </div>
 
        <!-- address -->
        <!-- geo will be generated from address -->
        <div class="rjs-restaurant-1-loc">
            <!-- loc-st for street -->
            <!-- any number of loc-st can be created but 2 is good -->
            <p class="stl">008, Papanna street</p>
            <p class="stl">St Mark's Rd</p>
 
            <!-- city -->
            <p class="ct">Bengaluru</p>
 
            <!-- state -->
            <p class="st">Karnataka</p>
 
            <!-- pincode -->
            <p class="pc">560001</p>
 
            <!-- country -->
            <p class="ctry">India</p>
        </div>
 
        <!-- review -->
        <section class="rjs-restaurant-1-reviews">
 
            <div class="urate">
                <!-- rating value -->
                <p class="rv">4.5</p>
 
                <!-- max rate -->
                <p class="mr">5</p>
 
                <!-- authorO is Organisation class - pub class prop not req-->
                <!-- authorP is Person class - pub class prop req-->
                <!-- <p class="review-authorO">Foogle</p> -->
                <p class="raterP">Dean</p>
 
                <p class="rpOn">Amazon</p>
            </div>
 
            <div class="urate">
                <!-- rating value -->
                <p class="rv">4.5</p>
 
                <!-- max rate -->
                <p class="mr">5</p>
 
                <!-- authorO is Organisation class - pub class prop not req-->
                <!-- authorP is Person class - pub class prop req-->
                <!-- <p class="review-authorO">Foogle</p> -->
                <p class="raterP">Someone</p>
 
                <p class="rpOn">Noogle</p>
            </div>
 
        </section>
 
        <!-- telephone -->
        <!-- data-reservation="true" for reservation accepted (Boolean)-->
        <p class="rjs-restaurant-1-tel" data-reserve="true">+91-84259372x3</p>
 
        <!-- serv cuisine - can be more than 1-->
        <p class="rjs-restaurant-1-csnt">Asian</p>
        <p class="rjs-restaurant-1-csnt">Mexican</p>
 
        <!-- price range -->
        <p class="rjs-restaurant-1-cost">INR 200 - INR 500</p>
 
        <!-- opening hour specification -->
        <section class="rjs-restaurant-1-workhours">
            <!-- wdr for working day range -->
            <!-- wdr-HR  capital HR means 24 hour format specification -->
            <!-- wdr-hr capital hr means 12 hour format specification -->
            <!-- sepeartor should be - -->
            <p class="wdr">Sunday - Thursday <span class="HR">(10:00 - 21:00)</span></p>
            <!-- <p class="wdr">Sunday - Thursday <span class="wdr-hr">(10:00AM - 09:00PM)</span></p> -->
 
            <!-- wd for single working day-->
            <!-- wd-HR  capital HR means 24 hour format specification -->
            <!-- wd-hr capital hr means 12 hour format specification -->
            <p class="wd">Saturday <span class="HR">(13:00 - 18:00)</span></p>
            <!-- <p class="wd">Saturday <span class="hr">(01:00PM - 06:00PM)</span></p> -->
 
            <p class="wd">Friday <span class="hr">(10:00AM - 06:00PM)</span></p>
 
        </section>
 
        <!-- menu optional menu url-->
        <a class="rjs-restaurant-1-menu" href="https://www.restaurant.com/menu">
            <p>Menu</p>
        </a>
 
        <!-- aggregate review -->
        <div class="rjs-restaurant-1-aggrate">
            <!-- aggregate rate that got -->
            <p class="arv">100</p>
            <!-- max possibly rate -->
            <p class="mr">100</p>
            <!-- total user rate count -->
            <p class="rc">1000</p>
        </div>
 
        <iframe class="rjs-restaurant-1-map"
            src="https://www.google.com/maps/embed?<!-- reduced for brevity -->"
            width="400" height="300"></iframe>
 
        <p class="rjs-restaurant-1-kw">
            <span>#Tag1</span>
            <span>#Tag2</span>
            <!-- skipped for brevity -->
        </p>
 
        <p class="rjs-restaurant-1-areaserves">
            <span>Chennai</span>
            <!-- skipped for brevity -->
        </p>
    </div>
</body>

Output of a Instance

restaurant.html

<script type="application/ld+json">
[
    {
      "@context": "https://schema.org",
      "@type": "Restaurant",
      "name": "Hookie Dookie",
      "address": {
        "@type": "PostalAddress",
        "streetAddress": "008, Papanna street, St Mark's Rd",
        "addressLocality": "Bengaluru",
        "addressRegion": "Karnataka",
        "postalCode": 560001,
        "addressCountry": "IN"
      },
      "image": [
        "https://i.imgur.com/3aIBedv.jpeg",
        <!-- removed for brevity -->
      ],
      "review": [
        {
          "@type": "Review",
          "reviewRating": {
            "@type": "Rating",
            "ratingValue": 4.5,
            "bestRating": 5
          },
          "author": { "@type": "Person", "name": "Dean" },
          "publisher": { "@type": "Organization", "name": "Amazon" }
        },
        {
          "@type": "Review",
          "reviewRating": {
            "@type": "Rating",
            "ratingValue": 4.5,
            "bestRating": 5
          },
          "author": { "@type": "Person", "name": "Someone" },
          "publisher": { "@type": "Organization", "name": "Noogle" }
        }
      ],
      "geo": {
        "@type": "GeoCoordinates",
        "latitude": 12.971167914890476,
        "longitude": 77.5978368737318
      },
      "url": "https://www.cresteem.com/pages/carousels/restaurants#rjs-restaurant-1",
      "telephone": "+91-84259372x3",
      "priceRange": "INR 200 - INR 500",
      "openingHoursSpecification": [
        {
          "@type": "OpeningHoursSpecification",
          "dayOfWeek": [
            "Sunday",
            "Monday",
            "Tuesday",
            "Wednesday",
            "Thursday"
          ],
          "opens": "10:00",
          "closes": "21:00"
        },
        {
          "@type": "OpeningHoursSpecification",
          "dayOfWeek": ["Saturday"],
          "opens": "13:00",
          "closes": "18:00"
        },
        {
          "@type": "OpeningHoursSpecification",
          "dayOfWeek": ["Friday"],
          "opens": "10:00",
          "closes": "18:00"
        }
      ],
      "acceptsReservations": true,
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": 100,
        "bestRating": 100,
        "ratingCount": 1000
      },
      "servesCuisine": ["Asian", "Mexican"],
      "areaServed": ["Chennai", "Osur", "Hyderabad"],
      "menu": "https://www.restaurant.com/menu",
      "keywords": "#Tag1, #Tag2, #Tag3, #Tag4"
    }
]
</script>

Let's see what's next!

Course & Carousel Event