Microdata for dummies
Download as PPTX, PDF0 likes437 views
The document provides an overview of using semantic annotations and microdata to mark up HTML content. It explains how to annotate a recipe using microdata properties and values defined in the Schema.org vocabulary. Examples are given to demonstrate marking up elements like the recipe title, ingredients list, preparation instructions, author, and total time using itemscope, itemtype, itemprop and other microdata attributes according to the Schema.org Recipe type.
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 machine-readable 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> This is my HTML, Pita Pizza is a quick snack or meal that can be customized to your liking! what should I do <h2>1 Serving Piece</h2> <p> Prep Time: 5 Min<br/> Cook Time: 15 Min<br/> Ready In: 20 Min</now? 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> 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 about these „property-value pairs“ ? • Suppose you want to describe that your recipe is for 1 serving... What? I did this in my HTML ... 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. <div> <span itemprop="recipeYield">1</span> Serving </div> Microdata (4) - itemprop • Use a property-value pair to describe this • Microdata has the itemprop attribute („item property“) What should I do better? 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 itemprop="name">Mindy Pretner</span> </a> </p>
- 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 itemtype="http://schema.org/Person"> By <a itemprop="url" href="http://fourstarcooks.org/mindypretner"> <span itemprop="name">Mindy Pretner</span> </a> </div> </p>
- 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