Menu

Using microdata in HTML5

Schema.org provides a collection of shared vocabularies webmasters can use to mark up their pages in ways that can be understood by the major search engines: Google, Microsoft, Yandex and Yahoo!

Microdata is a set of tags, introduced with HTML5, that allows you to do this. By adding additional tags to the HTML you can help search engines and other applications better understand your content and display it in a useful, relevant way.

 

1. itemscope and itemtype

<div itemscope itemtype="http://schema.org/TVSeries" class="item-wrap">

</div>

By adding itemscope, you are specifying that the HTML contained in the <div>...</div> block is about a particular item.

But it’s not all that helpful to specify that there is an item being discussed without specifying what kind of an item it is. You can specify the type of item using the itemtype attribute immediately after the itemscope.

This specifies that the item contained in the div is in fact a Movie, as defined in the schema.org type hierarchy. Item types are provided as URLs, in this case http://schema.org/TVSeries.

 

2. itemprop

<div itemscope itemtype="http://schema.org/TVSeries">
 <span itemprop="name">True Detective</span> is directed by
 <div  itemprop="author" itemscope itemtype="http://schema.org/Person">
   <span itemprop="name">Nic Pizzolatto</span>
 </div>
 Starring:
 <div itemprop="actor" itemscope itemtype="http://schema.org/Person">
   <span itemprop="name">Matthew McConaughey</span>
 </div>
 <div itemprop="actor" itemscope itemtype="http://schema.org/Person">
   <span itemprop="name">Woody Harrelson</span>
 </div>
 <div itemprop="season" itemscope itemtype="http://schema.org/TVSeason">
   <span itemprop="name">Season 1</span> -
   <meta itemprop="numberOfEpisodes" content="8"/>
   <meta itemprop="datePublished" content="2014-01-13">Jan 13, 2014
 </div>
 <div itemprop="season" itemscope itemtype="http://schema.org/TVSeason">
   <span itemprop="name">Season 2</span> -
   <meta itemprop="numberOfEpisodes" content="8"/>
   <meta itemprop="datePublished" content="2015-06-21">Jun 21, 2015
   <div itemprop="episode" itemscope itemtype="http://schema.org/TVEpisode">
     <span itemprop="name">Episode #2.1</span> -
     <meta itemprop="episodeNumber" content="1"/>
   </div>
 </div>
</div>

 

3. schema.org types and properties

Schema.org describes a variety of item types, each of which has its own set of properties that can be used to describe the item.

You can see a full list of all item types, listed on a single page.

For the full documentation and better explanation, please visit the http://schema.org/docs/gs.html.

Have something on your mind?