Answering "What is Schema?" for clients can be tricky since it's hidden in code, but that doesn't make it any less important. This Schema Microdata tutorial will answer that question for you and get you started on implementing it on your own website.
Structured microdata is becoming an important element of the web development puzzle, but with that reality comes a few questions. Which structure should I choose? How do I implement it? With those development concepts in mind, we'd first like to start this Schema microdata tutorial by explaining what is Schema and why does it matter.
Let's Start at the Top - What is Schema?
One of your metadata solutions (and the one we'd recommend) is specified by the talented team at Schema.org. This team is built of professionals from all the large search engines companies (Bing, Google, Yahoo! and Yandex) and functions exactly as it sounds. Anyone who has taken a Psych 101 class will recognize the word "Schema" and the implication makes sense if you think about it. In psychological terms a "Schema" is an organized pattern of thought and that's just what Schema Microdata aims to provide to search engines. A methodical structure for data to be organized (and therefor compiled) by search engines. In it's purest form, Microdata is a tool that allows searchable data to be embedded into your HTML. Now that we've basically answered "What is Schema", lets take a look at it's logic and benefits.
What Makes Schema Better then the Rest?
This is an important question because when you're dealing with massive amounts of content, nobody wants to pick an approach that will become outdated (and require more work) in the future. In the interest of picking a winner we've got to ask ourselves two questions - "Is Google using it?" and "Does the approach make sense?". Since the first question is a bit easier to answer, let's start there.
For those of you familiar with Google Webmaster tools, this screenshot will probably be familiar. If you're not, it simply states that Microdata is the preferred approach for including "rich snippets" for your content. In reality Google had a large part in constructing the approach, but let's do a little educated guess-work as to why they've chosen Microdata instead of Microformats, RDFa, Dublincore, OpenGraph, and all the rest.
When dealing with metadata there are a few important aspects to consider. Across the board standardization is certainly one, but since that is technically still up for debate, let's consider how it works and how easily it is to implement. In it's simplest sense - Microdata requires two things both of which are applied to existing content holders (usually spans and divs). The content type must be specified, then the exact content within must be declared. This is achieved by using itemscope and itemtype. This is a good approach if you think about the flexibility it allows. What if a new content type becomes popular? We've got people, articles, videos, ratings... but if a new element becomes popular, that can be folded into the mix by simply making a new "content type". In terms of longevity - that makes the Microdata approach pretty "future-proof". There are a lot of similarities between Microdata's approach and Microformat & RDFa, but in my opinion what it really takes aim at is OpenGraph. Anyone who has dealt with OpenGraph in the past is probably already familiar with one of it's biggest pitfalls... Needing your tags to be included in the head of a page.
Let's think of a simple example to illustrate this issue. For a given page, we want to include the image associated with the article. If we're using the OpenGraph approach this code would need to be included in the head of a page...
<meta property="og:image" content="/image/that-image.jpg" />Now this approach does explicitly state what image we want to use, but why does it need to be included in the head? The simple answer is... "Because it does", but the logic behind it is lacking and more importantly it creates a whole mess of issues for developers. This is beacause a lot of content (especially in CMS based sites) is created AFTER declaring the head. This means you generally need to load the page, then go back and insert the info into the head (yes - I'm aware that's a gross oversimplification... but it's basically true). The flexability that Schema allows, helps us avoid this issue and therefore allows you to be more specific and less "templated" in declaring your content.
What does Google do with this data? For now the impact is somewhat limited, but you're probably already familiar with the results. When searching, you may have run across some items that have ratings, structured breadcrumbs, images etc. (see thumbnail as an example). As you might imagine those results generally get more clicks and higher placement, but that's just the tip of the iceberg. Think about what you're providing in a macro sense (pardon the pun). You're making your data easier for search engines to read, parse, and understand. As all the large search engines continue to evolve, they'll rely more and more on having well structured data provided to them. How that data is delivered to the end user depends a bit on the content type (local businesses and videos obviously have different uses), but they DO all have uses and this is one trend you will not want to be on the wrong side of.
Convinced yet? Let's push this tutorial along and see how we can actually implement this tool.
A Brief Schema Microdata Tutorial
Most of the examples you'll run across online will show you a "Person" snippet, but since you're currently reading a blog (and you probably write one) let's look at an "Article" example. If you'd like to follow along, refer to Schema.org's documentation here - http://schema.org/Article.
As I mentioned before, two elements are needed in order to allow Schema Microdata to function properly. The first element is stating that we are building an "Article". This is done by marking the wrapping element (we'll use a div for this example) with the following...
<div itemscope itemtype="http://schema.org/Article"></div>
Of course you can add a class, but the important point here is the itemscope. This tells a search engine that everything inside this div is an article. Now inside, lets declare a title, author, and article body...
<span itemprop="name">Something Hilarious</span> <span itemprop="author">David Cross</span> <span itemprop="articleBody">This is all of the words that make up your article.</span>
Then put all together, your code would look like this...
<div itemscope itemtype="http://schema.org/Article"> <span itemprop="name">Something Hilarious</span> <span itemprop="author">David Cross</span> <span itemprop="articleBody">This is all of the words that make up your article.</span> </div>
That's not too tough is it? Simply state what is inside, then explicitly declare it. But this is a very simple example, lets take a look at some additional uses.
A Few Schema Examples
On this site we've decided to use Microdata to address a few areas - Breadcrumbs and author info for one. At the risk of being redundant, let's show what this exact webpage declares.
Breadcrumbs: Since most breadcrumbs are built dynamically, all you need to do is include the "itemscope itemtype="xxx" then declare what is a URL and what is a title. In our case, it looks like this...
<div class="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a itemprop="url" href="/">
<span itemprop="title">Home</span>
</a>
...The other crumbs...
<strong itemprop="title">What is Schema?</strong>
></div>Author: Since it's already inside a declared "Article", all I need to include is...
<h4 itemprop="author"> Matthew Haeck </h4>Hopefully those examples give you an example of the beautiful simplicity and power behind Microdata. I'd certainly recommend using http://schema.org/ as your primary source, but there are also a couple of tools you might find helpful.
Schema Tools and Resources
Google's Rich Snippet Tester: This testing tool allows you to check your Microdata validity and view the results just as Google would. https://developers.google.com/structured-data/testing-tool
Schema Person Creator: This webpage will show you how to create schema microdata for a specific individual and they also have creators for several other types. If all these words sound like a bunch of jibberish, this is probably the easiest way for you to get started. http://schema-creator.org/person.php
Live Microdata: This site allows you to test your microdata and code while you're typing. The resulting resource is both helpful and fun for testing your meta skills. http://foolip.org/microdatajs/live
Hopefully this Schema tutorial has addressed the question "What is Schema?", given you a solid understanding of how important it is (and will be), and shown you how to get started on your own. Feel free to shoot us any questions you may have, please share this post on your favorite social network, and of course - Thank you for stopping by!
