Rich snippets for idiots. And, er, you.

Rich snippets for idiots. And, er, you. From Wordtracker, the leading keyword research tool

Great content is the backbone of great SEO. But great content needs to be appreciated by search engines, not just humans. If your content is text-based, search engines can’t ‘read’ it, they can only match it to search queries. Luckily, there are things you can do to make your content just as readable and fun for users, but actually mean something for search engines. Those things are called 'rich snippets' and here’s how they work.

Rich snippets help search engines extract meaning from words that humans can understand straight away. The Taj Mahal for example, is one of the Seven Wonders of the World, but it’s also a casino in New Jersey or an American blues musician. Or my local Indian restaurant. The sentence ‘I’m in the Taj Mahal’ is easy for humans to understand, even though the meaning of that sentence can change depending on context. Am I telling you this over the phone from India, or are we eating a curry in the glamorous London district of Hackney?

These are nuances and levels of meaning that humans can understand, but search engines can’t. But we can help them out with rich snippets.

There are a few formats you can use for your rich snippets, but all search engines prefer something called ‘microdata’. It’s quite simple to implement so let’s look at an example. Oh, and for the record, sometimes I use ‘markup’ instead of rich snippets, but in this context the words are interchangeable. And I use Google and ‘the search engines’ interchangeably too, because what I‘m about to show you is universal, it works across all of them.

OK, onwards.

People

Here’s some text I want to put on the Wordtracker site:

“Andrew Tobert is one of the world’s great people. He lives in London, and is the content manager for Wordtracker. “

There’s a lot of information here for any English-speaking human, because they can infer things. When you, a human, read the phrase ‘he lives in London’, you imagine something like this:

Andrew lives here UK map picture

But search engines can’t do that. They might know that London is a city, but the words ‘he lives in’ are meaningless. They can’t infer the image above, they can’t connect me with London in any way. However, with a little code, all these inferences can be spelled out. I just need to do this:

<div itemscope itemtype="http://schema.org/Person"><span itemprop="name">Andrew Tobert</span>, is one of the world’s great people. He lives in <span itemprop="homeLocation">London</span>, and is the <span itemprop="jobTitle">content manager </span>for <span itemprop="affiliation">Wordtracker</span>.</div>

Now, I‘ll walk you through this in a moment, but the key thing at this stage is this: when you upload this content on to your site, it will make no difference from a human’s perspective, they’ll see what they’ve always seen. But for the search engines, it’s infinitely more useful as they can now connect all the attributes of the ‘marked up’ person. They can understand that my name is Andrew Tobert, I’m in a place called London, and I work at an organization called Wordtracker.

The engines still can’t understand search queries, however. If someone was to search ‘Does Andrew Tobert live in New York?’, they wouldn’t be able to respond with “he wishes”, because they can’t understand the question. But they now know that Andrew Tobert is a person, not just a string of letters, so they can deal with that accordingly. When someone searches for my name or something related to me, like an article I‘ve written, just using the markup above returns a beautifully rich result like this:

Page title comes here

So one day they might know as much about me as they do about Cher.

Cher's birthday

We can but dream. And who knew she was that old? I wonder how she’s stayed so youthful?

The point is, if your site marks up the people you mention in this way, you could potentially return more meaningful data in the search results, which will mean more clicks. We’ll see this in action later on.

Reviews

The MGM movie Singin' in the Rain (run with me on this) has recently been made into a stage musical, currently showing in the West End in London. Here’s a screenshot from their website.

Singin' in the Rain ad

Now, general knowledge question, what are the arrows pointing to?

It’s a REVIEW!

You and I know that it’s a review. Why? Because even if we didn’t live in the UK, we could understand that the Sunday Express was probably a newspaper or magazine of some kind (it is). And we’d all appreciate that five stars with a puntastic headline means that whoever went to see it really liked it, and was sharing their opinion. And we’d also expect a theater to publish positive reviews of their shows. But on Google all this information is lost because it’s not marked up, and this matters. Look at the search result.

Singin' in the Rain search results

Now, OK, IMDb is talking about the movie rather than the musical, but still, that’s a review, in the search results. Where has Google got this information from? If you look at the code on http://www.imdb.com/title/tt0045152/ (which you can do by right-clicking on the web page then choosing ‘View source’), and you’ll see:

"http://schema.org/AggregateRating"

IMDb have marked up all their reviews, and lo and behold that information has been represented by Google.

Now what if Singing in the Rain, or sorry, Singin’ in the Rain (groan), had also marked up their content in this way? We’d be looking at a 5 star review shining through in the Google search results. Do you think that would make searchers less likely to click and purchase? Of course it wouldn’t. People like good reviews, if you’ve got good reviews, make sure they see it as early and as often as possible.

Events

I found, when researching this article, that the world of musical theater is filled with brilliant and terrible SEO. Here’s a search for Wicked the Musical:

No rich snippets for Wicked the Musical

Once again, the actual theater companies didn’t use any markup, but Ticketmaster did. So their search result is much richer and more useful. Where would you click if you wanted to buy tickets?

Whatever business you operate in, rich snippets give you the best chance of creating richer search results, and getting much more traffic to your site. There are many things you can mark up, so check out http://schema.org for a full list. But we’re dealing with code here, and code needs to be written. Which brings me neatly onto the next section.

How it works

As I said, there are a million possible things you can mark up, but because I‘m an ego-centric narcissist, let’s use me. Just like my ex did.

Firstly, you have to define what you’re defining, or your ‘item type’. In this case, it’s a person. The first step is to tell the search engines the protocols you’re using.

This line ...

<div itemscope itemtype="http://schema.org/Person">

... does just that. It’s saying ‘I’m using Schema.org’s definitions and protocols for ‘Person’'. That way, Google and Bing can understand what you’re going on about. The ‘div’ bit means that everything within that div (more on those later) is referring to that person.

So if you were talking about me on your website (which, by the way, you should) that would be your first line.

Now click on the Schema link http://schema.org/Person and you can see all the qualities that you can mark up about people. As well as job title and address, there's siblings, gender, all sorts. All these qualities go into an ‘itemprop’, which in English just means, ‘qualities that person has’. Or attributes I suppose is a better word. These aren’t judgement calls we’re making.

If you go on the Schema.org website by the way, you’ll notice it does a curious thing.

Properties from Thing on Schema.org

The first section is ‘Properties from Thing’. These are, in English, attributes from other properties that you can use for people. If for example, you uploaded an image within the person <div>, you’d be telling the search engines what that person looks like. Spooky. But you could put the same line of code into another div, the div for a hotel say and that image would then be associated with that. It can be exactly the same line of code, and exactly the same image even, but it’s the context, the <div> that it’s in that really matters. That's the only thing the search engines can understand.

So if you want to add attributes to what you’re writing about me, the code you’ll end up with, for whatever it is you’re adding, is:

<span itemprop=”property”>Whatever</span>

So let’s go through this. Let’s say I wanted to add a name. I‘d replace the word property with name. Then, where I‘ve rather unhelpfully written Whatever, you’d put the name.

So the code becomes:

<span itemprop=”name”>Andrew Tobert</span>

You can pick whatever properties you like, provided they exist in the grey column on the Schema site. So let’s do another example.

If you wanted to add my birthday, you’d do this:

Rich snippet to add birthday

<span itemprop=”birthDate”>20th June 1991</span></code><>

Notice the lowercase b and capital D, this is a coding convention, so please stick to it, otherwise there may be some errors with the code, and some of your beautiful markup may not get read by the search engines.

There’s no preferred formatting on the date by the way. I could have written this as 20/06/91 or 6/20/91. What’s most important is that your users understand it easily. And that I‘m still only 21. Unbelievable.

On the subject of formatting, you can input your attributes however you like. For my name, you could call me Andrew, Andrew Tobert, Andrew T, whatever you want. But remember that the search engines can’t break this down unless you tell them. If you call me Andrew Tobert, that’s my name. They, the search engines, can’t then say that Tobert is my surname, or that Mr A Tobert might also be me. If you want that level of granularity, you need to find the correct property. To carry on this example, you can see that there are separate properties for the two parts of my name.

Rich snippet for parts of name

So if you wanted the search engines to know that Andrew was my first name and Tobert was my second, you‘d write:

<span itemprop=”givenName”>Andrew </span><span itemprop=”familyName”>Tobert</span></code></>

The user will just see ‘Andrew Tobert’ but the search engines will now be able to understand what that means.

Where it’s not immediately obvious if there’s a suitably granular property you can use, click on the red links next to the grey column in Schema.org. So, for my postal address ...

Rich snippet for postal address

... you could just use ‘address’ but if you wanted the search engines to understand the composite parts, click “PostalAddress” and get a range of more detailed options.

Rich snippet for postaladdress

So, you’ll be getting the hang of this now, all you do is:

<div itemscope itemtype=" http://schema.org/Person"><span itemprop="name"></pre></code><span itemprop=”givenName”>Andrew </span><span itemprop=”familyName”>Tobert</span></div><div itemscope itemtype="http://schema.org/PostalAddress" itemprop="address" ><span itemprop="streetAddress">1 Infinity Loop</span><span itemprop="addressLocality">Cupertino</span><span itemprop="addressRegion">California</span><span itemprop="addressCountry">USA</span> </div>

And that’s my address! (OK, it’s not really my address, but I’m not sure we’re quite ready for that. It’s more a second date thing. And I‘ve not been drinking) (Notice how when I combined two schemas (schemae?), you put them in the same div, but you use a span instead. That's called a 'nested item'. Fact.)

The div

The final thing to talk about is divs, which we touched on earlier, but I think it’s worth a few lines more. There was a div, remember, in the first line of the code:

<div itemscope itemtype="http://schema.org/Person">

Divs are usually useful for browsers, but I‘ll not be talking browsers here. For search engines, the div lets them know when the ‘thing’ you’re talking about starts and finishes. So that when you upload a picture of me, then a picture of Zac Efron, the search engines can tell who’s who.

Divs, like all tags in the world of code, stop when you see the close tag, the </div> in this case. Make sure you close all the tags that you start, otherwise both the browser and the search engines are going to get very confused. So, let’s look back at the first code we saw and see the divs and all the code in action.

<div itemscope itemtype="http://schema.org/Person"><span itemprop="name">Andrew Tobert</span>, is one of the world’s great people. He lives in <span itemprop="homeLocation">London</span> and is the <span itemprop="jobTitle">content manager</span> for <span itemprop="affiliation">Wordtracker</span>.</div>

Does this make sense now? Hopefully it should. But writing code is actually quite tricky if you don’t do it every day. (I say this having never done it every day. It must get easier right?) But there are tools to help. Google has a testing tool, so you can check the code you’ve written. So there are no excuses. Mark up your content, and see what happens to your search results.

And let us know how you did! Rich Snippets aren’t going anywhere, so the more comments and questions you post in the comments box, the more I‘ll know what you’re struggling with and the more relevant articles I can write. You get the answer you need, and I don’t have to think about what I'm going to write next. We both win!

T

Article updated by Julie McNamee March 27, 2013:

Data Highlighter

Google have made it easier to add markup in recent months. So far, the Data Highlighter Tool on Webmaster Tools is only available for marking up event data, but they've promised to add to this in the future. And that means that you'll not have to fight with code to make your rich snippets.

You'll find it here:

Data highlighter tool

And this is what it looks like:

Data highlighter example

It's basically a WYSIWYG where you select the date you'd like to mark up, select the correct "tag" (name, location, etc) and, once finished, publish straight to Google.

WordPress plugins

Plugins for inserting rich snippets into WordPress posts and pages are now available. Easy Schema, for example, inserts the code for you. All you need to know is whether you want the itemscope or itemprop attribute and what data type you need.

By filling in the following ...

Easy Schema plugin

... you get this code:

Easy Schema plugin

Or the Rich Contact Widget which has a very simple form to fill in with your contact details that are then converted to rich snippets.

Get a free 7-day trial

A subscription to Wordtracker's premium Keywords tool will help you to:

  • Generate thousands of relevant keywords to improve your organic and PPC search campaigns.
  • Optimize your website content by using the most popular keywords for your product and services.
  • Research online markets, find niche opportunities and exploit them before your competitors.

Take a free 7-day trial of Wordtracker’s Keywords tool 

Join the discussion

You can keep in contact with us on Google+, find us on Twitter. Facebook and LinkedIn