What Are Rich Snippets?
- 1. December 2012 Rich Snippet Markup
- 2. Contents 1. Introduction 2. How To Use Schema 3. Tools 4. Next Steps
- 3. experience relevance Summary This presentation explains what rich snippets are and how they can be used to improve search engine results and website click through rates.
- 4. experience relevance What Are Rich Snippets? Rich snippets provide search engines with ‘context’. They enable a website owner to highlight important or useful pieces of information to the search engines. For example a ‘product’ schema type could be applied to a particular product on a website. This enables the website to tell the search engine where the product description, product cost and product name can be found.
- 5. experience relevance Rich Search Results The below screenshot outlines two search engine results which have the ‘review’ schema type applied to their content. Rating Reviews Description
- 6. experience relevance Rich Search Results Search engine result for ‘movies Tuggerah’ Source of information for the search engine result.
- 7. experience relevance HTML Structure Below is a quick overview of how HTML code is structured. HTML Element HTML Property Most HTML Elements have a start and an end
- 8. experience relevance Using Schema There is a schema type for just about any piece of content including ‘people’, ‘books’, ‘recipes’ and much more. In the below example we’ll take a look at the ‘movie’ schema type. Content before schema mark-up Content after schema mark-up
- 9. experience relevance Schema Properties Below is the property list for the ‘movie’ schema type. Properties from Movie Person A cast member of the movie, TV series, season, or episode, or actor video. Person A cast member of the movie, TV series, season, or episode, or actors video. (legacy spelling; see singular form, actor) director Person The director of the movie, TV episode, or series. Duration The duration of the item (movie, audio recording, event, etc.) duration in ISO 8601 date format. musicBy MusicGroup orPerson The composer of the movie or TV soundtrack. Person The producer of the movie, TV series, season, or episode, or producer video. Organization The production company or studio that made the movie, TV productionCompany series, season, or episode, or video. trailer VideoObject The trailer of the movie or TV series, season, or episode. *Not all properties have to be applied when defining an object.
- 10. experience relevance Schema Properties The ‘movie’ schema type also uses properties from ‘thing’ Properties from Thing URL An additional type for the item, typically used for adding more specific types from external vocabularies in microdata syntax. This is a relationship between something and a class that the thing is in. In RDFa additionalType syntax, it is better to use the native RDFa syntax - the 'typeof' attribute - for multiple types. Schema.org tools may have only weaker understanding of extra types, in particular those defined externally. description Text A short description of the item. image URL URL of an image of the item. name Text The name of the item. url URL URL of the item.
- 11. experience relevance Using Schema Properties Schema properties can be applied to any HTML tag. Most commonly you would apply it to a <h1> - <h9>, <div>, <p>, or <span> tag. In the example above schema properties have been applied to <div>, <h1>, <span> and <a> tags.
- 12. experience relevance Defining A Schema Type Like all mark-up you need to define where a schema starts and ends. To start defining a schema type, you would place the following code within the page content. <div itemscope itemtype=“http://schema.org/{schema type}> The content that is going to be used for this schema type has been encased in a <div> element.
- 13. experience relevance Defining A Schema Type In most cases you will need to apply multiple schema types to a dataset. In the example above, we have defined a ‘movie’ schema type. Within the ‘movie’ schema there is the ‘director’ property. Because the director is a person, you will also have to apply the ‘person’ schema type.
- 14. experience relevance Defining Schema Properties Once you have defined where your schema type begins and ends, it is time to apply ‘properties’. To achieve this, the ‘itemprop’ attribute is used. In the example above the ‘name’ and the ‘genre’ has been tagged using the ‘itemprop’ attribute.
- 15. experience relevance Schema Test Tool Entering the above code through the Google rich snippet tool produces the below output. When Google sees this now ‘structured data’ it can easily determine that the page content is a ‘movie’ Additionally, Google can easily see the movie name and other properties defined using schema mark-up. http://www.google.com/webmasters/tools/richsnippets
- 16. experience relevance Broken Schema The below screenshot shows what is displayed when there is invalid schema applied to a webpage. In this case, the ‘name’ item property has been incorrectly implemented.
- 17. experience relevance Summary By applying schema mark-up to webpages: • Search engines can easily understand your data. • If content is well understood by search engines, they can display richer results for your website based on your mark-up. • This in turn increases the click through rates.
- 18. THANK YOU!