1. Blog
  2. Design
  3. Concepts
  4. What is Schema?
What is Schema? - A Schema Microdata Tutorial

What is Schema? - A Schema Microdata Tutorial

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.

Schema Microdata Tutorial - Google Webmaster ScreenshotFor 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 because 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.

Schema Microdata Tutorial - Google Search Results Screenshot

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

HTML5 Logo Icon

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>

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>
...The other crumbs...
<strong itemprop="title">What is Schema?</strong>

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

In Closing...

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!

Related Articles
  • Facebooks Open Graph API & Protocol
    The Open Graph API underpins a huge piece of Facebook’s future viability. We’ll explain what is DublinCore, what is RDF, what is metadata & how will the Open Graph protocol impact the future of web development.
    Facebooks Open Graph API & Protocol
  • Free Site Ranking Utilities
    Optimizing SEO can be a complicated task. Free site ranking utilities provide experienced web developers and newcomers alike, a helpful way to track progress and identify potential shortfalls.
    Free Site Ranking Utilities
  • Mastering RSS - RSS Submission Sites & Tools
    Content distribution is an overlooked aspect of blogging, so we created this quick guide to mastering RSS. By identifying leading RSS feed formats, top RSS submission sites, and a few of the best RSS reader apps, we can make your audience even larger.
    Mastering RSS - RSS Submission Sites & Tools
  • The Source Code Resources for Web Pros
    We've compiled the source code resources for web development's top web professionals. All house fantastic snippets of various languages that make it easy to view, sort, and download website source code.
    The Source Code Resources for Web Pros
  • Web Security Basics - How To Secure Your Website
    This post covers all the web security basics. This includes how to secure your website, plug holes, and avoid common website security threats.
    Web Security Basics - How To Secure Your Website
Written By:
Matthew Haeck

Greetings, I'm the lead designer and resident full stack web developer at Haeck Design. A majority of my time is spent creating beautiful logos, websites, print design, & staying up to date on all the tricks of the web development trade. (Matthew Haeck Bio Page)

Haeck Design - Stamp Logo