Category Archives: Microdata

All information about microdata, html5, schema.org and the Microdata Project.

What is microdata? | Why is Microdata Important?

What is microdata?

Microdata is a new HTML5 specification that allows machine-readable data to be embedded in HTML documents. In other words, microdata helps computers understand what the contents of your web pages are saying.

Actual microdata from this page via Microdata Tester

Local Business Microdata Example

Why is Microdata Important?

Microdata makes web pages more easily parseable and understandable by computers so that they can use the information on your pages to create more robust information. While a web browser can display a web page with text on it, the browser has no way of knowing what the different parts of the page are. This means that the browser cannot provide any help to the customer.

For example: if a customer comes to your event page and reads about the events that you are sponsoring, if they want to attend an event they have to manually enter the event data into their calendar. If you are ambitious you might add scripts to help them add the data, but the browser has no way of knowing that “December 16, 2018” is the date of a special event and so if you haven’t added scripts and links to that date, the browser won’t. Note, some mobile browsers do have the ability to detect dates and point them to the calendar without special markup, but the reader would still have to enter in the event details themselves.

With microdata, the events could be marked up to indicate the event name, time, date, and location. The browser or other microdata-enabled device would be able to use that data to create a calendar entry for the customer. All the customer would have to do is click a link to add the entry, and all you would have to do is mark up that entry with microdata.

But microdata can be used by more than just web browsers. Search engine companies like Bing, Google, and Yahoo! are using microdata to show rich snippets in their search results for things like events, recipes, and reviews. When you mark up your HTML with microdata, you give the search engines more information about that HTML as well and they can use that information to make your reviews, recipes, and other articles more interesting and enticing to the searchers, getting them to click on your site results.

How to Add Microdata to Your Pages

The microdata specification adds five new attributes to HTML5:

itemprop—This defines the names of the fields in your microdata.

itemscope—This indicates that the element is part of a group of microdata.

itemref—This is a list of element IDs that are associated with one another, even if they are not in the same itemscope.

itemtype—This is the URL that provides the context for the microdata.

itemid—This is a global identifier that is recognized outside the website, such as a ISBN number for a book.

You use these attributes along with microformat vocabularies to define the content of your pages. Some of the most commonly used microformat vocabularies include:

hCalendar—To mark up events and add them to calendars.

hCard—To mark up people and companies and add them to address books.

hRecipe—To mark up food recipes.

hReview—To mark up reviews of products, services, events, and businesses.

Once you know what you want to mark up with microdata, you should find the vocabulary that matches and add the appropriate attributes to your HTML. For example, here is how you would change an event notification to add hCalendar information to it with microdata. Here is the basic HTML:

Upcoming Events

Jennifer’s Birthday Party

When: December 16, 2018 from 6pm until midnight

Where: Jenn’s house

Why: Because Jenn wants to party!

First you need to define the itemtype in the ARTICLE element surrounding the entire event. In this case, that is the hCalendar type at https://microformats.org/profile/hcalendar. So you add itemtype=”https://microformats.org/profile/hcalendar” and itemscope to the ARTICLE element:

Then you should define the event itself with the itemprop attribute set to vevent on the article:

Give the event a name by adding the summary attribute to the article heading:

Jennifer’s Birthday Party

You may have noticed that the example HTML uses the DATA element to define the dates. You can then add the dtstart and dtend properties to those elements:

You will need to add a SPAN element around the location so that you can then add the location attribute. You might also want to define the location as an hCard record so that they can look it up on a mapping service, but I didn’t do that in this example.

And with that, your event is marked up in microdata.

Here is the finished HTML:

Upcoming Events

Jennifer’s Birthday Party

When: December 16, 2018 from 6pm until midnight

Where: Jenn’s house

Why: Because Jenn wants to party!

I hope this answers some questions on what is microdata.

Be sure to follow our other explanations as they come available.