<< Back to the blog

HTML5 Microdata




By @islamzatary

Microdata VS Microformat

Microformat: are small patterns of HTML to represent commonly published things like people, events, blog posts, reviews and tags in web pages.
Microdata: used to nest metadata within existing content on web pages for Search engines, web crawlers, and browsers can extract and process Microdata from a web page and use it to provide a richer browsing experience for users.
Microdata uses a supporting vocabulary to describe an item and name-value pairs to assign values to its properties.

Microdata

Microdata is an attempt to provide a simpler way of annotating HTML elements with machine-readable tags.
And Its very hard to create html element for each one like(person, event, ...), HTML cant please everything.
All Elements
And its designed to be integrated into HTML5 itself & its recommended from Google

Microdata

So How its work
Microdata annotates the DOM with scoped name/value pairs from custom vocabularies.
for example: there is a section & article as from reserved vocabulary, but its doesnt included elements to represent a person or event, so If you want to represent it on a web page, you’ll need to define your own vocabulary.
Microdata lets you do this.
Example

Microdata - DATA MODEL

For example, a Person vocabulary could define properties like name and photo.
The simplest way to think of microdata scoping is to think about the natural parent-child relationship of elements in the DOM.
Microdata is about applying additional semantics to data that’s already visible on your web page, so it’s a complement to HTML.

Microdata Values

audio => src
a => href
time => datetime
all => text

Microdata Vocabulary

Schema.org => Person, Event, Organization, Product, Review, Review-aggregate, Breadcrumb, Offer, Offer-aggregate.

Microdata Examples

1. Person: before and after, : Complete
2. Event: before and after

why microdata

There are two major classes of applications that consume HTML, and by extension, HTML5 microdata:
1. Web browsers: HTML5 defines a set of DOM APIs for extracting microdata items, properties, and property values from a web page. at this time no browser supports this API.
2. Search engines: Google supports microdata as part of their Rich Snippets program, When Google’s web crawler parses your page and finds microdata properties, it parses out those properties and stores them alongside the rest of the page data.

Microdata - Tools

Webmastertool
Microdata Generator
Another Generator

Sites Using Microdata:
http://ephesusbreeze.com/
http://europeanhairtransplant.se/
http://holidayplace.co.uk/about/customer-feedback

Microdata - Microdata Usage Statistics

Statistics

SEO

SEO Cheat Sheet

Microdata




Practical



Wrapping up







<< Back to the blog

by @islamzatary