Schema.org 101 - The Basics

The purpose of this post is to teach you how to read the documentation on schema.org. After reading this post I hope you'll be able to look at a page like schema.org/Person and instantly understand how to implement this microformat.

A Quick Intro To Schema.org

The purpose of schema.org is to make your HTML more meaningful. HTML already has lots of semantic tags like <address> or <figure>, but schema.org takes this to a whole new level. It lets you specify things like Person, Movie, Product, Restaurant, even drill down into specifics like FastFoodRestaurant right down to the type of cuisine it serves.

The point of adding all these semantics is not just to appease folks with OCD, it's to make finding and organizing things on the internet easier. Right now, Google has to parse the text and HTML content of your website to guess what it's about. If a website uses something like schema.org, it can tell google 'Hey, I'm a website about an indian restaurant' instead of Google having to come up with that conclusion on it's own.

your site with and without schema.org

This is why microdata like schema.org is highly valued by search engines like Google. In fact, you're probably reading this just because you want your webpage to show up with the fancy rich snippets in Google's search results. This rich snippet is Google rewarding you for making their job easier.

google rich snippets

If you want to learn how to implement these Google specific rich snippets, then head over to the Google Rich Snippet documentation. If however, you want to gain an understanding of how this stuff actually works, then keep reading.

It's all about the items

The schema.org microdata is all about items. Schema.org has hundreds of different items like Person, Restaurant, Movie, Actor, etc. An item is like a container. A container that contains more information about itself.

schema.org basic itemscope and itemtype

We can create an item by simply sticking an itemscope and itemtype attribute onto an HTML element. Adding the itemscope attribute to an element makes everything inside the element be about that item.

We also have to specify what type of item we're talking about. We do that by adding the itemtype attribute to the tag. The itemtype attribute needs a URL that points to the schema.org page of the item we want to talk about. So If we want to create a Person item, we simply create a div with the attributes itemscope and itemtype="schema.org/Person" like this:

<div itemscope itemtype="schema.org/Person">
    ...Everything inside me is about a person...
</div>

Now, everything inside that div will be about a Person item.

itemProps, bro

Once we've created an item, i.e. an element with the itemscope and itemtype attributes, we can go ahead and fill it up with stuff. What kind of stuff you ask? properties, item properties. All the possible properties of an item are listed on the itemtype pages, like schema.org/Person.

However, the implementation of these properties is where the schema.org documentation is less than entirely helpful.

Let's go to http://schema.org/Person for example. As of this writing the page looks something like the image below.

a screenshot of schema.org webpage

It's basically a table with three columns, 'Property' 'Expected Type' and 'Description'.

The property column lists all the properties our item can have. For example, if we want to give our Person a name, we can use the 'name' property. We can also use the 'additionalName', 'familyName' or 'givenName' properties if we so choose. As long as it's on the list, our Person can have it.

Where things get tricky is that second column, "Expected Type".

If the Expected Type is Text, URL or Date, then things are simple. If it's anything other than that, then things get complicated. In this article I'll be covering the first three datatypes, the remaining Expected Types will be covered in part 2 of this article, where we'll talk about nested items.

Expected Types: URLs, Text & Date.

To give our item some properties, like a name or a phone number, all we have to do is add the itemprop attribute to any HTML element inside our item.

The value of the itemprop="" attribute, (that is, the thing that goes inside the quotes) is the name of the property. So if we want to give our Person a phone number, we just add itemprop="telephone" to any HTML element inside our item.

Expected Type: Text

If the 'Expected Type' of the property is Text, then the property's value is just the text inside the HTML element, so in the example below, the person's phone number is "+1 (647) 111-0000".

schema.org expected type text
<span itemprop="telephone"> +1 (647) 111-0000 </span> 

Expected Type: URL

If the 'Expected Type' of the property is a URL, then the value of that property is either going to be the src or href attribute of that HTML element. This pretty much means that if the Expected Type is URL, then the HTML element that it has to be attached to is either an image or anchor tag.

schema.org expected type url
<a itemprop="url" href="example.com">
    Hey there, this is my cool website! 
</a>
<img itemprop="image" src="image.jpg" />

Expected Type: Date

If the 'Expected Type' of the property is Date, it's best to attach the attribute to an HTML5 <time> element. That let's us put the computer-readable ISO 8601 formatted time into the element's datetime attribute, while letting us format the text content of the element in a human readable way. Example:

schema.org expected type date
<time itemprop="birthdate" datetime="1972-07-18"> 
    The Eighteen of July, Nineteen Seventy Two 
<time> 

Putting It All Together

schema.org basic expected types
<div itemscope itemtype="schema.org/Person">
    <span itemprop="name">Chester Barnes</span>
    <span itemprop="telephone"> +1 (647) 111-0000 </span>
    <time itemprop="birthdate" datetime="1972-07-18"> 
        The Eighteen of July, Nineteen Seventy Two 
    <time>    
    <a itemprop="url" href="example.com">
        Hey there, this is my cool website!
    </a>
    <img itemprop="image" src="image.jpg" />
</div>

If you've come this far than you've covered the basics. you can get pretty far with the schema.org microdata just using the Text, URL and Date values in your markup. This however, just scratches the surface of what we can do with schema.org. In Part 2 of this series, we'll cover more advanced topics like nesting items, linking multiple items on a page, and using meta and link tags to specify property content.

So in the mean time, check out the Google Rich Snippet Testing Tool part of the Google Webmaster Tools suite. It let's you test your structured markup and shows you if you're schema.org markup is valid. If you don't believe me, try pasting in the code snippet above.