How to use microformats to enrich your SERP snippets

People often look at search engine optimization as if it was all about positions in the SERPs and nothing more. True, you have to be at the top, but microformats could give you (almost an unfair) advantage over your competition with just a little bit of work.

Microformats? What are you talking about?

Microformats provide a way to structure and markup your data in a way that crawlers like googlebot can easily parse and extract specific pieces of information from. A while ago, Google started to show data extracted from microformats in the SERPs, but not too many websites have adapted and changed their markup.

Implementation – easier than you think

Usually, onsite SEO means writing a lot of code, buying commercial plugins, fixing internal linking structure etc. With microformats, it’s totally different – they’re used to better present your data to the crawler, so all the required information is already there – in your template files.

All you have to do is to simply add a little bit of markup to get required DOM structure.

Example – imdb.com

If you have never used Google to find a move review on imdb, here’s a picture of IMDB SERP snippet for “godfather” search

godfather SERP snippet IMDB

Have you ever wondered how it is possible that IMDB has ratings, director, stars and other links already in the SERP? This is the best example of how microformats should be used. To prove that it really gives you an advantage, take a look at other results on this page. Below IMDB, there is a long gap before another snippet with microformats is shown:

As you can see it can really make a difference!

What the hell is schema?

As many other things nowadays, microformats also have documentation online – folks from Google done great job putting it all together at schema.org

The part we are currently interested in is movie schema

Hands-on IMDB movie schema implementation

Let’s look at IMDB source – we will show you step by step how they did it.

1. movie itemscope

Ok, first things first – itemscope. By adding itemscope to a div you define that your div contains information about particular item.

<div id="content-2-wide" class="redesign">

2. Cover picture

<img src="http://ia.media-imdb.com/images/M/MV5BMTIyMTIxNjI5NF5BMl5BanBnXkFtZTcwNzQzNDM5MQ@@._V1._SY317_CR2,0,214,317_.jpg"
     style="max-width:214px; max-height:317px;"
     height="317"
     alt="The Godfather Poster"
     title="The Godfather Poster" 
     itemprop="image" />

As you can see, the last param of img is itemprop=”image”

3. Item (movie) name

<h1 class="header" itemprop="name">
The Godfather

<span>(<a href="/year/1972/">1972</a>)</span>
</h1>

4. Rating

<div class="star-box giga-star" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> 
<div class="star-box-giga-star">
9.2
[...]
<div class="star-box-details">
Ratings: <strong><span itemprop="ratingValue">9.2</span></strong><span class="mellow">/<span itemprop="bestRating">10</span></span> from <a    onclick="(new Image()).src='/rg/title-gigastar/votes/images/b.gif?link=ratings';"     href="ratings"   title="519,864 IMDb users have given an average vote of 9.2/10"
    ><span itemprop="ratingCount">519,864</span> users</a>
</div>

As you can see here, AggregateRating is used and because it’s a separate “item” in terms of microformats itemtype is provided.

I’d recommend you to check AggregateRating schema, as it’s commonly used on shopping sites and you’ll probably find it useful.

5. Movie description

<p itemprop="description">
The aging patriarch of an organized crime dynasty transfers control of his clandestine empire to his reluctant son.
</p>

This part is quite self-explanatory :)

6. Director

<h4 class="inline">
    Director:
  </h4>
<a    onclick="(new Image()).src='/rg/title-overview/director-1/images/b.gif?link=%2Fname%2Fnm0000338%2F';"     href="/name/nm0000338/"   itemprop="director"
    >Francis Ford Coppola</a></div>

Again simply adding itemprop=”director” to your existing markup will make Google display it in the SERP

7. Actors

<h4 class="inline">Stars:</h4>
<a    onclick="(new Image()).src='/rg/title-overview/star-1/images/b.gif?link=%2Fname%2Fnm0000008%2F';"     href="/name/nm0000008/"   itemprop="actors"
    >Marlon Brando</a>, <a    onclick="(new Image()).src='/rg/title-overview/star-2/images/b.gif?link=%2Fname%2Fnm0000199%2F';"     href="/name/nm0000199/"   itemprop="actors"
    >Al Pacino</a> and <a    onclick="(new Image()).src='/rg/title-overview/star-3/images/b.gif?link=%2Fname%2Fnm0001001%2F';"     href="/name/nm0001001/"   itemprop="actors"
    >James Caan</a>

So to add actor information to SERP, simply put itemprop=”actors” in elements linking to their profile on your site.

8. All the other stuff

We could go on but i think you get the idea – just go to schema.org, find your schema and add markup to win with your competition!

You might find a tool provided by Google useful to check if your implementation is correct – Rich Snippets Testing Tool – sometimes implementation is a bit tricky and this tool might come in handy.

About Lury

Lukas is an experienced IT guy with huge amount of knowledge regarding website performance and optimization. With just few click he can pinpoint your major problems and provide you with the solution.

Ready to socialize?

, , , , , , ,

No comments yet.

Leave a Reply

CommentLuv badge

Read previous post:
swatch
W3 Total Cache JavaScript minification troubleshooting

W3 Total Cache is a really popular caching plugin for Wordpress. It's easy to set up, and using default settings you can significantly boost your site's performance. Unfortunately, there is one common issue with the default JavaScript compression settings when you have several other plugins installed - it breaks js!

Close