Thanks to the collaboration of Google, Bing and Yahoo in 2012, Rich Snippets help these search engines display higher quality search results. In this blog post we'll focus on schema.org and how to add 'structured data' to your pages to help improve web page SEO and much more.

What Are Rich Snippets?

A rich snippet is HTML code that is placed on web pages that 'marks up' the page to provide Google and other search engines with explicit pieces of information about the theme and content of any given page. This snippet code isn't necessarily visible on a page viewed in a browser. They sit in the HTML code 'behind' the page content. When used correctly, the contents of your rich snippets appear in the search results along with the title and description of the page.

Types of Rich Snippets

When the use of structured data on web pages started becoming popular, there were three type available: Microformats, Microdata, and RDFa. Each type had both advantages and disadvantages. In the late 2,000's it became clear that a unified format was needed.

In 2012, Google, Bing and Yahoo collaborated to create schema.org which is based on the Microdata style of rich snippets. Their goal was to create a structured data markup schema supported by all major search engines. Popular types of rich snippets include: Reviews, Products, Articles, Companies, Authorship, Events, Music and Movies.

Facebook also uses special mark up called Open Graphs. This form of rich snippet allows Facebook users to tell stories on Facebook through a structured, strongly typed API.

Check out the video below offered by Google demonstrating the use of the Reviews type.

How to Add Markup to Your Pages

Marking Up an Event

Here is an example of HTML code that displays Event content on a page without structured markup.

<div>
Upcoming Event:
The Jazz Music Festival<br />
September 15th at 4:00pm<br />
Don Smyth Music Hall
</div>

Now lets add some Event type markup to the code.

<div itemscope itemtype="http://schema.org/Event">
Upcoming Event:
<span itemprop="name">The Jazz Music Festival</span><br />
<span itemprop="startDate">September 15th</span> at <span itemprop="startTime">4:00pm</span><br />
<span itemprop="location">Don Smyth Music Hall</span>
</div>

Thanks to this markup, we have given search engines very specific information about the nature of the content and the event. Here is an example of a search result featuring this type of rich snippet. Notice the event details are included along with the page title and description.

Marking Up a Blog Post

Here is an example of how to add markup to your blog pages. This is an example of blog type content without markup.

<div>
<h2>The Grass is Greener on The Other Side</h2>
<p>This is my article content, isn't it great?</p>
</hr>
<p>Posted by: Dave Smith of World News</p>
</div>

Here is the same content with some Article, Author & Publisher type markup added to the code.

<div itemscope itemtype="http://schema.org/Article">
<h2><span itemprop="name">4 New Websites for Lodging Ovations</span></h2>
<p itemprop="articleBody">This is my article content, isn't it great?</p>
</hr>
<p>Posted by: <a href="https://plus.google.com/u/0/+RoyMcClean/posts/NHFjtuwHboG" rel="author">
<span itemprop="author">Roy McClean</span> of 
<a href="https://plus.google.com/+Customfitonline/" rel="publisher">
<span itemprop="publisher">Custom Fit Online</span></a></p>
</div>

This markup identifies the content as an article. It also associates the content to an Author by linking the name to a Google+ account and the Publisher to another Google+ account.

Below is an example of a search result featuring this markup used on our Website. Notice the avatar and name taken from Roy McClean's Google+ page.

It's More Than Just Content Identification

When a search engine crawls a page without structured data, it may not focus on the content you wish it to. In this scenario, weight is given to the page as a whole and it's up to the search engine to decide the content theme of the page. As a result, your page may not rank well for the search terms you wish it to, or worse, it may not rank at all. By adding rich snippets you, are telling search engines what you wish them to focus on.

An added benefit is that search results that feature markup content have much higher clickthrough rates than standard results.

Not Guaranteed Results, But Still a Good Practice

Google and other search engines do not guarantee that your markup will be displayed in search results. Why not? We'll that depends on a number of factors. Google has a help page that will help you get the most out of your rich snippets and ensure that they are formatted properly. But routinely marking your page using rich snippets following the protocol outlined on schema.org can be a powerful to improve your online performance.

The Power of Rich Snippets

Using rich snippets can have a very positive impact on both search engine visibility, improved click-through rates, and user experience. The team at Custom Fit Online have integrated Rich Snippets into our everyday web development and search engine optimization (SEO) work. We regard rich text snippet mark up as a critical best practice for improving on clients' online performance.

Now It's Your Turn

Have you heard of rich snippets before? Do you use them on your website? Do you have any questions about rich snippets. Please fire away with questions, comments or suggestions using the comments form below. Thanks!

Filed in // Websites, Content Management Systems, Content Development, Search Engine Optimization, Website Optimization