Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

What Are Rich Snippets?

This presentation explains what rich snippets are, and how they can be applied to your website.

  • Login to see the comments

  • Be the first to like this

What Are Rich Snippets?

  1. 1. December 2012 Rich Snippet Markup
  2. 2. Contents1. Introduction2. How To Use Schema3. Tools4. Next Steps
  3. 3. experience relevance SummaryThis presentation explains what rich snippets are and how theycan be used to improve search engine results and website clickthrough rates.
  4. 4. experience relevanceWhat Are Rich Snippets?Rich snippets provide search engines with ‘context’.They enable a website owner to highlight important or usefulpieces of information to the search engines.For example a ‘product’ schema type could be applied to aparticular product on a website.This enables the website to tell the search engine where theproduct description, product cost and product name can befound.
  5. 5. experience relevanceRich Search ResultsThe below screenshot outlines two search engine results whichhave the ‘review’ schema type applied to their content. Rating Reviews Description
  6. 6. experience relevanceRich Search Results Search engine result for ‘movies Tuggerah’ Source of information for the search engine result.
  7. 7. experience relevanceHTML StructureBelow is a quick overview of how HTML code is structured. HTML Element HTML Property Most HTML Elements have a start and an end
  8. 8. experience relevanceUsing SchemaThere 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-upContent after schema mark-up
  9. 9. experience relevanceSchema PropertiesBelow is the property list for the ‘movie’ schema type.Properties from Movie Person A cast member of the movie, TV series, season, or episode, oractor video. Person A cast member of the movie, TV series, season, or episode, oractors 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, orproducer video. Organization The production company or studio that made the movie, TVproductionCompany 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. 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 RDFaadditionalType syntax, it is better to use the native RDFa syntax - the typeof attribute - for multiple types. 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 Text The name of the item.url URL URL of the item.
  11. 11. experience relevanceUsing Schema PropertiesSchema properties can be applied to any HTML tag. Mostcommonly you would apply it to a <h1> - <h9>, <div>, <p>, or<span> tag.In the example above schema properties have been appliedto <div>, <h1>, <span> and <a> tags.
  12. 12. experience relevanceDefining A Schema TypeLike all mark-up you need to define where a schema starts andends.To start defining a schema type, you would place the followingcode within the page content.<div itemscope itemtype=“{schema type}>The content that is going to be used for this schema type hasbeen encased in a <div> element.
  13. 13. experience relevanceDefining A Schema TypeIn most cases you will need to apply multiple schema types toa dataset.In the example above, we have defined a ‘movie’ schematype.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. 14. experience relevanceDefining Schema PropertiesOnce you have defined where your schema type begins andends, it is time to apply ‘properties’.To achieve this, the ‘itemprop’ attribute is used.In the example above the ‘name’ and the ‘genre’ has beentagged using the ‘itemprop’ attribute.
  15. 15. experience relevanceSchema Test ToolEntering the above code through the Google rich snippet tool produces thebelow 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.
  16. 16. experience relevance Broken SchemaThe below screenshot shows what is displayed when there is invalid schemaapplied to a webpage.In this case, the ‘name’ item property has been incorrectly implemented.
  17. 17. experience relevance SummaryBy 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. 18. THANK YOU!