Schema & Microdata

What are schema’s and what is microdata? Most webmaster/developers have been using HTML tags to build website such as Heading tags. For instance a H1 or H2 tag tells a browser that these are heading 1 and heading 2. They would be coded something like this.

<h1>Something</h1><h2>Something</h2>

Now how do you know what is in that H1 tag? Well you would see in the browser a big Something. So you as a person can read this and tell what it might be but what about a search engine like Google, Yahoo, or Bing. Well lets take this example for instance what if inside the H1 tag was a img or a movie. What would the search engine see? Well they would see the same thing as if they were crawling the H1 Something, just text. Well microdata helps the search engine figure out what it is looking at and then it is able to categorize it. So if inside your H1 tag you have a movie it would be able to put that into movies and so on. So what microdata is, is the ability to help your webpage communicate with search engines in a way that they can understand. Now then Schema’s are templates created to make your webpages job communicating with search engines a bit easier.

How To Use Schema’s?

The way you use schema’s is actually quite simple. Let say we are talking about a movie, say Transformers – Dark Of The Moon. It is new at the time of this post. So your code may look something like this, when talking about this movie.

<h1>Transformers - Dark Of The Moon</h1>
<span><b>Release Date:</b> June 28, 2011</span>
<span><b>Director:</b> Michael Bay</span>
<span><b>Studio:</b> Paramount Pictures</span>

So that might be your code for the start of what you might talk about weather it is a review or just information about the movie. Now that looks all great everyone can read it and tell what it is but like what I said before the browser has no clue what it is. So when creating this you have to let the browser know what you are talking about with a schema. For this instance we will use the Movie schema. There are many different kinds of schema’s we could also use a reviews schema if this was to become a review. To start you have to tell the search engine where your schema is starting. That would be done like this.

<div itemscope itemtype="http://schema.org/Movie">
   <h1>Transformers - Dark Of The Moon</h1>
   <span><b>Release Date:</b> June 28, 2011</span>
   <span><b>Director:</b> Michael Bay</span>
   <span><b>Studio:</b> Paramount Pictures</span>
</div>

Explanation

So as you can see not much has changed. If you look close I added a container div tag. Inside that is itemscope and itemtype=”http://schema.org/Movie”. Well item scope tells the search engine that this is where a certain schema starts. Itemtype tells the search engine what type of schema you are using. Now you see what is inside the itemtype (http://schema.org/Movie) there are quite a few of these and more are being made all the time. If you go to http://schema.org/docs/schemas.html this can help explain the different types and you can see all of the schema’s.

What Is Missing?

Well now you have told the search engine what is inside the div container. Now you can tell the search engine what everything is inside the div. For instance we have a release date, title, director, and production company. Now each one of these can be given a itemprop which tells the search engine this is a property of the item. So with our example I will add the itemprop’s for the Movie Schema.

<div itemscope itemtype="http://schema.org/Movie">
   <h1 itemprop="name">Transformers - Dark Of The Moon</h1>
   <span><b>Release Date:</b> <span itemprop="datePublished">June 28, 2011</span></span>
   <span><b>Director:</b> <span itemprop="director">Michael Bay</span></span>
   <span><b>Studio:</b> <span itemprop="productionCompany">Paramount Pictures</span></span> 
</div>

Now we are really communicating with search engine’s. But what if we took this even further by telling the browser sub itemtype’s involved with this Movie Schema. For instance we have a person and an organization involved with this movie. So we can tell the search engine even more if we wanted to. That would look like this.

<div itemscope itemtype="http://schema.org/Movie">
   <h1 itemprop="name">Transformers - Dark Of The Moon</h1>
   <span><b>Release Date:</b> <span itemprop="datePublished">June 28, 2011</span></span>
   <span ><b>Director:</b> <span itemprop="director" itemscope itemtype="http://schema.org/People">Michael Bay</span></span>
   <span><b>Studio:</b> <span itemprop="productionCompany" itemscope itemtype="http://schema.org/Organization">Paramount Pictures</span></span> 
</div>

Well that is pretty much everything that we would need for this but as you can see this is not a full description of a movie or a review. If you go to http://schema.org you can get a ton more information and examples about schema’s.