All posts tagged ‘Microdata’

File Under: HTML Celebrates 7 Years With Microformats 2.0 recently celebrated its seventh anniversary.

In case you’ve been too busy snowboarding the Alps to keep up, Microformats are simple, but incredibly useful, little HTML extensions that give your website superpowers.

You might, for example, use Microformats to expand your basic HTML markup to denote events, blog posts, reviews or address book entries. The extra markup makes your site more meaningful to both humans and search-engine spiders.

Seven years ago when it was first dreamed up there was nothing quite like Microformats. Now there are several other ways to add semantic meaning to your code — like HTML5 microdata or RDFa (if you’re a masochist) — but has managed to outlast numerous other attempts at the same idea, even attempts from big companies like Google.

Much of Microformats’ success lies with its very simple founding principle — humans first, machines second. And success it has had. According to the Web Data Commons, as of 2012, 70 percent of websites using structured data are using Microformats to structure it.

That doesn’t mean the community-driven effort is resting on its heels though. In fact Microformats sees its challengers as opportunities to expand — think of Microformats as the Borg of HTML metadata. As founder Tantek Çelik writes on the Microformats blog, “we should document the alternatives as they emerge, do our best to answer the questions posed, and reach out to other communities to find areas of overlap to collaborate. With greater collaboration comes greater interoperability.”

To help get the ball rolling again, Microformats 2 is now ready for testing. The updated version has been in development for several years now and builds on lessons learned from both Microformats and alternatives like microdata and RDFa. Çelik says that Microformats 2.0 is ready for trying out in real world experiments, and points out several real-world examples, including, natch, the Microformats blog.

If you’ve never used Microformats to markup a street address, address book cards or calendar events, head on over to and read through the docs. Also be sure to check out our tutorial on using Microformats in HTML5 (some of the syntax has changed slightly with Microformats 2, but everything is backwards compatible).

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 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, 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 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:

File Under: HTML5, Programming

Google Doubles Down on ‘Microdata’ With New Recipe Search

Google has rolled out a new recipe search tool to help you find delicious recipes on the web. Our friends at Epicenter have more details on Google’s announcement, but the real news for web developers is that Google’s recipe search is built almost entirely off microdata.

As we’ve pointed out before, microdata — little snippets of code that offer search engines additional information about your content — is one of the best-kept secrets in HTML5. Google’s recipe search tool not only highlights just how useful microdata is, it also may give developers the extra incentive they need to start using more microdata on the web.

While Google makes no guarantee that using microdata will raise your website’s standing in search results, the company is clearly using microdata when it finds it.

Google’s microdata support is format-agnostic, which means it can read Microdata, Microformats and RDFa. Google collectively refers to the three as “rich snippets.”

All three formats work in similar ways, extending HTML by adding custom vocabularies to your pages. The main difference between the three is the specific syntax used.

Which one should you use? In most cases one is not better than the other, just different. Because much of the inspiration behind HTML5 Microdata came from the efforts of the Microformats community, the two are very similar. The third option, RDFa, is somewhat more complex and in many situations it may be more difficult to implement.

If you’d like to add HTML5 Microdata to your site, check out our article on Microdata. Technically the Microdata spec has been removed from the W3C’s draft version of HTML5 and is now a standalone spec. Like HTML5, the W3C considers the Microdata spec to be a draft, which means it could change in the future. If that makes you nervous, Microformats, which have been around quite a bit longer and are more widely used, may be more to your liking. For more on adding Microformats to your site check out our write up on how to mix HTML5 and Microformats.

See Also:

Microdata: HTML5′s Best-Kept Secret

Given the amount of industry noise about native video and scripted animations, you’d be forgiven if you had never heard of the new microdata specification included in HTML5.

Similar to outside efforts like Microformats, HTML5′s microdata offers a way of extend HTML by adding custom vocabularies to your pages.

The easiest way to understand it is to consider a common use case. Let’s say you want 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.

When a search engine spider comes along, it will know that not only is your data a business listing, but it can discover the address, the phone number, or even the precise geo-coordinates if you want to include them.

Given that HTML5 is still a draft at this point, why bother?

Actually, despite its lack of publicity and HTML5′s still-incomplete status, microdata is already being used by Google, which has started adding information gleaned from microdata markup to its search result snippets.

Continue Reading “Microdata: HTML5′s Best-Kept Secret” »