An Introduction to Rich Snippets - Event and People tags

Rich snippets / Structured data helps nearly all search engines understand what content is on your site and will be used to display rich snippets in your search results. Rich snippets are not for everyone but it has been said that incorporating them into your websites could yield higher rankings and therefore are worth looking into.

You can add structured data to your websites by using special keywords in your html markup.

This blog will go through a few examples of this markup and how it will affect your search results and how to add it to your site.

The snippets we will run through are Events and People

Events

To create an event tag similar to what we see above we will have to make a few HTML changes. Events are useful for musicians, pubs, clubs, festivals, theaters, museums, cinemas etc to let consumers know with a brief glance who is performing / showing where when and for how long. First of all you will may need to alter the structure of your HTML to wrap your events in a div with the syntax:

<div itemscope itemtype="http://data-vocabulary.org/Event">

inside this you can add your event summaries, times and locations. To do this you simply once again have to alter your HTML.

Use the keyword "ItemProp" within the corresponding tags to add the information into your search results rich snippets.

<span itemprop="summary"> ## Enter Summary Here ## </span>

The times uses the new HTML5 syntax where you add time into time tags, these are just the same as span or p tags but give browsers more of a description as to what information is kept within. Use the StartDate and or EndDate tags to show the information you want to display.

<time itemprop="startDate" datetime="2015-10-15T19:00-08:00">Oct 15, 7:00PM</time>
<time itemprop="endDate" datetime="2015-10-15T19:00-08:00">Oct 15, 9:00PM</time> 

Finally we have the location tags, wrap your location in a span tag with the following syntax

​<span itemprop="location" itemscope 

itemtype="http://data-vocabulary.org/​Organization"> 

<span itemprop="name"> ## Name of Location ##</span>
     ​<span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
         <span itemprop="street-address">## Street Address ##</span>, 
         <span itemprop="locality">## Town / City ##</span>, 
         <span itemprop="region"> ## Region ##</span>
     </span>

Using this syntax a rich snippet similar to the above image will be shown when you have users viewing search results about your site/ pages.

People

Very similarly to the events example above but probably a little easier to understand are the people tags. This is useful if you post a lot of content online and is very similar to how journalists end their columns. It gives the reader a sense of knowing the writer and also sometime attracts click throughs if they have read content from you previously. First start off opening a div tag with the following syntax:

<div itemscope itemtype="http://data-vocabulary.org/Person">

Inside here you can add span tags with itemprops such as name, url, affiliation and can even add a small photo of yourself below your search results. Set your name against the name span and a URL to your site / blog in the URL keyword, if you are working for an affiliate you may also add that too.

<span itemprop="name">## Name ##</span>

<a href="http://www.example.com" itemprop="url">www.example.com</a> 

<img itemprop="photo" src="## Location of Image ##</img>

Always remember to close off your original DIV tags to make sure your HTML is valid!

 

Once you have added your rich snippets, it may take a while for them to appear in the respective search engines. Google webmaster tools which is free to use has a tool that can check them straight away. The search engine crawlers will then add them to the search engine for definite once it has re-crawled your site. Do get to this visit http://www.google.com/webmasters/tools/richsnippets you may need to log in.

Schema.org is a website that goes through all of this syntax and markup in much more detail and I would recommend visiting it for more information on this topic.

Likewise for more information on this or any other topic please visit http://www.designpuddle.com and feel free to contact me.