Everything you need to know to generate rich snippets
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:
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
- INTRODUCTION TO MICRO DATA & SCHEMA.ORG
- INTEGRATING MICRO DATA & SCHEMA.ORG
- Using Review Data to Enhance Your Search Result Snippets
- Draw Attention to your Products with Richer Snippets
- Maximise the Impact of Editorial Reviews in Search
- Swoop a Grammy by Marking-up Movie Content
- Bring Your TV Listing Search Results to Life
- Show Business Credibility in Search Results
- Use Recipe Mark-up to Generate Appetising Rich Snippets
- Add Authenticity & Trust to Mobile App Listings
- Promote Software Applications in Search Results
- Tell Us About Yourself with Person Mark-up
- Sell Tickets for Multiple Events with a Single Search Listing
- Dramatically Increase Size of Search Results for Audio Coverage
- Generate Rich Media Listings with Video Mark-up
- Create Interactive Breadcrumb Trails for your Search Listings
- TOOLS & USEFUL RESOURCES
- Comments
Introduction to Micro Data & Schema.org
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:
<div itemscope itemtype="http://data-vocabulary.org/Person"> Name: <span itemprop="name">Daniel Butler</span> Website: <a href="http://www.seogadget.com" itemprop="url">www.seogadget.com</a> Title: <span itemprop="title">Senior SEO Consultant</span> </div>
- 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.
- 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
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:
<div itemscope itemtype="http://schema.org/Product"> <span itemprop="name">[The name of the product]</span> <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> <span itemprop="ratingValue">[rating]</span> stars – based on <span itemprop="reviewCount">[number of reviews]</span> reviews <div> </div>
The second piece of mark up should be utilised on each review, this also adds further validity to the aggregate rating defined above:
<div itemprop="review" itemscope itemtype="http://schema.org/Review"> <span itemprop="name">[Review title/summary]</span> - by <span itemprop="author">[name of reviewer]</span>, <meta itemprop="datePublished" content="[date in ISO format e.g. 2012-04-15]">April 15th, 2012 <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"> <meta itemprop="worstRating" content="[lowest possible rating]"> <span itemprop="ratingValue">[rating given by reviewer]</span>/ <span itemprop="bestRating">[highest possible rating]</span>stars </div> <span itemprop="description">[The actual user review text]</span> </div>
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:
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:
<div itemscope itemtype="http://schema.org/Product"> <span itemprop="name">[Product name]</span> <span itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <span itemprop="price">[Product sale price]</span> </span> <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> <span itemprop="ratingValue">[Aggregate rating given]</span> stars – based on <span itemprop="reviewCount">[Number of reviews]</span> reviews </div> </div>
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:
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:
<span itemprop="offers" itemscope itemtype="http://schema.org/AggregateOffer"> <span itemprop="lowPrice">[lowest product price]</span> to <span itemprop="highPrice">[highest product price]</span> </span>
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:
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:
<div itemprop="review" itemscope itemtype="http://schema.org/Review"> <span itemprop="itemreviewed">[the item being reviewed]</span> <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"> <meta itemprop="worstRating" content = "[worst rating]"> <meta itemprop="bestRating" content="[best rating]"> <meta itemprop="ratingValue" content="[rating received]"> </div> <span itemprop="datePublished" content="[date in ISO format e.g. 2012-04-15]"> [publication date]</span> <span itemprop="author">[author name]</span> </div>
3.4 The test…
Filling in the blanks, the resulting SERP using the structured data testing tool should resemble something like this:
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:
<div itemscope itemtype="http://schema.org/Product"> <span itemprop="name">[product being reviewed]</span> <div itemprop="review" itemscope itemtype="http://schema.org/Review"> <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"> <meta itemprop="worstRating" content = "[worst possible rating]"> <meta itemprop="bestRating" content="[best possible rating]"> <meta itemprop="ratingValue" content="[rating given]"> </div> <span itemprop="author">[author name]</span> <span itemprop="datePublished" content="[date in ISO format e.g. 2012-04-15]"> [publication date]</span> </div> <span itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <span itemprop="price">[product price]</span> </span> </div>
This would create the following snippet:
You can extend this even further to include a price range; just replace the schema.org/Offer section with:
<span itemprop="offers" itemscope itemtype="http://schema.org/AggregateOffer"> <span itemprop="lowPrice">[lowest retail price]</span> to <span itemprop="highPrice">[highest retail price]</span> </span>
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:
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:
<div itemscope itemtype="http://schema.org/Movie"> <h1 itemprop="name">[name of the movie]</h1> <span itemprop="description">[description of the movie]</span> <div itemprop="director" itemscope itemtype="http://schema.org/Person"> <a href="[url]" itemprop="url"><span itemprop="name">[director’s name]</span></a> </div> <div itemprop="author" itemscope itemtype="http://schema.org/Person"> <a href="[url]" itemprop="url"><span itemprop="name">[script writer]</span></a> </div> <div itemprop="actor" itemscope itemtype="http://schema.org/Person"> <a href="[url]" itemprop="url"><span itemprop="name">[actor’s name]</span></a>, </div> <div itemprop="actor" itemscope itemtype="http://schema.org/Person"> <a href="[url]" itemprop="url"><span itemprop="name">[actor’s name]</span></a>, </div> <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> <span itemprop="ratingValue">[rating given]</span>/ <span itemprop="bestRating">[best possible rating]</span> stars from <span itemprop="ratingCount">[total ratings received]</span> users. </div> </div>
4.4 The test…
Filling in the blanks, the resulting snippet using the structured data testing tool should resemble something like this:
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’:
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:
<div itemscope itemtype="http://schema.org/TVSeries"> <H1 itemprop="name">[name of TV show]</H1> <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> <span itemprop="ratingValue">[rating given]</span>/ <span itemprop="bestRating">[best possible rating]</span> stars from <span itemprop="ratingCount">[total number of reviews]</span> users. </div> <span itemprop="description">[description of the TV show]</span> <div itemprop="author" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">[actor’s name]</span> </div> <div itemprop="actor" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">[actor’s name]</span> </div> <div itemprop="season" itemscope itemtype="http://schema.org/TVSeason"> <span itemprop="name">[season 1, 2 or 3...?]</span> - <meta itemprop="numberofEpisodes" content="[number of episodes in this season]"/> <meta itemprop="datePublished" content="[date in ISO format e.g. 2012-04-15]">[broadcast date] </div> <div itemprop="season" itemscope itemtype="http://schema.org/TVSeason"> <span itemprop="name">[season 1, 2 or 3...?]</span> - <meta itemprop="numberofEpisodes" content="[number of episodes in this season]"/> <meta itemprop="datePublished" content="[date in ISO format e.g. 2012-04-15]"> [broadcast date] <div itemprop="episode" itemscope itemtype="http://schema.org/TVEpisode"> <span itemprop="name">[episode name]</span> - <meta itemprop="episodeNumber" content="[episode number]"/> </div> </div> </div>
5.4 The test…
Filling in the blanks, the resulting snippet using the structured data testing tool should resemble something like this:
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.
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:
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:
<div itemscope itemtype="http://schema.org/LocalBusiness"> <span itemprop="name">[business name]</span> <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <span itemprop="streetAddress">[street name]</span> <span itemprop="addressLocality">[locality]</span>, <span itemprop="addressRegion">[region]</span> <span itemprop="postalCode">[postal code]</span> </div> <span itemprop="telephone">[telephone number]</span> <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> <span itemprop="ratingValue">[rating given]</span>/ <span itemprop="bestRating">[highest rating]</span> stars from <span itemprop="reviewCount">[total number of reviews]</span> users. </div> </div>
Further Reading: Rich Snippets for Local Search – Google Maps, 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:
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:
<div itemscope itemtype="http://schema.org/Recipe"> <span itemprop="author">[author name]</span> <span itemprop="datePublished" content="[date in ISO format e.g. 2012-04-15]">[publication date]</span> <span itemprop="name">[recipe name]</span> <img itemprop="image" src="[recipe image url]" /> <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> <span itemprop="ratingValue">[rating given]</span>/ <span itemprop="bestRating">[highest possible rating]</span> stars from <span itemprop="reviewCount">[total number of reviews]</span> users. </div> <span itemprop="description">[a description of the recipe]</span> <ul> <li itemprop="ingredients">[ingredient 1]</li> <li itemprop="ingredients">[ingredient 2]</li> <li itemprop="ingredients">[ingredient 3]</li> ... </ul> <span itemprop="recipeCategory"><a href="[url to recipe category]">[recipe category]</a></span> <span itemprop="recipeCuisine"><a href="[url to recipe cuisine category]">[recipe cuisine]</a></span> <span itemprop="recipeYield">[recipe yield]</span> <span itemprop="cookTime" content="[ISO duration format e.g. PT2H45M]">[cooking time]</span> <span itemprop="prepTime" content="[ISO duration format e.g. PT45M]">[prep time]</span> <div itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation"> <span itemprop="calories">[total calories]</span> <span itemprop="fatContent">[grams of fat]</span> </div> <ol itemprop="recipeInstructions"> <li>1. [Instruction 1]...</li> </ol> </div>
7.4 The test…
Filling in the blanks, the resulting snippet using the structured data testing tool should resemble something like this:
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
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:
<div itemscope itemtype="http://schema.org/MobileApplication"> <img itemprop="image" src="[image URL for application icon]" /> <span itemprop="name">[name of the mobile application]</span> - <div itemprop="author" itemscope itemtype="http://schema.org/Organization"> <a itemprop="url" href="[author url]"><span itemprop="name">[developer name]</span></a> </div> <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> <span itemprop="ratingValue">[rating given]</span>/ <span itemprop="bestRating">[highest possible rating]</span> stars from <span itemprop="ratingCount">[total number of ratings]</span> users. </div> <time itemprop="datePublished" datetime="[date in ISO format e.g. 2012-04-15]">[publication date]</time> <span itemprop="operatingSystems">[supported operating system]</span> <meta itemprop="fileSize" content="[file size e.g. 14MB]"/> <meta itemprop="interactionCount" content="[number of user downloads] UserDownloads"> <span itemprop="contentRating">[content rating e.g. Low Maturity]</span> <span itemprop="description">[description of the mobile application]</span> </div>
8.4 The test…
Filling in the blanks, the resulting snippet using the structured data testing tool should resemble something like this:
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:
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <span itemprop="price">0</span> </div>
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
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:
<div itemscope itemtype="http://schema.org/SoftwareApplication"> <img itemprop="image" src="[software application icon image url]" /> <span itemprop="name">[name of application]</span> - <div itemprop="author" itemscope itemtype="http://schema.org/Organization"> <a itemprop="url" href="[author url]"><span itemprop="name">[developer name]</span></a> </div> <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> <span itemprop="ratingValue">[rating given]</span>/ <span itemprop="bestRating">[highest possible rating]</span> stars from <span itemprop="ratingCount">[total number of ratings]</span> users. </div> <div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <span itemprop="price">[price]</span> </div> <span itemprop="description">[description of application]</span> <a itemprop="downloadURL" href="[download url]">Download</a> <time itemprop="datePublished" datetime="[date in ISO format e.g. 2012-04-15]">[publication date]</time> <span itemprop="operatingSystems">[supported operating systems]</span> <span itemprop="applicationCategory">[category]</span> <meta itemprop="fileSize" content="[file size e.g. 14MB]"/> <meta itemprop="interactionCount" content="[number of downloads] UserDownloads"> </div>
9.4 The test…
Filling in the blanks, the resulting snippet using the structured data testing tool should resemble something like this:
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
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:
<div itemscope itemtype="http://schema.org/Person"> <span itemprop="name">[person’s name]</span> <img src="[image url of person]" itemprop="image" /> <span itemprop="jobTitle">[job title]</span> <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <span itemprop="addressLocality">[locality]</span>, <span itemprop="addressRegion">[region]</span> <span itemprop="postalCode">[postal code]</span> </div> <span itemprop="telephone">[telephone number]</span> <a href="mailto:[email address]" itemprop="email">jane-doe@xyz.edu</a> </div>
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
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:
<div itemprop="event" itemscope itemtype="http://schema.org/Event"> <a href="[event url]" itemprop="url"> <span itemprop="name">[event name]</span> </a> <span itemprop="location">[event location]</span> <meta itemprop="startDate" content="[date in ISO format e.g. 2013-03-16]"> </div> <div itemprop="event" itemscope itemtype="http://schema.org/Event"> <a href="[event url]" itemprop="url"> <span itemprop="name">[event name]</span> </a> <span itemprop="location">[event location]</span> <meta itemprop="startDate" content="[date in ISO format e.g. 2013-03-16]"> </div>
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
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:
<div itemscope itemtype="http://schema.org/MusicPlaylist"> <span itemprop="name">[playlist/album name]</span> <meta itemprop="numTracks" content="[number of tracks]"/> <div itemprop="track" itemscope itemtype="http://schema.org/MusicRecording"> 1.<span itemprop="name">[track name]</span> - <span itemprop="byArtist">[artist name]</span> <meta content="[url]" itemprop="url" /> <meta content="[time in ISO format i.e. PT4M45S]" itemprop="duration" /> </div> <div itemprop="track" itemscope itemtype="http://schema.org/MusicRecording"> 2.<span itemprop="name">[track name]</span> - <span itemprop="byArtist">[artist name]</span> <meta content="[url]" itemprop="url" /> <meta content="[time in ISO format i.e. PT4M45S]" itemprop="duration" /> </div> <div itemprop="track" itemscope itemtype="http://schema.org/MusicRecording"> 3.<span itemprop="name">[track name]</span> - <span itemprop="byArtist">[artist name]</span> <meta content="[url]" itemprop="url" /> <meta content="[time in ISO format i.e. PT4M45S]" itemprop="duration" /> </div> <div itemprop="track" itemscope itemtype="http://schema.org/MusicRecording"> 4.<span itemprop="name">[track name]</span> - <span itemprop="byArtist">[artist name]</span> <meta content="[url]" itemprop="url" /> <meta content="[time in ISO format i.e. PT4M45S]" itemprop="duration" /> </div> </div>
12.4 The test:
Please note, due to the 1500 character length within the testing tool, only two tracks can be displayed:
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:
<meta content="[album name]" itemprop="inAlbum" />
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
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
<div itemprop="video" itemscope itemtype="http://schema.org/VideoObject"> <span itemprop="name">[video name]</span> <meta itemprop="duration" content="[duration in ISO format e.g. T1M33S]" /> <meta itemprop="thumbnail" content="[thumbnail-url]" /> [video object] <span itemprop="description">[video description]</span> </div>
Further Reading: VideoObject – Schema.org, Schema.org markup for videos – Google Webmaster Help, Getting Video Results in Google – Distilled
14. Create Interactive Breadcrumb Trails for your Search Listings
14.1 Example live 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
<div itemprop="breadcrumb"> <a href="[parent url]">[page name]</a> > <a href="[child url]">[page name]</a> > <a href="[child url]">[page name]</a> </div>
14.3 Standalone Micro Data
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="[parent url]" itemprop="url"> <span itemprop="title">[page name]</span> </a> › </div> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="[child url]" itemprop="url"> <span itemprop="title">[page name]</span> </a> › </div> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="[child url]" itemprop="url"> <span itemprop="title">[page name]</span> </a> </div>
Further Reading: Rich snippets – Breadcrumbs – Google Webmaster Help
Tools & Resources
Tools
- Structured Data Testing Tool – Google
- Schema Creator – Raven Tools
- Schema.org & Micro Data Generator – microDATAgenerator
- Markup Validation Tool – Bing
- Rich Snippets Testing Tool Bookmarklet – AJ Kohn
- The Semantic Web Index – Sindice
Plug-ins
WordPress
- Schema Creator – Raven
- WordPress SEO by Yoast – Joost de Valk
- WordLift
Magento
- Schema.org Extension – Iuvo Commerce
- MSemantic: Semantic SEO for Rich Snippets in Google & Yahoo – semantium
Joomla
- J4Schema – Davide Tampellini
Drupal
- Schema.org – Drupal
Useful Resources
- The Type Hierarchy – Schema.org
- Rich snippets submission form – Google
- HTML Microdata – W3C
- Schema.org FAQ – Google Webmaster Help
- getSchema.org
- An SEO’s guide to schema.org – Raven Tools
- Schema.org – Why You’re Behind if You’re Not Using It – SEOmoz
- Rich Snippets for Local Search – Google
- Microformats & Schema.org – Real life Use Cases – SEOmoz
- The Lowdown on Structured Data & Schema.org – Your Questions Answered – SEOmoz
- Creating Video Sitemaps for each Video Hosting Platform – Distilled
- Schema.org Library – Search Engine Land
- How To Use Schema.org Markup for Your Videos – Koozai
- Google’s New Data Highlighter – TechCrunch
- Google’s Data Highlighter and a view into the future of SEO – Seer Interactive
- Schema 101: How To Implement Schema.org Markups To Improve SEO Results – Search Engine Journal
Blimey.
Very detailed guide but I have a rather awkward question. How come the first example (the post about the San Francisco offices) doesn’t use the Review vocabulary? The rich snippet is generated by “regular” markup rather than explicit Schema.org vocabulary.
I have been testing similar implementations and have seen very different behaviours depending on issues such as DOCTYPE etc.
Any suggestion?
Boom! Awesome – already shared with our techies and they’ll be following it to the letter! Much obbliged
This is awesome Dan – thank you so much for taking the time to put this together!
@Sotos – thanks for dropping by, not awkward at all – that first image is just an example of a rich snippet that can indeed be replicated using Schema.org.
@Zak – thanks for the feedback Zak, glad you found the guide useful
@Richard – pleasure mate, its been on my list for quite some time glad to finally have it out there. Word on the street says a full FAQ extension is on its way too
Hey Dan,
Thank you for creating this! A quick question to you and the rest of the SEOGadget team – what are some live examples of event related micro-data?
I searched around and stumbled upon lanyrd.com and it seems they have rich snippets for event related data, but they don’t even reference schema.org when I decided to take a peek under the hood. view-source:http://lanyrd.com/
Can you comment on this?
What a super resource! – thanks
Wow this has to be the best rich snippet post I’ve ever seen. I’m developing a new site for a doctor right now and this post is a perfect resource to have.
Quick question. If it’s for a doctor. Do you recommend using a more detailed:
http://schema.org/Physician
or just stick to the general:
http://schema.org/LocalBusiness
Dan… I posted this on G+, “I’m in AWWW right now at the detailed awesomeness that +Richard Baxter through down on Micro Data & Schema.org mark up. Hats off to ya!” so anyways… foot in mouth.
But seriously awesome job! Going in the resource & training file now.
I was just talking about this recently with a colleague – great resource.
One of the best post about Rich snippiest markup I have ever read. Would love to have more about Google adwords and analytic.
Nice one Dan, you should also add the “reviewBody” itemprop to the Editorial Review section.
Also, regarding the 3.5 section code, Raven’s Schema Creator suggests using the product name markup inside the review markup, using the “itemReviewed” itemprop, and the Thing type instead of Product.
Again, awesome work, cheers!
Love this I do. =)
awesome – great guide!
would be nice to see the actual code that produced the images in the figures, nice article though
So in researching rich snippets I cannot find the answer to the following. Can you use multiple name attributes to signify a primary and secondary name for a Thing?