Semantic annotations demystified for web developers


Published on

Semantic annotations explained in a simple way from the point of view of the web developers. The slide set describes a starting point that could help web developers to begin with the semantic annotations and use of vocabularies. Open Graph Protocol benefits are also demonstrated in brief.

For a better reading experience check it on speakerdeck (

Published in: Technology, Design
1 Like
  • Be the first to comment

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

No notes for slide

Semantic annotations demystified for web developers

  1. 1. Semantic Annotations demystified for Web developers Ioannis Stavrakantonakis
  2. 2. Why to annotate? Chania is the second largest city of Crete. It lies along the north coast of the island, located at 35°31′N 24°1′E. ?
  3. 3. Why to annotate? Chania is the second largest city of Crete. It lies along the north coast of the island, located at 35°31′N 24°1′E.
  4. 4. Ok, I got it! But, how? microdata +
  5. 5. Wait… no big data, but microdata? Microdata is  a W3C specification used to enrich web content with semantics, i.e. explicitly define the meaning of the presented information.  part of HTML 5  simple to use
  6. 6. I (heart) is  a dictionary of terms that could be used to describe content and information (e.g. persons, places)  joint effort of Bing, Google, Yahoo! and Yandex  the vocabulary that the search engines understand  simple to understand
  7. 7. Microdata That’s a(n) ©
  8. 8. The basic microdata model  itemscope - An element with the itemscope attribute specified creates a new item, i.e. a group of name-value pairs. (Boolean attribute: presence represents the true value)  itemtype - You can specify the type of item using the itemtype attribute immediately after the itemscope. The itemtype attribute must not be specified on elements that do not have an itemscope attribute specified. E.g.: <div itemscope itemtype=“”>  itemprop - To label properties of an item. It‟s convenient to use the <span> elements to attach the itemprop attributes to the appropriate text on the page. E.g.: <span itemprop=“name”>John Doe</span>
  9. 9. The basic microdata model  Properties generally have values that are strings.  An item can have multiple properties with the same name and different values.  Items can have nested items as properties. E.g.: <div itemscope itemtype=""> <span itemprop="name">Chania</span> <div itemprop="geo" itemscope itemtype=""> <meta itemprop="latitude" content="35.51" />Latitude: 35.51 <meta itemprop="longitude" content="24.01" />Longitude: 24.01 </div> </div> top-level item
  10. 10. Which is the itemprop‟s value?  The property value of a name-value pair with an itemprop attribute is as given for the first matching case in the following simplified list*:  If the element also has an itemscope attribute: The value is the item created by the element.  If the element is a meta element: The value is the value of the element's content attribute.  Otherwise: The value is the element's textContent between the tags (e.g. <span>textContent</span>). * Full list:
  11. 11. That’s a(n) Person ©
  12. 12. Consists of various schemas, which are a set of „types‟, each associated with a set of properties. Common „types‟:  Person  Place, Restaurant  Organization, Hotel  Product, Offer, Review Arranged in a hierarchy. Inherit properties from super-types (e.g. Organization > Hotel).
  13. 13. Finding “my” terms Search or Navigate As easy as pie! Check the Full Type Hierarchy
  14. 14. Properties (some):  familyName, givenName  affiliation  homeLocation  birthDate  knows  colleague Type: — Text — — — ISO 8601 date format — —
  15. 15. ©
  16. 16. Time to cook! Properties Value Type name Grilled eggplant salad Text recipeYield 2 servings Text cookingMethod grill Text cookTime PT0H10M Duration (ISO 8601) prepTime PT0H20M Duration (ISO 8601) recipeCuisine Mediterranean Text ingredients eggplant Text (one per tag) recipeCategory salad Text recipeInstructions “Slice the eggplant and…” Text
  17. 17. Yummy code! <div itemscope itemtype=""> <span itemprop="name">Grilled eggplant salad</span> Prep Time: <meta itemprop="prepTime" content="PT0H20M">20 minutes Cook time: <meta itemprop="cookTime" content="PT0H10M">10 minutes Yield: <span itemprop="recipeYield">2 servings</span> Ingredients: - <span itemprop="ingredients">1 eggplant</span> - <span itemprop="ingredients">2 peppers (red and orange)</span> - <span itemprop="ingredients">1 big tomato</span> - <span itemprop="ingredients">2 spoons olive oil</span> - <span itemprop="ingredients">1 spoon vinegar</span> - <span itemprop="ingredients">salt</span> - <span itemprop="ingredients">feta</span> <span itemprop="recipeInstructions">Slice the eggplant and the peppers (not too thin), brush them with olive oil and put them in the oven on baking paper. Cook at the grill option of your oven for 10 minutes. […]Garnish the salad with “red” meat or chicken and place it on dakos (Cretan barley rusk).</span> </div>
  18. 18. The Structured Data Testing Tool likes it! Extracted structured data Item type: property: name: Grilled eggplant salad preptime: PT0H20M cooktime: PT0H10M recipeyield: 2 servings ingredients: 1 eggplant ingredients: 2 peppers (red and orange) ingredients: 1 big tomato ingredients: 2 spoons olive oil ingredients: 1 spoon vinegar ingredients: salt ingredients: feta recipeinstructions: Slice the eggplant and the peppers (not too thin), brush them with olive oil and put them in the oven on baking paper. Cook at the grill option of your oven for 10 minutes. […] Garnish the... bmasters/tools/richsnippets
  19. 19. Open Graph Protocol
  20. 20. More annotations? The Open Graph Protocol  enables any web page to become a rich object in a social graph  is used in Facebook to allow any web page to have the same functionality as any other object on Facebook  One practical benefit is the rich object that is created when the user posts a web page with og: metadata.
  21. 21. Ok, go ahead! Dive in the OGP:  based on RDFa (don‟t panic, you don‟t need to study the whole stack of the Semantic Web technologies)  mainly exploited by Facebook (however, it has >1bn monthly active users)  simple to use  a few meta tags in the HTML head
  22. 22. The technicalities  Place the extra meta tags within the head of the html page that represents the object.  At the property attribute, we put the og: term and at the content, the value: <meta property="og:title" content="The Rock" />  It‟s good practice to specify the og: namespace in the html element: <html prefix="og:">  Some properties can have extra metadata attached to them, e.g. at the og:image we can specify the width with og:image:width.  Arrays of values are supported by having meta tags of the same term.  External object types are supported: my_namespace:my_type
  23. 23. The og: properties  og:title* - The title of your object as it should appear within the graph.  og:type* - The type of your object, e.g., “”. Depending on the type you specify, other properties may also be required.  og:image* - An image URL which should represent your object within the graph.  og:url* - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., “”.  og:description - A one to two sentence description of your object.  og:video - A URL to a video file that complements this object.  check for more on required
  24. 24. e.g. check the President‟s page <meta property="og:title" content="Organizing for Action"> <meta property="og:type" content="cause"> <meta property="og:url" content=""> <meta property="og:image" content="http://[...].jpg"> <meta property="og:site_name" content="Organizing for Action"> <meta property="og:description" content="The next big step for our grassroots movement is being launched: Organizing for Action.">
  25. 25. Take-home message Use microdata + to help make the Web a better (more structured) place :)
  26. 26. Ioannis Stavrakantonakis Research assistant at Univ. of Innsbruck |STI @istavrak