Richie.js 2.0.2 released 🚀 Explore
DocumentationSupported Rich ResultsMovie & Carousel

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 to know more about movie rich result.

What are necessary data for movie rich result?

1. Name (rjs-movie-[number]-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 (id="rjs-movie-[number]")

Richie.js uses a reserved id value to define a movie URL. This ensures deep linking functionality.

ID value template: rjs-movie-[number]
movie.html
<div id="rjs-movie-1">...</div>

3. Thumbnail (rjs-movie-[number]-img)

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 (rjs-movie-[number]-pdt)

movie.html
<!-- Release date in YYYY-MM-DD format -->
<p class="rjs-movie-1-pdt">2016-02-05</p>

5. Director (rjs-movie-[number]-dir)

A movie can have multiple directors.
movie.html
<!-- Directors -->
<p class="rjs-movie-1-dir">Zack Snyder</p>
<p class="rjs-movie-1-dir">Another Director</p>

6. Review (rjs-movie-[number]-reviews)

movie.html
<!-- User reviews -->
<div class="rjs-movie-1-reviews">
  <!-- User review instance 1 -->
  <div class="urate">
    <p class="raterP">Darsan</p>
    <!-- Rater name | P(person) and O(organization) suffixes are reserved -->
 
    <p class="mr">100</p>
    <!-- Maximum rating range -->
 
    <p class="rv">98</p>
    <!-- Rated value -->
 
    <p class="rpOn">IMDB</p>
    <!-- Rating published on -->
  </div>
 
  <!-- User review instance 2 -->
  <div class="urate">
    <p class="raterO">NotIndiaGlitz</p>
    <!-- Rater name | P(person) and O(organization) suffixes are reserved -->
 
    <p class="mr">5</p>
    <!-- Maximum rating range -->
 
    <p class="rv">4.5</p>
    <!-- Rated value -->
 
    <p class="rpOn">RottenTomato</p>
    <!-- Rating published on -->
  </div>
</div>

7. Aggregated Rating (rjs-movie-[number]-aggrate)

movie.html
<!-- Aggregate review -->
<div class="rjs-movie-1-aggrate">
  <!-- Aggregated rating value -->
  <p class="arv">100</p>
 
  <!-- Maximum rating range -->
  <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!

BreadcrumbRecipe & Carousel