SlideShare a Scribd company logo
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

More Related Content

Recently uploaded

kk vathada _digital transformation frameworks_2024.pdf
kk vathada _digital transformation frameworks_2024.pdfkk vathada _digital transformation frameworks_2024.pdf
kk vathada _digital transformation frameworks_2024.pdf
KIRAN KV
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
SynapseIndia
 
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
bellared2
 
The History of Embeddings & Multimodal Embeddings
The History of Embeddings & Multimodal EmbeddingsThe History of Embeddings & Multimodal Embeddings
The History of Embeddings & Multimodal Embeddings
Zilliz
 
Communications Mining Series - Zero to Hero - Session 3
Communications Mining Series - Zero to Hero - Session 3Communications Mining Series - Zero to Hero - Session 3
Communications Mining Series - Zero to Hero - Session 3
DianaGray10
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
ldtexsolbl
 
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
bhumivarma35300
 
Semantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software DevelopmentSemantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software Development
Baishakhi Ray
 
How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...
DianaGray10
 
Integrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecaseIntegrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecase
shyamraj55
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
sunilverma7884
 
Generative AI Reasoning Tech Talk - July 2024
Generative AI Reasoning Tech Talk - July 2024Generative AI Reasoning Tech Talk - July 2024
Generative AI Reasoning Tech Talk - July 2024
siddu769252
 
Mastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for SuccessMastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for Success
David Wilson
 
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
alexjohnson7307
 
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision MakingConnector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
DianaGray10
 
Mule Experience Hub and Release Channel with Java 17
Mule Experience Hub and Release Channel with Java 17Mule Experience Hub and Release Channel with Java 17
Mule Experience Hub and Release Channel with Java 17
Bhajan Mehta
 
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
FIDO Alliance
 
Retrieval Augmented Generation Evaluation with Ragas
Retrieval Augmented Generation Evaluation with RagasRetrieval Augmented Generation Evaluation with Ragas
Retrieval Augmented Generation Evaluation with Ragas
Zilliz
 
Redefining Cybersecurity with AI Capabilities
Redefining Cybersecurity with AI CapabilitiesRedefining Cybersecurity with AI Capabilities
Redefining Cybersecurity with AI Capabilities
Priyanka Aash
 
Finetuning GenAI For Hacking and Defending
Finetuning GenAI For Hacking and DefendingFinetuning GenAI For Hacking and Defending
Finetuning GenAI For Hacking and Defending
Priyanka Aash
 

Recently uploaded (20)

kk vathada _digital transformation frameworks_2024.pdf
kk vathada _digital transformation frameworks_2024.pdfkk vathada _digital transformation frameworks_2024.pdf
kk vathada _digital transformation frameworks_2024.pdf
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
 
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
 
The History of Embeddings & Multimodal Embeddings
The History of Embeddings & Multimodal EmbeddingsThe History of Embeddings & Multimodal Embeddings
The History of Embeddings & Multimodal Embeddings
 
Communications Mining Series - Zero to Hero - Session 3
Communications Mining Series - Zero to Hero - Session 3Communications Mining Series - Zero to Hero - Session 3
Communications Mining Series - Zero to Hero - Session 3
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
 
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
 
Semantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software DevelopmentSemantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software Development
 
How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...
 
Integrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecaseIntegrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecase
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
 
Generative AI Reasoning Tech Talk - July 2024
Generative AI Reasoning Tech Talk - July 2024Generative AI Reasoning Tech Talk - July 2024
Generative AI Reasoning Tech Talk - July 2024
 
Mastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for SuccessMastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for Success
 
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
 
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision MakingConnector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
 
Mule Experience Hub and Release Channel with Java 17
Mule Experience Hub and Release Channel with Java 17Mule Experience Hub and Release Channel with Java 17
Mule Experience Hub and Release Channel with Java 17
 
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
 
Retrieval Augmented Generation Evaluation with Ragas
Retrieval Augmented Generation Evaluation with RagasRetrieval Augmented Generation Evaluation with Ragas
Retrieval Augmented Generation Evaluation with Ragas
 
Redefining Cybersecurity with AI Capabilities
Redefining Cybersecurity with AI CapabilitiesRedefining Cybersecurity with AI Capabilities
Redefining Cybersecurity with AI Capabilities
 
Finetuning GenAI For Hacking and Defending
Finetuning GenAI For Hacking and DefendingFinetuning GenAI For Hacking and Defending
Finetuning GenAI For Hacking and Defending
 

Featured

2024 Trend Updates: What Really Works In SEO & Content Marketing
2024 Trend Updates: What Really Works In SEO & Content Marketing2024 Trend Updates: What Really Works In SEO & Content Marketing
2024 Trend Updates: What Really Works In SEO & Content Marketing
Search Engine Journal
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
Chiara Aliotta
 
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
OECD Directorate for Financial and Enterprise Affairs
 
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
SocialHRCamp
 
2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
Marius Sescu
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
Expeed Software
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
Pixeldarts
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
Skeleton Technologies
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
Rajiv Jayarajah, MAppComm, ACC
 

Featured (20)

2024 Trend Updates: What Really Works In SEO & Content Marketing
2024 Trend Updates: What Really Works In SEO & Content Marketing2024 Trend Updates: What Really Works In SEO & Content Marketing
2024 Trend Updates: What Really Works In SEO & Content Marketing
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
 
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
 
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
 
2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 

Semantic annotations demystified for web developers

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