The content here is over 6 years old. It's kept here for archival purposes and because Cool URIs don't change, but any information provided is probably woefully out-of-date, so reader discretion is advised.
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.
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.
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
Actor, etc. An item is like a container. A container that contains more information about itself.
We can create an item by simply sticking an
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
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
Once we’ve created an item, i.e. an element with the
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.
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.jpg alt: schema.org expected type text class: max-width-image)
<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
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.
<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:
<time itemprop="birthdate" datetime="1972-07-18"> The Eighteen of July, Nineteen Seventy Two <time>
Putting It All Together#
<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.