File Under: HTML5

How to Add HTML5 Microdata to Your Website

The Opera Dev blog has posted a nice overview of HTML5 microdata. Webmonkey took a look at microdata last year, showing you how to extend HTML by adding custom vocabularies to your pages. Since then microdata has moved from barely known oddity to mainstream tool, thanks in part to schema.org.

Schema.org is a partnership between the major search engines — Google, Bing and Yahoo — to define a common set of microdata schemas for the web. Thanks to the hundreds of pre-defined schemas on schema.org, adding microdata to your site is just a matter of dropping in the schema that fits your content.

The easiest way to understand microdata is to consider a common use case. Let’s say you want to list details about a business on your page — the name, address, telephone number and so on. To do that you’ll need to use some vocabulary in addition to HTML, since there is no <business> tag. Using microdata, you can create your own custom name/value pairs to define a vocabulary that describes a business listing.

For more details on how to do that see our earlier microdata overview. Also check out the Opera Dev blog for some more microdata examples.

Once you understand the ideas behind microdata, take a look at the various schemas listed at schema.org and add the appropriate markup to your website’s templates.

Another handy tool that’s popped up since we last looked at microdata is Philip Jägenstedt’s live microdata viewer, which is a great way to check your microdata code and even see what it looks like when extracted to JSON.

Also, keep in mind that it isn’t just search engine spiders that stand to benefit from microdata on your pages. The HTML5 spec also defines a set of DOM APIs for web browsers to read and manipulate microdata on your pages. At the moment, very few browser support microdata, but Opera recently released an experimental build with some microdata support. Look for other web browsers to begin adding microdata support in the near future.

The more information you can give the web, the more it can do with that information. Eventually, search engines could use microdata to find your friends on the web (like XRD and WebFinger) and browsers could use it to connect you with those friends no matter what flavor-of-the-month social site they might be using.

See Also: