Why (And How) You Should Use HTML5 Microdata

Structured data is a way to communicate more information about your content to any machine or program capable of understanding the structure. It’s a way to give more semantic meaning to your content and data.

Html has a limited set of elements that we can use to give meaning to our content. Marking up some words as a list communicates something different than marking up those same words as a paragraph or blockquote.

Html5 adds more semantic elements, but we’re still looking at about 100 or so elements Microdata is one way to add to the vocabulary of html.

Structure

Why Structured Data is Important

As I said in the first sentence of this post, structured data allows you to communicate more about your content.

It’s a way to tell anyone listening that one piece of content is your business address and another piece of content is your name or that certain content is an event while something else is a product review.

A person reading the content can tell the difference by reading the content. Machines can’t. They need more. Structured data makes your content more parsable so programs can more easily find and extract information.

For example it allows a search engine to pull out your special offer and present it to searchers looking for a sale. It can help search engines better understand your content and help them place rich snippets under your page’s link in the results

Microdata is not the only type of structured data available to us. You’re likely familiar with some other types.

Microdata is part of the html5 spec though, and it currently has the backing of Google, Bing, and Yahoo and so has a good chance of becoming a standard we all support.

Micro photography of the Brilliant or San Diego Red type of tropical hibiscus

How to Add Microdata to Your Code

Microdata is really just adding some extra attributes to your html elements. Where microformats uses classes, microdata primarily uses 3 new attributes.

  • itemscope
  • itemprop
  • itemtype

A fourth attribute itemid may also be used in some cases.

Itemscope and Itemprop

At the highest level microdata consists of groups of name/value pairs. Groups are called items and each name/value pair is a property and corresponding value. These name/value pairs create a vocabulary for a type of data.

This is easiest to see with some examples.

1
2
3
<div itemscope>
  <p>My name is <span itemprop="name">Steve</span></p>
</div>

We create a new item by adding the itemscope attribute to an element. Our name/value pair will be included on a descendent of the itemscope element.

We wrap our value (in this case my name) with some html that includes the itemprop attribute. The value of itemprop is the name in our name/value pair.

Here name is the property name and Steve is the property value.

Items can be nested.

1
2
3
4
<div itemscope>
  <p>My name is <span itemprop="name">Steve</span></p>
  <p>I have a brother named <span itemprop="brother" itemscope> <span itemprop="name">David</span> </span>.</p>
</div>

And a single item can also have multiple properties with the same name and different values

1
2
3
4
5
6
7
8
<div itemscope>
  <p>My favorite colors are</p>
  <ul>
    <li itemprop="color">green</li>
    <li itemprop="color">maroon</li>
    <li itemprop="color">brown</li>
  </ul>
</div>

Letters in a word search game

Itemtypes Define the Vocabulary

Microdata, as you would expect, is much more useful when we agree about the meaning of different name/value pairs. We need standard ways to markup our data so everyone understands what it’s communicating.

To do this we give items a type through the itemtype attribute. The value of itemtype will be a url where the vocabulary (the itemprop names) for an item are defined.

  • itemtype=”http://www.example.com/person”
  • itemtype=”http://www.example.com/movie”

The content at the above urls would ideally define the properties for a person and movie respectively.

An item can only have one itemtype and the itemtype attribute gets added to the same element as the itemscope attribute.

1
2
3
<div itemscope itemtype="http://www.example.com/person">
  <p>My name is <span itemprop="name">Steve</span></p>
</div>

Certain items might have a global identifier. Think about a book with an isbn number. Different books can have the same title or the same author, but each has a single unique isbn number to identify it. No two books will have the same isbn number.

Microdata reflects this with the itemid attribute as seen below in an example from the W3C.

1
2
3
4
5
6
7
8
9
10
<dl itemscope
      itemtype="http://vocab.example.net/book"
      itemid="urn:isbn:0-330-34032-8">
    <dt>Title
    <dd itemprop="title">The Reality Dysfunction
    <dt>Author
    <dd itemprop="author">Peter F. Hamilton
    <dt>Publication date
    <dd><time itemprop="pubdate" datetime="1996-01-26">26 January 1996</time>
</dl>

An itemid can only be used if an itemtype is specified.

Screenshot from the schema.org website

Schema.org

Schema.org is a collection of itemtypes or schemas. The reason it’s making news is because it has the backing of the 3 major search engines.

When you consider that an important part of seo is helping search engines better understand your content, it makes a lot of sense to take microdata and schema.org seriously.

Google is still supporting both microformats and RDFa, but they do note that microdata has a larger vocabulary. The schema.org FAQ offers this as well:

If you have already done markup and it is already being used by Google, Microsoft, or Yahoo!, the markup format will continue to be supported. Changing to the new markup format could be helpful over time because you will be switching to a standard that is accepted across all three companies, but you don’t have to do it.

In other words you don’t need to change anything if you’re already using another format of structured data, but know that microdata will likely have wider support

Schema.org lists itemptypes (schemas) for a large variety of things.

  • Creative works (book, movie, recipe, article, blog, music recording)
  • Event (business event, sale event, social event)
  • Organization (corporation, localbusiness)
  • Person
  • Place
  • Product
  • Offer
  • Review

The above is not a complete list. There are many more schemas, but hopefully you can see how many in the list above would be useful.

Odds are your next site will contain content that could easily be marked up with the properties of one or more schema.

Authorship

You might have recently seen some articles about rel=”author” which is Google’s way of displaying author information in search results and to help authors get credit for their work.

This isn’t quite microdata, however schema.org does provide for authorship in a variety of the defined itemtypes and Google will interpret the microformat author information similarly to the rel=”author” author.

Here are a few other articles with more information about marking up your content with rel=”author”

Structure

Summary

Hopefully this introduction to microdata has helped you see how valuable it can be. Anything that allows us to communicate more and in more ways is something all web designers and developers should pay attention to.

While we already have some other ways to structure data and communicate meta information, microdata looks like it will be particularly important at least where search engines are concerned.

Adding microdata to your html isn’t hard to understand or do. Perhaps the most difficult part will be remembering what you can markup and what name/value pairs are part of any given itemtype vocabulary.

Fortunately schema.org will be there as a resource.

Have you started using microdata at all? Do you prefer another method of structuring data like microformats or RDFa?

Download a free sample from my book, Design Fundamentals.

41 comments

  1. Very cool. I could see this being useful for writing jQuery plugins: You could add special information certain HTML elements, like a list of products could have prices and ratings. Then a jQuery plugin could read this data to add interactivity, like the ability to sort products by price or rating. I think that’s a solid way to interactivity, all while following HTML semantic standards and adding SEO benefits.

    • I can see a lot of uses for adding microdata to html. Naturally it’s more useful if there are things out there that can read and understand the structure, but with the backing of the major search engines we at least know they can read and understand.

      Before looking through Schema.org I hadn’t realized how many different things could be marked up with microdata. It’s probably overkill to use every bit you can, but it does make sense to sort prices and ratings like you said.

  2. A very nice article, thanks alot Steven!
    I have a question that suppose i have used microformat on a site and now i want to markup with the microdata as well on the same site. Is it allowed to implement both formats on a site and even on a single page with different sections.
    Also can any1 share a link for site which uses schema.org markup (microdata).
    Thanks!

    • Thanks Lucky. I’m not really sure, but I would think you could use both since microformats are using classes and microdata is using attributes. Machines reading one probably aren’t reading the other and would presumably ignore the other as well.

      You should be able to mix and match as much as you want.

      There probably aren’t a lot of sites using this yet as it’s still relatively new. Schema.org is only a few months(?) old.

      I did find this library of microdata at GitHub that lists some sites using the library.

  3. Premise seems correct Stephen. Surely Google would appreciate having website content signposted by webmasters….however, they always seem a bit cool about the whole idea.

    If you were optimizing for local listings, are there any particular formats you would espouse?

    • Google is backing the use of microdata so they’re probably hoping you’ll use it.

      For local listings I would think any geographic microdata would make sense. Contact information, especially a physical location. After that it will depend on the particular content on the site.

  4. Great article…you are on bookmark bar for sure…so glad I ran across this..should demystify the need to consistent structure of content…if anything for re-purposing…keep up the great work

  5. i’ve been using it on a few sites. it’s still too early to determine whether there is any SEO benefit at present but i’m sure as we head into the semantic web that as the quantity of information increases they will have a part to play in ordering data and making what we’re looking for easier to find.

    • Thanks for the info Peter. Yeah, it probably is too soon to measure results and it’s not like the expectation is for microformats to move a page 4 result to page 1. I would think the benefit will be more subtle and harder to measure.

      I’m sure too there will be an effect in time.

  6. Waaaaaay to hard to use on WordPress. The formatting is removed when you switch to visual view. Not very practical atm and needs plugins to dumb down the tedious process of hand coding in.

    • If your working with html code you shouldn’t be switching to visual view. Most of the places you’d add microdata would be to the theme anyway so there shouldn’t be much need to use microdata in the WordPress editor.

      For those times you do want to use it for a specific piece of content just stick to the html editor for that post or page.

      Not everything needs a plugin or needs to be dumbed down. A typical WordPress end user probably isn’t going to be adding microdata. Designers and developers are the ones who’ll more likely add it.

    • Have you noticed any difference as far as search engines go? More traffic? Showing up on different results?

      I think microdata will be a good way forward too given the backing of the search engines.

  7. Ummm im not too sure about the SEO part yet to be fair. We are a large Asian Directory so Micro data seems ideal. The main word for us is “Asian Directory” so the site is optimised for this. We use to appear on page 2 on Google before Microdata, since Microdata has been implemented we have gone down to page 3…. and im not sure why?

    Any ideas why this maybe?

    • It does make sense for you to use. Hard to know the reason why you dropped for the phrase. There could be so many reasons. Is the site the one you linked to with your name here?

      I would think for the site you describe you’d be able to use some of the microdata describing products and if you offer product reviews those would be good to use as well.

  8. Hi, yes the above URL is the one I have implemented it on, so for example if you do a search for “wedding venue” on the site it will list organisations that offer this facility.

    I have used the Organisation and Address elements from Schema.org. Do you think I should use the product element instead?

    Im still stumped about Google as the Microdata change is the only thing I have done to the site.

    The site also uses the header, footer, input types tags in html5. Is there anything else I can do to improve the site?

    • I wouldn’t think a produce would make sense, but I would certainly use review for any of the reviews you have.

      It’s hard to know why your site would lose search traffic without taking an in-depth look. There could be so many reasons. Unless you now have less pages indexed than before indicated some kind of error in your code, I would think adding microdata would hurt in any way. It might not help a lot, but I couldn’t see it hurting.

      How long were you appearing on page 2 for the term? Was it a long time or a short time?

      It could be that some links back to your site were removed or a page worth of competitors did a lot of optimization.

  9. I have used the review nodes aswell from schema.org.

    I have been on page 2 of Google for over 3 months. I cant see any major competitor changes, maybe Google is just taking its time in reviewing all the pages on my site.

    I will keep my fingers crossed

  10. I’m a newbie to microdata. On reading this article got a clear idea about microdata and it’s advantages of using it in web sites. I’m going to implement this on our site rightnow. Thanks for sharing the useful info.

  11. With the Big 3 backing microdata, it shows that they’re taking this seriously and they want webmasters to fully adopt it. From my limited perspective there was a lot of noise on RDFa vs. microformats, hindering their acceptance with the masses.

    Even if this version isn’t fully adopted, it has at least turned a lot of people on to semantic markup and hopefully peeled back the curtain a little bit.

    • Good point. At the least it is helping make more people aware of semantic markup.

      I do think with the backing of the search engines microdata is going to stick. It’s possible not everyone will use, but if it can be shown that using microdata helps generate more search traffic people will pay attention.

  12. How will micro-data impact Browser implementer’s(Firefox, IE, Chrome etc)?.
    From what I have understood, micro-data is useful for Content Authors and Search Engines. Browsers have no role to play. If supported, some extension(using jQuery etc) can use the micro-data in the page and provide some alternative way to present the data(as mentioned by gary in post 1)

    • It’s up to the browser makers I suppose. Ultimately microdata provides semantics that communicate more to anything capable of reading them. It’s up to the machines and devices to decide how to make use of the information.

      Browsers already make use of contact information, usually through microformats. If enough people start using microdata I would think browsers and other applications would make more use of them as well. The impetus to use microdata may be search engines, but in time and assuming wider use, I think others will read more microdata too.

        • Blaine, I don’t know anyone who specializes in microdata, but most any developer should know how to add them. I assume your interest has to do with seo as well so I’ll amend that to any developer who also understands seo.

          If you want to send me an email and fill me in we could talk. I should be able to handle whatever you need done.

          • Steven…thanks…we’re looking for some one to help us with what code we need to put on our “customer comments” page…so that google knows those are reviews.

          • There’s a section for user comments on the schema.org site.

            Check the bottom of the page. It looks like you can mark up the commenter as a person and an organization. Their comment could be set up as a creative work.

            There’s also a section for reviews. Again check the bottom of the page.

            You can add markup to the thing being reviewed and also any rating that’s left.

    • Mostly search engines at the moment. All this behind the scenes code is for the benefit of any machines capable of gathering meaning from that code. The major search engines are all behind microdata.

      Think of it like any language. Say you’re fluent in English, French, and German. Which you use depends on your audience. If you’re in Paris you’re probably going to speak in French. I think it’s the same thing with machine languages. Think about who you’re trying to communicate with and what languages they speak.

  13. Steven:

    I’ve spent the last couple of days trying to get my arms around the various “micro” formats and your introduction and explanation of usage is the most accessible I’ve found. Thanks for offering the clarity I need to actually implement…

  14. Damn this is hurting my head more than it should do lol.

    I can’t figure out if we can make our own, you know when it has things like:

    itemtype=”http://www.example.com/person”

    does that have to be supported or can I make “person” be anything?

    For example, I want to add a SERVICE or an ARTICLE…

    Product is the closest to service I can find but I want to be as specific as possible. I’m assuming it has to be supported in order to use and you can’t just make things up lol?

    Also, if that is the case and it’s not got a section for it, what is the solution, just mark things up without grouping it?

    Sorry, I feel like a total noob here, my first time looking into this and it’s a little hard to get used to but I am sure I will get there!

    • Hope I didn’t contribute to the headache Kev. :)

      At this point I would probably just go with Schema.org given all the support the search engines are putting behind it. The thing with all this structured data is it’s really only useful if something else is reading it and at least you know they’re reading it.

      I haven’t used it as much as I expected I would, but when I do I do my best to match one of the existing schemas with what I’m trying to markup. If there’s not a good match I don’t worry too much about it.

      If you search “service” at schema.org this page comes up for professional service. That might work for you. There’s a schema for article as well.

      No need to apologize. To be honest this stuff isn’t as intuitive as I’d like to be.

      • Yeh I read all of schema.org and though to myself, sure this is easy, makes sense. Followed it until the end then I hadn’t a clue how to implement it into my current code haha.

        It was a long day though so I will go back to it with a fresh head soon.

        Thank you for the links. I’ll figure it out. I pretty much know how to do it, it’s just I had no way of knowing what was allowed and wasn’t but I’ve found there is a page to test for this in google webmaster tools :)

Leave a Reply

Your email address will not be published.

css.php