Understanding Rich Snippets and their effect on your website

Understand rich snippets and structured data, how to set them up on your website and how they will effect your website listings in search engines.

It comes to great surprise to me that while doing the research about rich snippet( structured data ) I found it extremely difficult to find a good source that I could just go in and learn about. At the moment it's all seeming like this dark taboo and very few are taking the time to explain in it in depth so we're going to try and do that.

 

UPDATE: We have noticed that some SEO blogs / websites refer to structured data as  microdata and we wanted to make it clear... Yes microdata & structured data are the same thing, so don't worry about it. If you're here to learn about structured data or micro data you're in the right place. We hope this clears the confusion that exists around the terminology here.

 

What are rich snippets and structured data?

Up till just a few years ago, we as web developers and SEOs had no control on how to show up in search results in search engines and this frustrated the majority of us as we believed that just having the title, a short description and a link just wasn't enough, we needed to add more to that result such as product price, review, rating, author, publisher, etc... Google answered that call with rich snippets. Rich snippets add these attributes to the search result through the use of structured data. We can add certain attributes to our HTML markup so that Google can understand it better and decide if to show the data we give it. In most cases they do show this structured data.

 

This is how a search result most commonly looks like
normal serp

This is how a rich snippet looks like
richsnippet

 

 

Understanding terminology

Their are 4 main terminologies associated with this structured data.

  1. Itemscope
  2. Itemprop
  3. Itemtype
  4. Itemref

 

Itemscope is the holder of your ItempropItemref is a pointer to an Itemscope and Itemtype is the type of data inside the Itemscope so for example we would do:

 

Basic use of Structured Data

<!-- Example for Person -->
<div itemscope itemtype="http://schema.org/Person">
<h1 itemprop="name">Dylan Grech</h1>
<img src="/images/dylan-grech.jpg" itemprop="image" />
<span itemprop="description">Dylan has founded Innovative Codes</span>
</div>

The above code would declare that the div will contain the data about a person, his name is "Dylan Grech", his image can be found at: "images/dylan-grech.jpg" and "Dylan has founded Innovative Codes" is his description.
This of course is just a very small subset of attributes you can use. Let's go ahead and make something a little bit more detailed.

 

Nesting structured elements

<!-- Example for Article -->
<div itemscope itemtype="http://schema.org/Article">
    <h1 itemprop="title">The Amazing Article</h1>
    <p itemprop="articlebody">We have written this article about rich snippets to...</p>
    <div itemprop="author" itemscope itemtype="http://schema.org/Person">
        <h2><span itemprop="givenName">Jeanette</span><span itemprop="familyName">Attard</span></h2>
        <span itemprop="jobTitle">Operations Manager</span>
    </div>
</div>

As you can see now we have nested in the data of Jeanette Attard (Person) inside of The Amazing Article (Article). This tells google that Jeanette Attard has written this article through the use of itemprop="author" and also tells Google, hey this is Jeanette and here is some of her information.

 

Referencing structured elements

<!-- Example with Itemref -->
<div itemscope itemtype="http://schema.org/Article">
    <h1 itemprop="headline">Referencing</h1>
    <div itemprop="author" itemscope itemtype="http://schema.org/Person">
        <p itemprop="givenName">Dylan</p>
        <p>
            <a href="http://mylink.com" itemprop="worksfor" itemscope itemtype="http://schema.org/Organization" itemref="organization_details">My Company</a>
        </p>
    </div>
</div>
<div id="organization_details">
    <p itemprop="name">My Organization</p>
    <img src="logo.png" itemprop="logo />
</div>

The above example demonstrates how to link up multiple elements which otherwise couldn't be done in the html without ruining your website layout. Also it makes the organization element re-usable which is a great plus considering the ammount of details needed to construct a full organization element.

 

Getting familiar with schema.org

As you might have already noticed every itemtype equals a url. This url is very important as that is an actual url pointing to the schema.org website which has all the possible attributes you can use for a particular itemtype. Get used to going back and forth from the schema.org website since there are tons of attributes you can use and some require that you use nested itemtypes to work so that makes it a little bit more challenging to remember.

 

 

Checking everything is working as intended

While typing these in, there is a big possibility that you're going to have typos so you need to make sure everything is working and it would also be nice to see how it would look before actually committing your changes. Google provides a very neat tool called Google Structured Data Testing Tool to test this structured data and it will also show you a preview of how the rich snippet will look once parsed. It will also tell you if you have missed out some important attribute. This tools allows you check your markup by submiting a link to the page or even pasting in your HTML which is very cool since you want to try it out while working on it.

Here is an example of an article page in the testing tool:
rich snippet preview
structured data example

 

 

Adding Authorship

As you can see from the rich snippet image, I have my picture & name and Google is saying that I'm the author of that article. This is a very good way to attract visitors to your site if you have a famous author writing articles for you. So how do you set it up?

  1. The author needs to have a Google+ account
  2. The author must login in his Google+ account, and in the links section he/she must add a link to your site and state that he/she is a contributor. This link would look something like this:
    contributor
  3. Inside the schema.org/Person itemscope you must add a link to the author's Google+ account and add the query string ?rel=author so this would look something like this:
    <span itemscope itemtype="schema.org/Person">
        <a href="http://https://plus.google.com/+DylanGrech/?rel=author" itemprop="name">Dylan Grech</a>
    </span>
  4. Now just go the Google Structured Data Testing Tool and test it out.

Note: When pasting HTML this doesn't always work so you might need to deploy the code live to make sure it's working.

 

 

Adding the Publisher

This is where most developers and SEOs struggle. The publisher attribute asks Google to show your organizational Google+ page picture and name in the rich snippet, however it's not as straight forward as it sounds. So how do you add the publisher to the snippet?

  1. You must have a business Google+ page
  2. You must have your website field set in the Google+ page to the URL of the site so for example: Innovative Codes Google+ page has it's website set to http://innovativecodes.com
  3. You have to add the publisher link tag inside the <head> section of your page like so:
    <head>
        <title>Innovative Codes</title>
        ...
        <link rel="publisher" href="https://plus.google.com/+Innovativecodes_com">
        ...
    </head>
  4. Now go back to the Google Structured Data Testing Tool and try it out.

Note: Up till the date of this article Google sees www.mywebsite.com and mywesbite.com as 2 separate websites so make sure your adding the proper version to the Google+ page

 

 

Do rich snippet increase search ranking?

This question has been brought up a lot, since you're mostly doing work in the webmaster tools it kind of makes sense that it would increase ranking, however Google has publicly said it doesn't even though it actually does in some cases... Let me explain;
You will not see any ranking changes by implementing rich snippets, however you will most probably notice a drastic increase in click through rate( the % of people going to your website after seeing it in the search results ) and this is a current search signal, then yes you will gain a ranking increase since your domain will have more authority.

 

 

Is structured data valid HTML code? Will it validate through W3? 

Yes structured data is 100% valid and will validate through W3, it is a recognized schema and can be used without any worry. The fact that Google encourages the use of structured data should have been obvious that it's valid HTML and will not break any crawler however I hope this re-assures you.

 

 

What is expected in the future?

To be completely honest here we have no idea where this is going and as many Google concepts they might change over night, however we are quite confident that this will be a standard for quite some time now and we hope that Google gives us more flexibility on what to show and what not show in the search results. For the time being we are just thrilled to have this.