Using Microdata –
a HTML specification to nest metadata within existing content. (See Schema documentation.)
Microdata gives additional context to the content. For example, tagging ‘Avatar’ with ‘movie’ to refer to the James Cameron movie disambiguates it from other usages.
itemscope
Avatar
Director: James Cameron (born August 16, 1954) Science fiction Trailer
use the itemscope element to indicate that that
is about an item. itemtype indicates what kind of item it is. Go to Schema.org to check out the different keywords.
itemprop
Movies have additional schema properties you can add to your content. (Refer here)
itemprop="name" //Avataritemprop="director" //James Cameron (born August 16, 1954)
itemprop="genre" //Science fiction
itemprop="trailer" //Trailer
Notice the use of <span> to add itemprop for ‘director’. <span> tags don’t affect the display properties, and can be conveniently used with itemprop.
Embedded items
You can nest an item within an item. For instance, we can specify that ‘director’ is an item with type ‘person’ with its associated properties.
itemprop="director" itemscope itemtype="http://schema.org/Person">
Director: James Cameron (born itemprop="birthDate">August 16, 1954)
You simply add the itemscope itemtype after itemprop in the html tag. Notice that the item is contained within a
.
Inheritance
The most generic item is ‘thing’, which has itemprop ‘name’, ‘description’, ‘url’, and ‘image’. More specific types inherit properties of their parents. For instance, ‘LocalBusiness’ is a child of ‘Place’ and ‘Organization’ and inherits properties from both of them.
Here’s a set of commonly used item types:
- Creative works: CreativeWork, Book, Movie, MusicRecording, Recipe, TVSeries …
- Embedded non-text objects: AudioObject, ImageObject, VideoObject
- Event
- Organization
- Person
- Place, LocalBusiness, Restaurant …
- Product, Offer, AggregateOffer
- Review, AggregateRating
Best practices
More is better, except when content is hidden:
Don’t add microdata to hidden content.
Expected types are not hard and fast rules:
You can embed ‘text’ or ‘url’ instead, or child types of the expected type.
Use URL property:
Some pages, like a company website, has a collection of items, and separate categories linking to different urls. For eg: links to individual employee’s bio. Mark them up individually, and use the url element.
Test your Markup
Machine readability
- Dates, times, and durations: use the
timetag withdatetime
<time itemprop="cookTime" datetime="PT1H30M">1 1/2 hrs</time>
<span itemprop=”description”>One of the loudest bands ever reunites for an unforgettable two-day show.</span> Event date: <time itemprop=”startDate” datetime=”2011-05-08T19:30″>May 8, 7:30pm</time> </div>
- Enumerations and canonical references: use the
linktag withhref
/* for hidden links */ <link itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye" />
- Missing/implicit information: use the
metatag withcontent.
Based on itemprop=”ratingCount”>25 user ratings</div>
Use meta tag with ‘content’ sparingly for content that cannot be otherwise marked up.
Stuff I Have Learnt 