Movie & Carousel (Movie, ItemList)

What is movie rich result?

Enhance your movie lists with structured data, allowing users to discover movies on Google Search in innovative ways. You can include information such as the movie title, director, and an image.

Movie carousel feature is available exclusively on mobile devices.

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

What are necessary data for movie rich result?

1. Name

movie.html

<div id="rjs-movie-1">
  <!-- name of the movie -->
  <p class="rjs-movie-1-name">Dawn of Justice</p>
</div>

2. URL

Richie JS's reserved value on id attribute is mandatory for deeplink or movie URL

ID value template is rjs-movie-[number]

movie.html

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

3. Thumbnail

movie.html

<!--images -->
<img class="rjs-movie-1-img" src="https://i.imsur.com/GdoMshp.jpeg" alt="" />
<img class="rjs-movie-1-img" src="https://i.imsur.com/yXDOO5w.png" alt="" />

4. Release date

movie.html

<!-- date released YYYY-MM-DD -->
<p class="rjs-movie-1-pdt">2016-02-05</p>

5. Director

More than one director is possible to a entity

movie.html

<!-- directors -->
<p class="rjs-movie-1-dir">Zack Synder</p>
<p class="rjs-movie-1-dir">Another director</p>

6. Review

movie.html

<!-- user reviews -->
<div class="rjs-movie-1-reviews">
 
  <!-- user rate instance 1 -->
  <div class="urate">
 
    <p class="raterP">Darsan</p>
    <!-- rater name|  P(person) and O(organisation) - suffix is reserved-->
 
    <p class="mr">100</p><!-- max rate range in system -->
 
    <p class="rv">98</p><!-- ratedValue -->
 
    <p class="rpOn">IMDB</p><!-- rating published on -->
  
  </div>
 
  <!-- user rate instance 2 -->
  <div class="urate">
 
    <p class="raterO">NotIndiaGlitz</p>
    <!-- rater name|  P(person) and O(organisation) - suffix is reserved-->
 
    <p class="mr">5</p><!-- max rate range in system -->
 
    <p class="rv">4.5</p><!-- ratedValue -->
 
    <p class="rpOn">RottenTomato</p><!-- rating published on -->
  
  </div>
 
</div><!-- user reviews ended -->

7. Aggregated rating

movie.html

<!-- aggregate review -->
<div class="rjs-movie-1-aggrate">
  <!-- aggregated rate value-->
  <p class="arv">100</p>
 
  <!-- max range of rating -->
  <p class="mr">100</p>
 
  <!-- number of user ratings  -->
  <p class="rc">1000</p>
</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 = 'movie';
const filePath = 'movie.html';
const destination = 'dist/movie.html'; /* optional */
 
richie(richResultType, filePath, destination);

Example of a Instance

movie.html

	<body>
	<!-- id is mandatory for anchor link -->
	<div id="rjs-movie-1">
 
		<!-- name of the movie -->
		<p class="rjs-movie-1-name">Dawn of Justice</p>
 
		<!--images -->
		<img class="rjs-movie-1-img" src="https://i.imgur.com/GdoMshp.jpeg" alt="" />
 
		<!-- date released YYYY-MM-DD -->
		<p class="rjs-movie-1-pdt">2016-02-05</p>
 
		<!-- directors -->
		<p class="rjs-movie-1-dir">Zack Synder</p>
 
		<p class="rjs-movie-1-dir">Another director</p>
 
		<!-- aggregate review -->
		<div class="rjs-movie-1-aggrate">
			<!-- aggregated rate value-->
			<p class="arv">100</p>
 
			<!-- max range of rating -->
			<p class="mr">100</p>
 
			<!-- number of user ratings  -->
			<p class="rc">1000</p>
		</div>
 
		<!-- user reviews -->
		<div class="rjs-movie-1-reviews">
 
			<!-- user rate instance -->
			<div class="urate">
 
				<p class="raterP">Darsan</p><!-- rater name|  P(person) and O(organisation) - suffix is reserved-->
 
				<p class="mr">100</p><!-- max rate range in system -->
 
				<p class="rv">98</p><!-- ratedValue -->
 
				<p class="rpOn">IMDB</p><!-- rating published on -->
			</div>
 
			<div class="urate">
 
				<p class="raterO">NotIndiaGlitz</p>
 
				<p class="mr">5</p><!-- max rate range in system -->
 
				<p class="rv">4.5</p><!-- ratedValue -->
 
				<p class="rpOn">RottenTomato</p><!-- rating published on -->
			</div>
 
		</div><!-- user reviews ended -->
 
	</div>
 
	</body>

Output of a Instance

movie.html

<script type="application/ld+json">
	[
		{
		"@context": "https://schema.org",
		"@type": "Movie",
		"name": "Dawn of Justice",
		"url": "https://www.cresteem.com/pages/carousels/movies#rjs-movie-1",
		"image": [
			"https://i.imgur.com/GdoMshp.jpeg",
			"https://i.imgur.com/yXDOO5w.png"
		],
		"dateCreated": "2016-02-05",
		"director": ["Zack Synder", "Another director"],
		"review": [
			{
			"@type": "Review",
			"reviewRating": {
				"@type": "Rating",
				"ratingValue": 98,
				"bestRating": 100
			},
			"author": { "@type": "Person", "name": "Darsan" },
			"publisher": { "@type": "Organization", "name": "IMDB" }
			},
			{
			"@type": "Review",
			"reviewRating": {
				"@type": "Rating",
				"ratingValue": 4.5,
				"bestRating": 5
			},
			"author": { "@type": "Organization", "name": "NotIndiaGlitz" },
			"publisher": { "@type": "Organization", "name": "RottenTomato" }
			}
		],
		"aggregateRating": {
			"@type": "AggregateRating",
			"ratingValue": 100,
			"bestRating": 100,
			"ratingCount": 1000
			}
		}
	]
	</script>

Let's see what's next!

Breadcrumb Recipe & Carousel