Rich snippets – a summery

Rich Snippets are not something that is actively studied in the web development industry but I feel is essential for SEO reasons,  which are very helpful if used correctly.

From what I have found “Rich Snippets” are a way in which search engines can identify/classify the type of content that can be found on your site and can help with search engine listings/optimisation. is a site created in order to better classify web content from a combined effort by Google, Microsoft and Yahoo. is a helpful place to start, below is my summery of the article.



  • Anything that is going to be classified as a rich snippet/tag should be enclosed in an html tag (div/span) with the attribute of “itemscope” – e.g. <div itemscope>{rich tag stuff}</div>  – The attribute itself does not have any parameters.

<div itemscope itemtype=””>{Some html content}</div>

  • The “itemprop” attribute should be given to child elements that match desired schema’s, these are listed on the related itemtype link under the “Property” column. e.g. under some examples itemprop’s are ”branchOf”, “currenciesAccepted”, “openingHours” .
  • The next column on the same page lists the type of value that is expected e.g.

<h1 itemprop=”name”>Bob the builder</h1> is expecting “Bob the builder” to be text.

  • “itemtype”s can also be embedded within others e.g. “Bob the builder” can have an additional itemtype of where additional itemprops can also be added to that as child elements. e.g

<h1 itemprop=”name” itemtype=””>Bob the builder</h1>

This is a basic Summery of the  doc, there is more information on this page, that is really interesting, but I don’t feel that is is relevant at a beginner level.

A really nice tool that you can use to test your rich tags is

Here you can either enter the url, but for testing purposes, I would enter custom html markup into the html tab editor, and then preview how google will display it well as which information was extracted.

Here is a full html example that you can paste straight into the html editor on to see how it works


<!DOCTYPE html>

<html lang=”en”>


<meta charset=”UTF-8″>

<title>Hello world</title>



<div itemscope itemtype=”; >

<div itemprop=”agent” itemtype=”“>Bob The Builder</div>





Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s