Microdata for dummies

20
Microdata for Dummies Use Semantic Annotations in Web Pages

Transcript of Microdata for dummies

Microdata for

DummiesUse Semantic Annotations

in Web Pages

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.

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

How to use these „labels“? (1)<h1>Pita Pizza</h1>

<p>By Mindy Pretner</p>

Pita Pizza is a quick snack or meal that can be customized to your liking!

<h2>1 Serving Piece</h2>

<p> Prep Time: 5 Min<br/> Cook Time: 15 Min<br/> Ready In: 20 Min</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

This is my HTML, what should I do now?

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

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

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

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

<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

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>

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>

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>

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>

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>

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

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

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>

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

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

Happy?

• Visit http://getschema.org to learn more

• Request an account if you like to contribute

• Follow us