Rich Snippets: Everything You Need to Know

This guide has been created to provide a quick and easy way of generating different types of rich snippets for your website, using a combination of Micro Data and Schema.org you can generate snippets like:

Generating rich snippets

I must point out that before you proceed with integrating any form of mark-up, you should be aware of the guidelines provided by Google, and Bing. Any attempt to mark-up content that is invisible to users, or content that is irrelevant/misleading just to generate the rich snippet may result in action being taken against your website.

On the move? Why not take this guide with you, just hit ‘download’ at the top of the page for a handy pdf guide!

I hope that you find this guide useful, and if you have any questions please fire away in the comments, or just say hi @dbseo – Dan Butler.

Quick Start

  1. INTRODUCTION
    1. What is Micro Data?
    2. What is Schema.org?
    3. Why use mark-up?
  2. INTEGRATING MICRO DATA & SCHEMA.ORG
    1. Using Review Data to Enhance Your Search Result Snippets
    2. Draw Attention to your Products with Richer Snippets
    3. Maximise the Impact of Editorial Reviews in Search
    4. Swoop a Grammy by Marking-up Movie Content
    5. Bring Your TV Listing Search Results to Life
    6. Show Business Credibility in Search Results
    7. Use Recipe Mark-up to Generate Appetising Rich Snippets
    8. Add Authenticity & Trust to Mobile App Listings
    9. Promote Software Applications in Search Results
    10. Tell Us About Yourself with Person Mark-up
    11. Sell Tickets for Multiple Events with a Single Search Listing
    12. Dramatically Increase Size of Search Results for Audio Coverage
    13. Generate Rich Media Listings with Video Mark-up
    14. Create Interactive Breadcrumb Trails for your Search Listings
  3. TOOLS & USEFUL RESOURCES
    1. Tools
    2. Plug-ins
    3. Useful Resources
  4. Comments

Introduction

What is Micro Data?

Micro Data (like RDFa and Microformats) is a form of semantic mark-up designed to describe elements on a web page e.g. review, person, event etc. This mark-up can be combined with typical HTML properties to define each item type through the use of associated attributes.

For example, ‘Person’ has the properties name, url and title – attributes can be applied to HTML tags to describe each property:

  • Itemscope – is an indicator that the content within this <div> is an item.
  • Itemtype – describes what the item is, in the above instance ‘Person’.
  • Itemprop – describes each property of the specific item.
Further Reading: About microDATA – Google Webmaster Help, HTML Microdata – W3C

What is Schema.org?

Schema.org is a universally supported vocabulary extension by Google, Microsoft and Yahoo! for mark-up languages such as Micro Data. It is designed to make the lives of webmasters easier, by offering one standardised mark-up understood by all the major search engines.

Currently, Schema.org is only fully compatible with Micro Data.

Further Reading: What is Schema.org – Schema.org, Schema.org FAQ – Google Webmaster Help

Why use mark-up?

Marking up content on your website can:

  • Lead to the generation of rich snippets in search engine results e.g.
  • Schema.org review mark-up rich snippet test

  • This has the potential to enhance CTR from the search results from anywhere between 10-25%.
  • Search engines and organisations are using this mark-up to develop new tools, for example Google Recipe Search, which may open up other marketing channels if not now, in the near future.
  • Provide greater information to search engines to improve their understanding of the content on your website.

Integrating Micro Data & Schema.org

1. Using Review Data to Enhance Your Search Result Snippets

1.1 Example live snippet

Schema.org review snippet

1.2 The core mark-up features at a glance:

Itemtype attributes utilised:

Itemtype: Description
http://www.schema.org/AggregateRating The average rating based on multiple ratings or reviews.
http://www.schema.org/Review A review of an item e.g. product or movie.
http://www.schema.org/Rating An individual rating given for an item.

Itemprop attributes utilised:

Itemprop: Description Property of
itemprop=”name The name of the item being marked up. All
itemprop=”description Describe the item being marked up. All
itemprop=”aggregateRating The overall rating, based on a collection of reviews or ratings of the item. CreativeWork
itemprop=”ratingValue The rating for the content. Rating
itemprop=”reviewCount The total number of reviews. AggregateRating
itemprop=”author The author of this content. HTML 5 rel=author tag can be utilised instead. CreativeWork
itemprop=”datePublished Date of first broadcast/publication. CreativeWork
itemprop=”reviewRating The rating given in this review. Rating
itemprop=”reviewBody The actual body of the review. CreativeWork
itemprop=”worstRating The lowest possible rating. Rating Rating
itemprop=”bestRating The highest possible rating. Rating

1.3 The mark-up

The following code examples form the bare-bone template mark-up for review data.

The first part of this example forms the aggregate rating, and could be utilised by itself to generate the rich snippet on the previous page:

The second piece of mark up should be utilised on each review, this also adds further validity to the aggregate rating defined above:

1.4 The test…

Filling in the blanks, the resulting snippet using the structured data testing tool should resemble something like this:

Further Reading: Review Schema.org Creator – Raven Tools, Rich Snippets: Reviews Video – Google Webmaster Help, Review & AggregateRating – Schema.org

2. Draw Attention to your Products with Richer Snippets

2.1 Example live snippet

Extending the capability of the review mark up for products can lead to this type of rich snippet:

Schema.org review mark-up rich snippet test

2.2 The core mark-up features at a glance:

Itemtype attributes utilised:

Itemtype: Description
http://www.schema.org/Product Describes a product on sale.
http://www.schema.org/Offer Describes a products offer details.
http://www.schema.org/AggregateRating The average rating based on multiple ratings or reviews.

Itemprop attributes utilised:

Itemprop: Description Property of
itemprop=”name The name of the item being marked up. All
itemprop=”description Describe the item being marked up. All
itemprop=”price The price stated for a product. Offer
itemprop=”aggregateRating The overall rating, based on a collection of reviews or ratings of the item. CreativeWork
itemprop=”ratingValue The rating for the content. Rating
itemprop=”reviewCount The total number of reviews. AggregateRating

2.3 The mark-up

Exploiting review mark-up for a product with offer details:

As an aggregate review rating has been given for this product, the individual corresponding user reviews will need to be marked up using the code identified in part two of point 1.3.

2.4 The test…

Filling in the blanks, the resulting snippet using the structured data testing tool should resemble something like this:

Schema.org product mark-up rich snippet test

2.5 Extending this mark-up

By altering the /Offer segment of the code to the below we can add a price range to the snippet:

Schema.org AggregateOffer rich snippet test

This can be further extended to include ‘In Stock’ within the rich snippet by including the following line also within the /Offer segment:

Further Reading: Product Schema.org Creator – Raven Tools, Rich Snippets: Products – Google Webmaster Help, Product & Offer – Schema.org

3. Maximise the Impact of Editorial Reviews in Search

3.1 Example live snippet

Individual reviews in an editorial format can also be marked up to generate an extension of the ratings snippet to include the author name and publication date:

Editorial review mark-up using Schema.org

3.2 The core mark-up features at a glance:

Itemtype attributes utilised:

Itemtype: Description
http://www.schema.org/Review A review of an item e.g. product or movie.
http://www.schema.org/Rating An individual rating given for an item.

Itemprop attributes utilised:

Itemprop: Description Property of
itemprop=”itemreviewed The name of the item being reviewed. Review
itemprop=”worstRating The worst possible rating. Rating
itemprop=”bestRating The highest possible rating. Rating
itemprop=”ratingValue The rating for the content. Rating
itemprop=”datePublished The publication date of the review. Review
itemprop=”author The name of the author. Review

3.3 The mark-up

The mark-up for an editorial review:

3.4 The test…

Filling in the blanks, the resulting SERP using the structured data testing tool should resemble something like this:

Schema.org editorial review mark up rich snippet test

3.5 Extending this mark-up

By altering this code slightly, combining properties from schema.org/Product we can add a price to the snippet as well:

This would create the following snippet:

Schema.org editorial product review mark-up

You can extend this even further to include a price range; just replace the schema.org/Offer section with:

Schema.org editorial multiple product review mark-up

Further Reading: Individual Reviews – Google Webmaster Help, Review – Schema.org

4. Swoop a Grammy by Marking-up Movie Content

4.1 Example live snippet

Schema.org review mark-up when combined with the schema.org/Movie itemtype can produce the following type of snippet:

Example Movie Rich Snippet

There is no direct impact to the text displayed alongside the review segment; however an additional line is inserted alongside the Meta description featuring the directors and actors starring in the film.

4.2 The core mark-up features at a glance:

Itemtype attributes utilised:

Itemtype: Description
http://www.schema.org/Movie Describes a film
http://www.schema.org/Person Describes a person (living, dead or fictional)
http://www.schema.org/AggregateRating The average rating based on multiple ratings or reviews.

Itemprop attributes utilised:

Itemprop: Description Property of
itemprop=”name The name of the item being marked up. All
itemprop=”description Describe the item being marked up. All
itemprop=”director The director of the movie, tv series or episode. Movie
itemprop=”url URL of the item. All
itemprop=”author The author of this content. CreativeWork
itemprop=”ratingValue The rating for the content. Rating
itemprop=”bestRating The best possible rating. Rating
itemprop=”ratingCount The number of ratings obtained. AggregateRating
itemprop=”actor A cast member of the movie. Movie

4.3 The mark-up

Exploiting review mark-up for a Movie:

4.4 The test…

Filling in the blanks, the resulting snippet using the structured data testing tool should resemble something like this:

Schema.org Movie mark-up rich snippet test

The structured data testing tool does not yet display the additional line of text with references to actors/directors, however if implemented correctly the displayed data extract should contain this information.

Further Reading: Movie Schema.org Creator – Raven Tools, Movie – Schema.org

5. Bring Your TV Listing Search Results to Life

5.1 Example live snippet

There is also specific mark up for a TV series/season/episode which can also be combined with the review mark-up to produce a similar snippet as ‘Movie’:

Example Schema.org TV Series, Season and Episode snippet

The result is the same as Schema.org/Movie with an additional line of text included referencing the director(s) and actor(s), however a further line has been inserted for episodes and episodes cast.

5.2 The core mark-up features at a glance:

Itemtype attributes utilised:

Itemtype: Description
http://www.schema.org/TVSeries Describes a television series.
http://www.schema.org/TVSeason Describes a single TV season.
http://www.schema.org/TVEpisode The episode of a TV series or season.
http://www.schema.org/Person Describes a person (living, dead or fictional).
http://www.schema.org/AggregateRating The average rating based on multiple ratings or reviews.

Itemprop attributes utilised:

Itemprop: Description Property of
itemprop=”name The name of the item being marked up. All
itemprop=”description Describe the item being marked up. All
itemprop=”director The director of the movie, tv series or episode. TVSeries, TVSeason, TVEpisode
itemprop=”author The author of this content. CreativeWork
itemprop=”actor A cast member of the TV series, season or episode. TVSeries, TVSeason, TVEpisode
itemprop=”numberofEpisodes The number of episodes in the series or season. TVSeries, TVSeason
itemprop=”datePublished Date of first broadcast/publication. CreativeWork
itemprop=”episode An episode of a TV series of season. TVSeries, TVSeason
itemprop=”episodeNumber The episode number. TVEpisode
itemprop=”ratingValue The best possible rating. Rating
itemprop=”ratingCount The number of ratings obtained. AggregateRating

5.3 The mark-up

Utilising review mark-up and combining TV series, season and episode schema:

5.4 The test…

Filling in the blanks, the resulting snippet using the structured data testing tool should resemble something like this:

Schema.org TV Series, Season and Episode rich snippet test

The structured data testing tool does not yet display the additional line of text with references to episodes/episodes cast, however if implemented correctly the displayed data extract should contain this information.

Further Reading: TVSeries, TVSeason & TVEpisode – Schema.org

6. Show Business Credibility in Search Results

6.1 Example snippet

Local Business Schema.org alone does not yet result in a specific type of snippet, although can be combined with standard review mark-up to produce the below snippet:

Example Schema.org Local Business snippet

Local Business schema.org mark-up can also act as authentication for a business address if it matches the Google Business Listing, in doing so improve local SEO.

6.2 The core mark-up features at a glance:

Itemtype attributes utilised:

Itemtype: Description
http://www.schema.org/LocalBusiness Describes a physical business or branch of an organization.
http://www.schema.org/PostalAddress The location of the event or organization.
http://www.schema.org/AggregateRating The average rating based on multiple ratings or reviews.

Itemprop attributes utilised:

Itemprop: Description Property of
itemprop=”name The name of the item being marked up. All
itemprop=”streetAddress The street address. PostalAddress
itemprop=”addressLocality The locality. PostalAddress
itemprop=”addressRegion The region. PostalAddress
itemprop=”postalCode The postal code. PostalAddress
itemprop=”telephone The telephone number. ContactPoint
itemprop=”ratingValue The rating for the content. Rating
itemprop=”bestRating The best possible rating. Rating
itemprop=”reviewCount The number of reviews obtained. AggregateRating

6.3 The mark-up

Utilising review mark-up and combining Local Business schema:

Further Reading: LocalBusiness & PostalAddress – Schema.org, Business Schema Tool – microData generator

7. Use Recipe Mark-up to Generate Appetising Rich Snippets

7.1 Example live snippet

Another more developed Schema.org type is Recipe, which allows for the development of rich snippets like the below:

Example Schema.org Recipe snippet

There are a lot more elements however taken from the Recipe schema which determine visibility in Google’s recipe search – http://www.google.com/landing/recipes/

7.2 The core mark-up features at a glance:

Itemtype attributes utilised:

Itemtype: Description
http://www.schema.org/Recipe Describes a recipe.
http://www.schema.org/NutritionInformation Describes the nutrition information of a recipe.
http://www.schema.org/AggregateRating The average rating based on multiple ratings or reviews.

Itemprop attributes utilised:

Itemprop: Description Property of
itemprop=”name The name of the item being marked up. All
itemprop=”image URL of an image of the item. All
itemprop=”author The author of this content. CreativeWork
itemprop=”description A short description of the item. All
itemprop=”ingredients An ingredient used in the recipe. Recipe
itemprop=”recipeCategory The category of the recipe e.g. starter. Recipe
itemprop=”recipeCuisine The cuisine of the recipe e.g. Chinese Recipe
itemprop=”recipeYield The quantity produced by the recipe. Recipe
itemprop=”cookTime The time it takes to cook the dish in ISO duration format. Recipe
itemprop=”prepTime The length of time it takes to prepare the recipe. Recipe
itemprop=”calories The number of calories. NutritionInfomation
itemprop=”fatContent The number of grams of fat. NutritionInfomation
itemprop=”recipeInstructions The steps to make the dish. Recipe
itemprop=”ratingValue The rating for the content. Rating
itemprop=”bestRating The best possible rating. Rating
itemprop=”reviewCount The number of reviews obtained. AggregateRating

7.3 The mark-up

Utilising review mark-up and combining the recipe schema:

7.4 The test…

Filling in the blanks, the resulting snippet using the structured data testing tool should resemble something like this:

Schema.org recipe mark-up rich snippet test

Further Reading: Recipe & NutritionInformation – Schema.org, Recipe Schema Tool – microDATA generator, Rich Snippet Recipes – Google Webmaster Help

8. Add Authenticity & Trust to Mobile App Listings

8.1 Example snippet

Example Schema.org mobile application snippet

8.2 The core mark-up features at a glance:

Itemtype attributes utilised:

Itemtype: Description
http://www.schema.org/MobileApplication Describes a Mobile application.
http://www.schema.org/Organization Describes an organization.

Itemprop attributes utilised:

Itemprop: Description Property of
itemprop=”name The name of the item being marked up. All
itemprop=”image URL of an image of the item. All
itemprop=”author The author of this content. CreativeWork
itemprop=”description A short description of the item. All
itemprop=”url The URL for the item. All
itemprop=”datePublished Date of first broadcast/publication. CreativeWork
itemprop=”operatingSystems The operating systems supported. SoftwareApplication
itemprop=”fileSize Size of the application. SoftwareApplication
itemprop=”interactionCount A count of a specific user interaction with this item. CreativeWork
itemprop=”contentRating Official rating for a piece of content. CreativeWork
itemprop=”ratingValue The rating for the content. Rating
itemprop=”bestRating The best possible rating. Rating
itemprop=”ratingCount The number of ratings obtained. AggregateRating

8.3 The mark-up

Applying Mobile Application mark-up:

8.4 The test…

Filling in the blanks, the resulting snippet using the structured data testing tool should resemble something like this:

Schema.org mobile application mark-up rich snippet test

8.5 Extending this mark-up

By combining some properties from schema.org/Offers we can add a price to the snippet. Just add the below mark up:

Schema.org mobile application with Offer mark-up

Further Reading: MobileApplication – Schema.org, Rich Snippets for Apps: a New Way to be Seen in SERPs – SEWatch generator, Rich Snippets: Software Applications – Google Webmaster Help

9. Promote Software Applications in Search Results

9.1 Example live snippet

Schema.org software application rich snippet example

Software Application mark-up is very similar to Mobile; however there are some additional features that can be included to develop this snippet.

9.2 The core mark-up features at a glance:

Itemtype attributes utilised:

Itemtype: Description
http://www.schema.org/SoftwareApplication Describes a Mobile application.
http://www.schema.org/Organization Describes an organization.
http://www.schema.org/AggregateRating The average rating based on multiple ratings or reviews.
http://www.schema.org/Offer Describes a products offer details.

Itemprop attributes utilised:

Itemprop: Description Property of
itemprop=”name The name of the item being marked up. All
itemprop=”image URL of an image of the item. All
itemprop=”description Describe the item being marked up. All
itemprop=”author The author of this content. CreativeWork
itemprop=”url The URL for the item. CreativeWork
itemprop=”datePublished Date of first broadcast/publication. CreativeWork
itemprop=”operatingSystems The operating systems supported. SoftwareApplication
itemprop=”fileSize Size of the application. SoftwareApplication
itemprop=”interactionCount A count of a specific user interaction with this item. CreativeWork
itemprop=”contentRating Official rating for a piece of content. CreativeWork
itemprop=”ratingValue The rating for the content. Rating
itemprop=”bestRating The highest possible rating. Rating
itemprop=”ratingCount The number of ratings obtained. AggregateRating
itemprop=”price The price of the item. Offer

9.3 The mark-up

Utilising Software Application mark-up:

9.4 The test…

Filling in the blanks, the resulting snippet using the structured data testing tool should resemble something like this:

Schema.org software application mark-up rich snippet test

Further Reading: SoftwareApplication – Schema.org, Rich Snippets: Software applications – Google Webmaster Help

10. Tell Us About Yourself with Person Mark-up

10.1 Example snippet

Schema.org Person rich snippet example

10.2 The core mark-up features at a glance:

Itemtype attributes utilised:

Itemtype: Description
http://www.schema.org/Person Describes a person (living, dead or fictional)
http://www.schema.org/PostalAddress The location of the event or organization.

Itemprop attributes utilised:

Itemprop: Description Property of
itemprop=”name The name of the item being marked up. All
itemprop=”image URL of an image of the person. All
itemprop=”jobTitle The job title of the person. Person
itemprop=”address Physical address of the person. PostalAddress
itemprop=”addressLocality The address locality of the person. PostalAddress
itemprop=”addressRegion The region in which the person resides PostalAddress
itemprop=”postalCode The postal code. PostalAddress
itemprop=”telephone The person’s telephone number. Person
itemprop=”email The person’s email address. Person

10.3 The mark-up

Utilising Person mark-up:

Further Reading: Person – Schema.org, Rich Snippets: People – Google Webmaster Help

11. Sell Tickets for Multiple Events with a Single Search Listing

11.1 Example snippet

Schema.org Event rich snippet example

Live examples of Schema.org/Event are very scarce at the moment, with the majority of sites opting for Microdata, Microformats or RDFa equivalent mark-up.

Up to 3 entries of Event mark-up can be seen within the rich snippet.

11.2 The core mark-up features at a glance:

Itemtype attributes utilised:

Itemtype: Description
http://www.schema.org/Event Describes an upcoming event.

Itemprop attributes utilised:

Itemprop: Description Property of
itemprop=”name The name of the item being marked up. All
itemprop=”url URL of the item. All
itemprop=”location The location of the event. Event
itemprop=”startDate The start date and time of the event. Event

11.3 The mark-up

Utilising Event mark-up:

Further Reading: Event – Schema.org, Rich Snippets: Events – Google Webmaster Help

12. Dramatically Increase Size of Search Results for Audio Coverage

12.1 Example snippet

Schema.org Music rich snippet example

12.2 The core mark-up features at a glance:

Itemtype: Description
http://www.schema.org/MusicPlaylist A collection of music tracks in a playlist form.
http://www.schema.org/MusicRecording A single song or track.

Itemprop attributes utilised:

Itemprop: Description Property of
itemprop=”name The name of the item being marked up. All
itemprop=”numTracks Number of tracks in the album/playlist. MusicPlaylist
itemprop=”track A single track. MusicPlaylist
itemprop=”byArtist The artist that performed this album or track. MusicRecording
itemprop=”url The URL of the item. All
itemprop=”duration The length of the track or album.td>

MusicRecording

12.3 The mark-up

Up to four tracks can be displayed within the rich snippet:

12.4 The test:

Please note, due to the 1500 character length within the testing tool, only two tracks can be displayed:

Schema.org Music mark-up rich snippet test

12.5 Extending this mark-up

This mark-up can be extended further by combining the album name that each track belongs to, which in turn would also be displayed within the rich snippet. For each track listing just add the following line of code:

Schema.org extending music mark-up

Further Reading: MusicPlaylist & MusicRecording – Schema.org, Rich Snippets: Music – Google Webmaster Help

13. Generate Rich Media Listings with Video Mark-up

13.1 Example live rich media snippet

Example rich media snippet

13.2 Considerations

Please note that the utilisation of Micro Data and Schema.org is not enough to convert video content into the above rich media listing in search results.

This mark-up should also be combined with:

  • Video XML sitemaps
  • Unique text content including video title, description, thumbnail – different to that seen elsewhere on the web (including YouTube).

13.2 The core mark-up features at a glance:

Itemtype attributes utilised:

Itemtype: Description
http://www.schema.org/VideoObject A collection of music tracks in a playlist form.

Itemprop attributes utilised:

Itemprop: Description Property of
itemprop=”name The name of the item being marked up. All
itemprop=”duration Number of tracks in the album/playlist MediaObject
itemprop=”thumbnail A thumbnail image for a video or image. ImageObject
itemprop=”description Description of the item. All

13.3 The mark-up

Further Reading: VideoObject – Schema.org, Schema.org markup for videos – Google Webmaster Help, Getting Video Results in Google – Distilled

14.1 Example live snippet

Example breadcrumb trail snippet

Currently the Schema.org mark-up does not yet lead to the above rich URL format being presented unlike other formats such as Micro Data and RDFa, although hopefully will in the near future.

14.2 Schema.org Version

14.3 Standalone Micro Data

Further Reading: Rich snippets – Breadcrumbs – Google Webmaster Help

Tools & Resources

Tools

Plug-ins

WordPress

Magento

Joomla

Drupal

Useful Resources


Stay Updated: Sign Up for Webinar & New Blog Alerts