LearnUsing Microdata to Markup Structured Data in Your Web Pages

The websites that we build are full of data about people, places, products and more. As designers we work very hard to present data to our users in an easily comprehensible and aesthetically pleasing way. However what we often don’t do is consider how easily our non-human counterparts (computers) can read and make sense of the data within our web pages. This is where using microdata can help be helpful.

Microdata aims to popularize a standardized way of marking up the structured data within our web pages so that it can be easily parsed by computer programs. This is acheived through the use of a few new HTML attributes and whole selection of schemas. These schemas describe all the properties that an item can have. The item here being defined as a thing such as a person, place, event or product.

In this blog post you are going to learn how to use the new microdata attributes as well as taking a look at some popular schemas from Schema.org.

Introducing Schema.org

It is all well and good spending time marking up the data within our web pages but if everyone is not using a standardized set of schemas we haven’t solved the problem of making this data more accessible. This is where Schema.org comes in.

Schema.org is a collaborative project between Bing, Google, Yahoo! and Yandex that aims to outline a set of standardized schemas that can be used by web developers in order to overcome the problem outlined above. You don’t necessarily have to use these schemas but I would strongly recommend that you do.

---

Note: It is also possible to create your own schemas. This is out of the scope of this article but if you are interested I would recommend reading this HTML5 doctor article.

---

Microdata Attributes

Before we get stuck into schemas you first need to learn about the new attributes that are used to markup the data within your web pages.

itemscope – This attribute should be placed on a HTML element that contains all of the data relating to an item. You do not need to specify a value for this attribute.

<div itemscope>...</div>

itemtype – The itemtype attribute is used to markup what an item is. The value of this attribute should contain a URL to a schema that defines all of the properties that the item can have.

<div itemscope itemtype="http://schema.org/Person">...</div>

itemprop – This attribute is used to markup an item property. The value of this attribute should contain the name of the property. The contents of the element will be used as the value for the property. In the case that an itemprop attribute is used on a link, the value of the href attribute will be used. For <img> elements, the value of the src attribute is used.

<span itemprop="name">Matt West</span>

itemid – This attribute can be used to specify a unique ID for the item. This could be something like the ISBN for a book. A computer program may use this ID to determine whether multiple microdata items refer to the same physical object.

<div itemscope itemtype="http://schema.org/Book" itemid="urn:isbn:978-1-907828-03-4">
  ...
</div>

itemref – The itemref attribute allows you to add properties that are located outside of the scoped item element. This achieved by adding a standard element id attribute to the element containing the property data, and then specifying this ID in the itemref attribute on the main HTML element that contains your item. An example of this usage can be found below.

<span id="my-name" itemprop="name">Matt West</span>

<div itemscope itemtype="http://schema.org/Person" itemref="my-name">
  ...
</div>

Notice that the element outside of the item scope still uses an itemprop attribute.

Now that you understand the attributes involved in marking up your structured data lets take a look at some commonly used schemas.

LocalBusiness

The first schema that you are going to look at is for marking up data about local businesses. This schema contains many properties, some which you will use more often than others. The most important properties that you will want to make sure that you cover are: name, description, address, telephone, email and url. You can find a full list of the properties in this schema here.

Here is some markup that uses the LocalBusiness schema.

<div itemscope itemtype="http://schema.org/LocalBusiness">
  <p itemprop="name">Developer City</p>
  <div>
    <img itemprop="logo" src="logo.png" alt="Developer City Logo">
  </div>
  <p itemprop="description">
    Web Design and Development Services.
  </p>
  <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
    <span itemprop="streetAddress">Seatons Business Centre, High Street</span>
    <span itemprop="addressLocality">Guilsborough</span>
    <span itemprop="addressRegion">Northamptonshire</span>
    <span itemprop="postalCode">NN6 8PU</span>
  </div>
  <p>
    Tel: <span itemprop="telephone">01604 749014</span>
  </p>
  <p>
    Email: <a href="mailto:matt.west@developercity.co.uk" itemprop="email">matt.west@developercity.co.uk</a>
  </p>
  <p>
    Web: <a href="http://developercity.co.uk" itemprop="url">http://developercity.co.uk</a>
  </p>
</div>

Here is how this markup would be interpretted by a computer program. Notice how the address is parsed as a linked item as we have used the PostalAddress schema to markup the address data.

Item 
  type: http://schema.org/localbusiness
  property: 
    name:         Developer City
    logo:         http://www.example.com/logo.png
    description:  Web Design and Development Services.
    address:      Item 1
    telephone:    01604 749014
    email:        matt.west@developercity.co.uk
    url:          http://developercity.co.uk

Item 1
  type: http://schema.org/postaladdress
  property: 
    streetaddress:    Seatons Business Centre, High Street
    addresslocality:  Guilsborough
    addressregion:    Northamptonshire
    postalcode:       NN6 8PU

---

Note: Developers at Google have developed a handy tool for testing out your microdata markup: Google Rich Snippets Tool.

---

Person

Possible applications for the Person schema would include user profile pages and social networking sites. This schema also has an exhaustive list of potential properties, the most prominent being: name, description, image, url, additionalName (middle name), address, birthDate, deathDate, email, givenName (first name), familyName (last name), telephone and jobTitle.

Check out the full schema for more properties.

The markup below shows how you could use the Person schema to markup data in your web pages.

<div itemscope itemtype="http://schema.org/Person">
  <p>
    <span itemprop="name"><span itemprop="givenName">Matt</span> <span itemprop="familyName">West</span></span>
  </p>
  <img itemprop="image" src="mattwest.png" alt="A picture of Matt West">
  <p>
    DOB: <span itemprop="birthDate">04/06/1992</span>
  </p>
  <p>
    Web: <a href="http://matt-west.com" itemprop="url">http://matt-west.com</a>
  </p>
  <p>
    Telephone: <span itemprop="telephone">01604 749014</span>
  </p>
  <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
    <span itemprop="streetAddress">Seatons Business Centre, High Street</span>
    <span itemprop="addressLocality">Guilsborough</span>
    <span itemprop="addressRegion">Northamptonshire</span>
    <span itemprop="postalCode">NN6 8PU</span>
  </div>
</div>

Try using the Google Rich Snippets Tool to see how this markup could be interpretted by a computer program. Simply copy and paste the markup above into the textarea.

Product

The final schema that you are going to look at is used for marking up product data. This can be really useful when building eCommerce websites.

The most commonly used properties in the Product schema are: name, description, image, url, model, color, brand and productID. You can find a full list here.

An example product can be found below.

<div itemscope itemtype="http://schema.org/Product">
  <h1 itemprop="name">Hovercar 5000</h1>
  <img itemprop="image" src="hovercar.png" alt="Hovercar 5000">
  <p itemprop="description">
    Arrive at your destination in style with the new environmentally friendly Hovercar 5000.
  </p>
  <p>
    Brand: <span itemprop="brand">ACME Hovercars</span>
  </p>
  <p>
    Model: <span itemprop="model">5000B</span>
  </p>
  <p>
    Color: <span itemprop="color">Silver</span>
  </p>
  <p>
    Product ID: <span itemprop="productID">HV5000B</span>
  </p>
</div>

---

Note: You can find a full list of schemas here.

---

Final Thoughts on Microdata

Using microdata correctly will help to make the data in your web pages more accessible to computer programs (like those used by search engines to analyze your web pages).

Whilst I think that microdata does have an important place in a web developers toolkit, it is worth noting that using microdata can add a considerable amount of markup to your web pages. Take a look at all those extra <span> elements that were needed to help markup the data in the examples above. All this extra markup can have an impact on the readability of your code; making it harder to understand for people that might be working on a project with you. To minimise this problem I would recommend that you only use microdata to markup the most important data on the page.

Are you using microdata in your projects? Let us know in the comments.

Useful Links

• Schema.org
• Google Rich Snippets Tool
• Writing Semantic Microformats & Microdata in HTML Markup

• code
• html5
• learn programming
• make a website
• microdata
• schema.org