18 Nov 2013

Schema-org Guide for Beginners (Everyone Can Understand!) + Schema Cheatsheet

With ever-changing search and social world, it’s hard to keep up. For many people, Schema.org is kind of over the head…

Having answered a couple of questions here and there, I decided to put what I know in writing. I hope it will help!

Let’s start with the easiest:


What is Schema.org?

Schema.org is NOT a markup language or a protocol; it’s the collection of Microdata markup vocabulary explained and organized on the official site. Put simply, Schema.org is the attempt of search engines to make structured markup easier to understand for website owners and search crawlers.

Schema.org is officially supported by Google, Bing, Yahoo! and Yandex. Google now names it the “preferred” method to structure your content if you want to have a rich snippet in search.


How do I use Schema.org?

Now, let’s take a look at this very basic, yet (hopefully) easy to understand document that explains how to use the structured markup.
Schema.org
Let’s also put it in words:

>>>Itemscope does nothing but shows a search bot that it’s a new section that is defined and described by the following two elements:

>>>Each Itemscope has a “type” (itemtype) that actually defines the section we are starting here.

Here’s the full list of currently registered types: here

>>>Itemprop actually describes each element of the itemtype (In other words, it is a property or one of the properties of a parent type. For example, itemtype = person and itemprop = author and / or spouse and /or male, etc…).


Putting the above into the existing web page code

As shown in the cheatsheet, Itemscope is usually put within <div></div> – because <div> is used to define the beginning and the end of the entity (thus its scope).

You can have a parent itemscope and a “child” itemscope embedded in it (for example, you describe a book and want to make sure “author” entity is placed within your “book” entity). This is what is controlled by <div>.

Note: You can always check if you correctly mapped up your schema scope hierarchy using Google’s Rich snippets tool where this relation / structure is usually reflected with references:
schema scope hierarchy
Itemprop may be put within any of the existing HTML tags (e.g. <h1>, <a>) or you can create new tags to put it in (e.g. <meta>, <span>, <time>, <link>)


What types of schema.org markups currently populate Rich Snippets?

Google officially supports these schema types:

Bing supports the same types plus breadcrumbs but Bing doesn’t show Rich Snippets as often as Google and mostly limits them to larger sites they have learned to understand (Linkedin, IMBD, etc)


What should we stay away from

  • Google instructs having most elements of your schema.org markup visible to the human being (which I assume means, apart from other things, use <meta> tag only when you absolutely have to)
  • (Related to the above) The contents of the page should reflect the schema.org markup (for example, if you show average rating in the markup, there should be actual rating ability on-page).
  • Google will NOT generate rich snippets for time-sensitive pages

Schema.org versus Rich Data protocols

Officially, Google supports ALL types types of structured data markup HOWEVER you better stick to one and use it properly:

You can use microformats, microdata, or RDFa to mark up your content. However, you should pick one markup standard and use it consistently across the page.

This makes sense (the cleaner and more consistent the code is, the better); I haven’t seen Google being confused by protocol mix-up yet (I often use RDFa as that’s a default of many WordPress themes and Schema in the mix and Google seems to pick Rich data up quite fine). Probably they will get smarter and stricter in the future though.

Schema.org versus social graph protocols

Don’t forget that we have two other types of rich data markup that was created by social giants:

  • Facebook: Open Graph (based on RDFa where most markup goes into <meta> tags in the header and thus remains invisible to the human being’s eye)
  • Twitter: Twitter card

There’s no official statement from Facebook or Twitter about their support of Schema.org, so if you want to please Facebook and Twitter, you have no other choice but use their own social graph protocols (which means you’ll have to kind of break Google’s recommendation).

So far people successfully use Schema.org and social graph protocols together on one page.

Schema.org versus rel=”author”

1. With /videoObject Schema (in most cases): your “by” authorship-powered credit will be moved to to the bottom of the snippet
With /videoObject Schema versus Authorship
[Sean Murray shared an example where Video rich data overtook Google Authorship while still preserving “By” and the circle numbers.

2. With /Review Schema: Authorship info appears above the snippet as “Review by”
Review schema versus Authorship

Finally, if you are planning to implement Schema.org on your site, make sure to read through examples in the official tutorial.

Good luck!

Comments

  1. twitter_SpookSEO December 1, 2013 at 4:42 PM

    Ultimate cheat sheet for someone who is fairly new on using structured markups. Although I would like to add that Google’s structured data tester shows how well its parsers recognize its presence. Schema.org documentation is biased to microdata- invented within Google by WHATWG HTML5 editor. Neat job!

  2. twitter_markskeller December 31, 2013 at 1:24 AM

    Great article here. Definitely good to know the basics of Schema.org, before applying any sort of semantic markup to your Website.

  3. Pijush Mitra February 26, 2014 at 7:28 AM

    Very useful information about schema.org. But I can’t change the date on it.

Leave a Reply