Microdata for Dummies
- 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. Schema.org • Schema.org is endorsed by Google, Bing and Yahoo! • This presentation does not discuss Schema.org vocabulary but use it • Check http://getschema.org 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="http://schema.org/Recipe"> <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 http://schema.org/Recipe ? 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 http://schema.org/Recipe is defined by Schema.org vocabulary. This is the vocabulary processed by Google, Bing and Yahoo!. Check http://getschema.org 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="http://schema.org/Person"> By <a itemprop="url" href="http://fourstarcooks.org/mindypretner"> <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="http://schema.org/Recipe"> <h1 itemprop="name">Pita Pizza</h1> <img itemprop="image" src="http://myrecipes.com/images/pitapizza.png" alt="Pita Pizza"/> ��� </div>
- 12. There are many ways to markup (1) <p itemprop="author" itemscope itemtype="http://schema.org/Person"> By <a itemprop="url" href="http://fourstarcooks.org/mindypretner"> <span itemprop="name">Mindy Pretner</span> </a> </p> <p itemprop="author"> <div itemscope By <a itemtype="http://schema.org/Person"> itemprop="url" href="http://fourstarcooks.org/mindypretner"> <span </a> </div> </p> itemprop="name">Mindy Pretner</span>
- 13. There are many ways to markup (2) <p itemprop="author" itemscope itemtype="http://schema.org/Person"> By <span itemprop="name"> <a itemprop="url" href="http://fourstarcooks.org/mindypretner"> 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="http://schema.org/Recipe"> ... 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" • Schema.org 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="http://schema.org/Person> <p itemprop="author">Friedrich Hayek</p> </div> </div> <div itemscope itemtype="http://schema.org/Book" 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., Schema.org • Example of types: o http://schema.org/Recipe o http://schema.org/Book • Each type defines its own properties and inherits properties from its super types e.g., • http://schema.org/CreativeWork is a supertype (or parent/ancestor type) of http://schema.org/Diet 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, Schema.org See examples at http://getschema.org
- 20. Happy? • Visit http://getschema.org to learn more • Request an account if you like to contribute • Follow us