Semantic Annotations demystified for Web developers

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. Moreover, it includes a description of the Open Graph Protocol.

Transcript

1. Semantic Annotations demystified for Web developers Ioannis Stavrakantonakis www.istavrak.com
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. 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. Refers to Geo coordinates Talks about a Place The name of the Place It is contained in another Place -> Crete
4. Ok, I got it! But, how? microdata schema.org + +
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. I (heart) schema.org schema.org 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. Microdata That’s a(n) © http://commons.wikimedia.org/wiki/File:Crete_-Phaistos_disk_-_side_B.JPG
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=“http://schema.org/Person”>  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. 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="http://schema.org/Place"> <span itemprop="name">Chania</span> <div itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates"> <meta itemprop="latitude" content="35.51" />Latitude: 35.51 <meta itemprop="longitude" content="24.01" />Longitude: 24.01 </div> </div> top-level item
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: http://www.w3.org/html/wg/drafts/microdata/master/#values
11. schema.org That’s a(n) Person © http://commons.wikimedia.org/wiki/File:Crete_-Phaistos_disk_-_side_B.JPG
12. schema.org 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. Finding “my” schema.org terms Search or Navigate As easy as pie! Check the Full Type Hierarchy
14. schema.org/Person Properties (some):  familyName, givenName  affiliation  homeLocation  birthDate  knows  colleague Type: — Text — schema.org/Organization — schema.org/Place — ISO 8601 date format — schema.org/Person — schema.org/Person
15. http://schema.org/Recipe © http://giasemimorou.gr
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. Yummy code! <div itemscope itemtype="http://schema.org/Recipe"> <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. The Structured Data Testing Tool likes it! Extracted structured data Item type: http://schema.org/recipe 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... http://www.google.com/we bmasters/tools/richsnippets
19. Open Graph Protocol
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. 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. 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: http://ogp.me/ns#">  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. 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., “video.movie”. 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., “http://www.imdb.com/title/tt0117500/”.  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 http://ogp.me/ required
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="http://www.barackobama.com/"> <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. Take-home message Use microdata + schema.org to help make the Web a better (more structured) place :)
26. Ioannis Stavrakantonakis Research assistant at Univ. of Innsbruck |STI @istavrak