Your SlideShare is downloading. ×
Microdata for Dummies
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Microdata for Dummies


Published on

A simple guide on how to use Microdata semantic annotations on your own HTML5 markup. An easy survey on what Microdata is and how can you use it to increase the visibility of your web pages.

A simple guide on how to use Microdata semantic annotations on your own HTML5 markup. An easy survey on what Microdata is and how can you use it to increase the visibility of your web pages.

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Microdata for Dummies Use Semantic Annotations in Web Pages
  • 2. Why to use Semantic Annotations? • to annotate HTML content with specific machinereadable labels • to allow generic scripts to provide custom services to the page • to enable content from many sources to be processed by a single script in a consistent manner.
  • 3. “specific machine-readable labels”? • Indeed you have to use „labels“ from a specific vocabulary, e.g. • is endorsed by Google, Bing and Yahoo! • This presentation does not discuss vocabulary but use it • Check for many other examples.
  • 4. How to use these „labels“? (1) <h1>Pita Pizza</h1> <p>By Mindy Pretner</p> Pita Pizza is a quick snack or meal that can be customized to your liking! <h2>1 Serving Piece</h2> <p> Prep Time: 5 Min<br/> Cook Time: 15 Min<br/> Ready In: 20 Min</p> <h3> Ingredients</h3> <ul> <li>1 pita bread round</li> <li>5 ml olive oil</li> <li>45 ml pizza sauce</li> <li>55 g shredded mozzarella cheese</li> <li>25 g sliced crimini mushrooms</li> <li>0.7 g garlic salt</li> </ul> <h3> How to do it</h3> <ol> <li>Preheat grill for medium-high heat.</li> <li>Spread one side of the pita with olive oil and pizza sauce. Top with cheese and mushrooms, and season with garlic salt.</li> <li>Lightly oil grill grate. Place pita pizza on grill, cover, and cook until cheese completely melts, about 5 minutes.</li> </ol> <h3> Nutritional Information </h3> <p> <strong>Amount Per Serving</strong> Calories: 405 | Total Fat: 18g | Cholesterol: 44mg </p> This is my HTML, what should I do now? Well, you have to tell Google that you published a Recipe
  • 5. I want to publish a recipe <div itemscope itemtype=""> <h1>Pita Pizza</h1> … </div>  Use a container element (such as <div>) to describe that all enclosed content is about the same thing  itemscope? itemtype? – indeed, they are some new attributes you need to use... This is Microdata.  What about ?  This is the thing your content is about :)
  • 6. Microdata (1) – what it is? • Microdata is a collection of HTML5 attributes helping us to describe items (such as a Recipe) and their properties (such as cooking time) • An item is a group of property-value pairs (Oh, that‘s why I need a container. Before I just defined a Recipe item...) • To create an item you MUST use the itemscope attribute • Each item should have a type defined with the itemtype attribute
  • 7. Microdata (2) – itemscope, itemtype • Usually HTML attributes have a value.. . What about this itemscope ? • Well, in HTML5 attributes no longer require a value. Therefore use itemscope without any value. • How to I know the value of the itemtype attribute? • This value is a special name (technically called URI – Uniform Resource Identifier ) which identifies and uniformly what is about your content. • The value is defined by vocabulary. This is the vocabulary processed by Google, Bing and Yahoo!. Check for examples. • itemtype MUST come always together with itemscope
  • 8. Microdata (3) - property-value pair What? I did this in my HTML ... • What about these „property-value pairs“ ? • Suppose you want to describe that your recipe is for 1 serving... Well, you have just a plain text difficult to be processed by machines... They would need to understand the human language, even ALL languages in the world...
  • 9. Microdata (4) - itemprop • Use a property-value pair to describe this • Microdata has the itemprop attribute What should I do better? („item property“) <div> <span itemprop="recipeYield">1</span> Serving </div>  I‘ve got it! The property is recipeYield  and the value is "1"  So we have a property-value pair
  • 10. Microdata (5) - more about itemprop • An itemprop can also introduce multiple properties at once, to avoid duplication when that properties have the same value. <p itemprop="author creator" itemscope itemtype=""> By <a itemprop="url" href=""> <span </a> </p> itemprop="name">Mindy Pretner</span>
  • 11. More about values • Properties generally have values that are strings, but in many cases there are values that are URLs (such as the image of my pita pizza) , then the value of such property will be taken from the attribute that express it (such as src attribute of <img>) <div itemscope itemtype=""> <h1 itemprop="name">Pita Pizza</h1> <img itemprop="image" src="" alt="Pita Pizza"/> … </div>
  • 12. There are many ways to markup (1) <p itemprop="author" itemscope itemtype=""> By <a itemprop="url" href=""> <span itemprop="name">Mindy Pretner</span> </a> </p> <p itemprop="author"> <div itemscope By <a itemtype=""> itemprop="url" href=""> <span </a> </div> </p> itemprop="name">Mindy Pretner</span>
  • 13. There are many ways to markup (2) <p itemprop="author" itemscope itemtype=""> By <span itemprop="name"> <a itemprop="url" href=""> Mindy Pretner </a> </span> </p>
  • 14. Can the machine understand "20 Min"? • Indeed, this is a long story... Some text is more easy to be understood some other very difficult • The total time of my recipe is 20 min... • therefore, sometimes, we need to separate the human readable content (20 Min) from the machine readable one (P20M)... <div itemscope itemtype=""> ... Ready In: <time itemprop="totalTime" datetime="P20M"> 20 Min </time> ... </div>
  • 15. How to describe collections? <ul> <li itemprop="ingredient">1 pita bread round</li> <li itemprop="ingredient">5 ml olive oil</li> … </ul>  A property may appear many times  What about "5 ml"... This is a quantity. Is any way to describe it better?  Well, there are some solutions but, if you are a beginner, just do as above
  • 16. Properties have "expected values" • properties have expected values. • What is an "expected value"? • Let's say it is the best value you can put for your property • Remember the duration of of your recipe? • The property totalTime has a Duration as expected value • A Duration is a precise string using ISO 8601 duration format • When such a format is not provided the machine may fail to understand the value
  • 17. Referring items • How I can refer an item which is not in the same container? • You have to uss a combination between HTML attribute id and attribute itemref sharing the SAME value • Then you can still annotate when the data to be annotated does not follow the convenient tree structure... <div itemprop="author" id="x"> <div itemscope itemtype="> <p itemprop="author">Friedrich Hayek</p> </div> </div> <div itemscope itemtype="" itemref="x"> <p itemprop="title">The Road to Serfdom</p> </div>
  • 18. Vocabularies define types • How do I know what type (itemtype) to use? • Microdata do NOT define these types and their properties • Types and properties are part of Web vocabularies, e.g., • Example of types: o o • Each type defines its own properties and inherits properties from its super types e.g., • is a supertype (or parent/ancestor type) of therefore Diet inherits all CreativeWork properties • Diet is a subtype of CreativeWork
  • 19. Which vocabulary should I use? • Fact is that, according with the semantics you want to encode there are plenty of Web vocabularies: FOAF, SKOS, DOAP, ... • However, these types and properties should be understood by Web applications... • Therefore when you use e.g., SKOS then ONLY applications that process SKOS will interact with your page • Remember, Google, Bing and Yahoo! Allied to process a common vocabulary, See examples at
  • 20. Happy? • Visit to learn more • Request an account if you like to contribute • Follow us