Semantic Annotations demystified
for Web developers
Ioannis Stavrakantonakis
www.istavrak.com

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.
?

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.

Ok, I got it! But, how?
microdata schema.org+ +

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

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

Microdata
That’s a(n)
© http://commons.wikimedia.org/wiki/File:Crete_-Phaistos_disk_-_side_B.JPG

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>

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

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

schema.org
That’s a(n) Person
© http://commons.wikimedia.org/wiki/File:Crete_-Phaistos_disk_-_side_B.JPG

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).

Finding “my” schema.org terms
Search
or
Navigate
As easy as pie!
Check the
Full Type Hierarchy

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

http://schema.org/Recipe
© http://giasemimorou.gr

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

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>

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

Open Graph Protocol

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.

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

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

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

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.">

Take-home message
Use
microdata + schema.org
to help make the Web a better (more structured) place
:)

Ioannis Stavrakantonakis
Research assistant at Univ. of Innsbruck |STI
@istavrak