"Meta datos & Google Rich Snippets" por @iplarodriguez

Metadatos
&

Rich Snippets

por: Ivan Pla Rodríguez y Cristina Luengo Maravert

Presentación
Sin METADATOS:

<div>
Mi nombre es Ivan Pla. Este es mi perfil en LinkedIn:
<a href="http://www.linkedin.com/in/iplarodriguez">Mi perfil</a>
Vivo en Terrassa (Barcelona) y trabajo, entre otras cosas, en UX en
Grupo Intercom.
</div>

Con METADATOS:

<div itemscope itemtype="http://data-vocabulary.org/Person">
Mi nombre es <span itemprop="name">Ivan Pla</span>.
Este es mi perfil en LinkedIn:
<a href="http://www.linkedin.com/in/iplarodriguez" itemprop="url">Mi
perfil</a>.
Vivo en
<span itemprop="address" itemscope
itemtype="http://data-vocabulary.org/Address">
<span itemprop="locality">Terrassa</span>
(<span itemprop="region">Barcelona</span>)
</span>
y trabajo, entre otras cosas, en <span itemprop="title">UX</span>
en <span itemprop="affiliation">Grupo Intercom</span>.
</div>

Metadatos: definición

"Metadata is structured information that describes,
explains, locates, or otherwise makes it easier to retrieve,
use, or manage an information resource."

"Metadata is key to ensuring that resources will survive and
continue to be accessible into the future."

TRADUCCIÓN:

"Los metadatos son información estructurada que describe, explica, localiza, o de cualquier otro modo
hacen que sea más fácil de recuperar, utilizar o administrar un recurso de información."

"Los metadatos son la clave para asegurar que los recursos sobrevivan con el paso del tiempo y
sigan siendo accesibles en el futuro."

Fuente: http://www.niso.org/publications/press/UnderstandingMetadata.pdf

Metadatos: ejemplo práctico

¿Cómo catalogaríais esta imagen?


Fuente: http://500px.com/photo/7645023


Autor

Popularidad

Descripción

Palabras clave

Características Técnicas

Metadatos: método de introducción

Autor

Popularidad
Metadatos
manuales

Descripción

Palabras clave

Características Técnicas Metadatos
automáticos

Metadatos: tipos (según la NISO)

Según la NISO (http://www.niso.org):

Los metadatos descriptivos describen un recurso para
finalidades tales como descubrimiento e identificación. Puede incluir
elementos como título, autor o palabras clave.

Los metadatos estructurales indican cómo elementos
compuestos se unifican: por ejemplo, cómo se ordenan las páginas
para formar capítulos.

Los metadatos administrativos nos dan información para
ayudarnos a organizar un recurso, como por ejemplo cuándo y cómo
fue creado, el tipo de archivo y otra información técnica, y quién puede
acceder a ella.

Metadatos: sintaxis

Dublin Core Text
(http://dublincore.org/documents/dc-text/)

@prefix dcterms: <http://purl.org/dc/terms/> .

DescriptionSet (
Description (
ResourceURI ( <http://example.org/123> )
Statement (
PropertyURI ( dcterms:subject )
ValueURI ( <http://example.org/taxonomy/D003.53> )
)
)
)

Metadatos: sintaxis

Dublin Core RDF-XML (http://dublincore.
org/documents/dc-rdf/)

<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:dcterms="http://purl.org/dc/terms/">

<rdf:Description rdf:about="http://example.org/123">
<dcterms:subject rdf:resource="http://example.org/taxonomy/D003.
53"/>
</rdf:Description>

</rdf:RDF>

Metadatos: sintaxis

Dublin Core HTML (http://dublincore.org/documents/dc-
html/)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head profile="http://dublincore.org/documents/2008/08/04/dc-
html/">
<title>Services to Government</title>
<link rel="schema.DCTERMS" href="http://purl.org/dc/terms/" >
<link rel="DCTERMS.subject" href="http://example.
org/topics/archives" >
</head>
<body>
</body>
</html>

Metadatos: estructura

Jerárquica Lineal

Schema.org DCMES (DCMI)

Metadatos: granularidad

-

- +

+

Metadatos: soportes

Físico Electrónico

Libros Imágenes Digitales
CDs Fotografías Digitales
DVDs Documentos Digitales
Mapas Archivos de Programas
Mesas Tablas de BBDD
Sillas ...
Floreros
...

Todo material sensible a ser catalogado

Metadatos: campos

Ciencias de la Información
Medicina
Derecho
Estadística
Geografia
Medio ambiente
Tecnología (CDs, DVDs, ...)
Audiovisuales (Foto, Video, Música, ...)
Internet (Virtualización de datos, Cloud Computing, repositorios, Web, ...)

Metadatos: web

Viejos conocidos:

METATAGS más comunes

title
description
keywords
robots
charset

Metadatos: web

Bienvenidos:

Nuevos formatos de
marcado

RDFa
Microformatos
Microdatos

Metadatos: web

RDFa:
<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Review">
<span property="v:itemreviewed">L’Amourita Pizza</span>
Reviewed by
<span property="v:reviewer">Ulysses Grant</span> on
<span property="v:dtreviewed" content="2009-01-06">Jan 6</span>.
<span property="v:summary">Delicious, tasty pizza on Eastlake!
</span>
<span property="v:description">L'Amourita serves up traditional
wood-fired
Neapolitan-style pizza, brought to your table promptly and without
fuss.
An ideal neighborhood pizza joint.</span>
Rating:
<span property="v:rating">4.5</span>
</div>

Metadatos: web

Microformatos:
<div class="hreview">
<span class="item">
<span class="fn">L’Amourita Pizza</span>
</span>
Reviewed by <span class="reviewer">Ulysses Grant</span> on
<span class="dtreviewed">
Jan 6<span class="value-title" title="2009-01-06"></span>
</span>.
<span class="summary">Delicious, tasty pizza on Eastlake!</span>
<span class="description">L'Amourita serves up traditional wood-
fired
Neapolitan-style pizza, brought to your table promptly and without
fuss.
An ideal neighborhood pizza joint.</span>
Rating:
<span class="rating">4.5</span>
</div>

Metadatos: web

Microdatos:
<div>
<div itemscope itemtype="http://data-vocabulary.org/Review">
<span itemprop="itemreviewed">L’Amourita Pizza</span>
Reviewed by <span itemprop="reviewer">Ulysses Grant</span> on
<time itemprop="dtreviewed" datetime="2009-01-06">Jan 6</time>.
<span itemprop="summary">Delicious, tasty pizza in Eastlake!
</span>
<span itemprop="description">L'Amourita serves up traditional
wood-fired Neapolitan-style pizza,
brought to your table promptly and without fuss. An ideal
neighborhood pizza joint.</span>
Rating: <span itemprop="rating">4.5</span>
</div>
</div>

Metadatos: web -> microdatos

RDFa Microdatos Microformatos

data-vocabulary
http://data-vocabulary.org

schema
http://schema.org

Metadatos: web -> microdatos

http://schema.org

Metadatos: web -> microdatos -> Google Rich Snippets

http://support.google.com/webmasters/bin/topic.py?hl=en&topic=1088474&parent=21997&ctx=topic

Aplicaciones de software
Contactos
Eventos
Vídeos
Música
Opiniones
Organizaciones
Productos
Puntuaciones de opiniones
Recetas
Rutas de exploración

Metadatos: web -> microdatos -> GRS -> Aplicaciones
<div itemscope itemtype="http://schema.org/SoftwareApplication">

<img itemprop="image" src="https://ssl.gstatic.com/android/market/com.zeptolab.ctr.
paid/hi-124-11" />
<span itemprop="name">Cut the Rope</span> -
<div itemprop="author" itemscope itemtype="http://schema.org/Organization">
<a itemprop="url" href="http://zeptolab.com"><span itemprop="name">Zeptolab</span></a>
</div>

<span itemprop="description">Cut the Rope, catch a star, and feed Om Nom candy in this
award-winning game! The long-awaited hit game has finally arrived at Android!
</span>

REQUIRES <span itemprop="operatingSystems">ANDROID</span>: <span itemprop="
operatingSystemVersion">1.6</span> and up

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
Price: <span itemprop="price">$1.00</span>
<meta itemprop="priceCurrency" content="USD" />
<link itemprop="availability" href="http://schema.org/InStock" />INSTALL
</div>

</div>

Metadatos: web -> microdatos -> GRS -> Contactos
<div itemscope itemtype="http://data-vocabulary.org/Person">
My name is <span itemprop="name">Bob Smith</span>,
but people call me <span itemprop="nickname">Smithy</span>.
Here is my homepage:
<a href="http://www.example.com" itemprop="url">www.example.com</a>.
I live in
<span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
<span itemprop="locality">Albuquerque</span>,
<span itemprop="region">NM</span>
</span>
and work as an <span itemprop="title">engineer</span>
at <span itemprop="affiliation">ACME Corp</span>.
My friends:
<a href="http://darryl-blog.example.com" rel="friend">Darryl</a>,
<a href="http://edna-blog.example.com" rel="friend">Edna</a>
</div>

Metadatos: web -> microdatos -> GRS -> Eventos
<div itemscope itemtype="http://data-vocabulary.org/Event">
<a href="http://www.example.com/events/spinaltap" itemprop="url" >
<span itemprop="summary">Spinal Tap</span>
</a>
<img itemprop="photo" src="spinal_tap.jpg" />

<span itemprop="description">After their highly-publicized search for a new drummer,
Spinal Tap kicks off their latest comeback tour with a San Francisco show.</span>

When:
<time itemprop="startDate" datetime="2015-10-15T19:00-08:00">Oct 15, 7:00PM</time>—
<time itemprop="endDate" datetime="2015-10-15T19:00-08:00">Oct 15, 9:00PM</time>

Where:
<span itemprop="location" itemscope itemtype="http://data-vocabulary.org/Organization">
<span itemprop="name">Warfield Theatre</span>
<span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
<span itemprop="street-address">982 Market St</span>,
<span itemprop="locality">San Francisco</span>,
<span itemprop="region">CA</span>
</span>
...
</div>

Metadatos: web -> microdatos -> GRS -> Vídeos
<div itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
<h2>Video: <span itemprop="name">Title</span></h2>
<meta itemprop="duration" content="T1M33S" />
<meta itemprop="thumbnailUrl" content="thumbnail.jpg" />
<meta itemprop="contentURL" content="http://www.example.com/video123.flv" />
<meta itemprop="embedURL" content="http://www.example.com/videoplayer.swf?video=123"
/>
<meta itemprop="uploadDate" content="2011-07-05T08:00:00+08:00" />
<meta itemprop="expires" content="2012-01-30T19:00:00+08:00" />
<object ...>
<param ...>
<embed type="application/x-shockwave-flash" ...>
</object>
<span itemprop="description">Video description</span>
</div>

¿ ?

Metadatos: web -> microdatos -> GRS -> Música
<div itemscope itemtype="http://schema.org/MusicGroup">
<h1 itemprop="name">The Parrot Family</h1>
<h2>Songs</h2>
<div itemprop="tracks" itemscope itemtype="http://schema.org/MusicRecording">
<span itemprop="name">Hello, World!</span>
Length: <meta itemprop="duration" content="PT4M5S" />4:05 -
14300 plays
<meta itemprop="interactionCount" content="UserPlays:14300"/>
<a href="parrot-family-helloworld-link.html" itemprop="url">Link</a>
<a href="parrot-family-helloworld-play.html" itemprop="audio">Play</a>
<a href="parrot-family-helloworld-buy.html" itemprop="offers">Buy</a>
From album: <a href="parrot-family-yellow-album.html" itemprop="inAlbum">The
Yellow Album</a>
</div>
<div itemscope itemtype="http://schema.org/MusicRecording">
<span itemprop="name">Parrot Power</span>
Length: <meta itemprop="duration" content="PT6M33S" />6:33 -
11700 plays
<meta itemprop="interactionCount" content="UserPlays:11700"/>
<a href="parrot-family-parrotpower-link.html" itemprop="url">Link</a>
<a href="parrot-family-parrotpower-play.html" itemprop="audio">Play</a>
<a href="parrot-family-parrotpower-buy.html" itemprop="offers">Buy</a>
From album: <a href="parrot-family-yellow-album.html" itemprop="inAlbum">The Yellow
Album</a>
</div>
</div>

Metadatos: web -> microdatos -> GRS -> Opiniones
<span itemprop="itemreviewed">L’Amourita Pizza</span>
Reviewed by <span itemprop="reviewer">Ulysses Grant</span> on
<time itemprop="dtreviewed" datetime="2009-01-06">Jan 6</time>.
<span itemprop="summary">Delicious, tasty pizza in Eastlake!</span>
<span itemprop="description">L'Amourita serves up traditional wood-fired Neapolitan-
style pizza, brought to your table promptly and without fuss. An ideal neighborhood
pizza joint.</span>
Rating: <span itemprop="rating">4.5</span>
</div>

Metadatos: web -> microdatos -> GRS -> Organizaciones
<div itemscope itemtype="http://data-vocabulary.org/Organization">
<span itemprop="name">L’Amourita Pizza</span>
Located at
<span itemprop="address" itemscope
itemtype="http://data-vocabulary.org/Address">
<span itemprop="street-address">123 Main St</span>,
<span itemprop="locality">Albuquerque</span>,
<span itemprop="region">NM</span>.
</span>
Phone: <span itemprop="tel">206-555-1234</span>.
<a href="http://www.example.com" itemprop="url">http://pizza.example.com</a>.
</div>

¿ ?

Metadatos: web -> microdatos -> GRS -> Productos
<div itemscope itemtype="http://data-vocabulary.org/Product">
<span itemprop="brand">ACME</span> <span itemprop="name">Executive
Anvil</span>
<img itemprop="image" src="anvil_executive.jpg" />

<span itemprop="description">Sleeker than ACME's Classic Anvil, the Executive Anvil is
perfect for the business traveler looking for something to drop from a height.
</span>
Category: <span itemprop="category" content="Hardware > Tools > Anvils">Anvils</span>
Product #: <span itemprop="identifier" content="mpn:925872">
925872</span>
<span itemprop="offerDetails" itemscope temtype="http://data-vocabulary.org/Offer">
Regular price: $179.99
<meta itemprop="currency" content="USD" />
$<span itemprop="price">119.99</span>
(Sale ends <time itemprop="priceValidUntil" datetime="2020-11-05">5 November!
</time>)
Available from: <span itemprop="seller">Executive Objects</span>
Condition: <span itemprop="condition" content="used">Previously owned,
in excellent condition</span>
<span itemprop="availability" content="in_stock">In stock! Order now!</span>
</span>
</div>

Metadatos: web -> microdatos -> GRS -> Puntuaciones
<span class="rating-foreground" style="width:90%">
<meta itemprop="rating" content="4.5" />
</span>
</div>

<span itemprop="itemreviewed">Blast 'Em Up</span>—Game Review
Rating: <span itemprop="rating">3.5</span> out of 5
</div>

<span itemprop="itemreviewed">Blast 'Em Up</span>—Game Review
<span itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
Rating:
<span itemprop="value">7</span> out of
<span itemprop="best">10</span>
</span>
</div>

Metadatos: web -> microdatos -> GRS -> Recetas
<div itemscope itemtype="http://data-vocabulary.org/Recipe" >
<h1 itemprop="name">Grandma's Holiday Apple Pie</h1>
<img itemprop="photo" src="apple-pie.jpg" />
By <span itemprop="author">Carol Smith</span>
Published: <time datetime="2009-11-05" itemprop="published">November 5, 2009</time>
<span itemprop="summary">This is my grandmother's apple pie recipe. I like to add a
dash of nutmeg.</span>
Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min</time>
Yield: <span itemprop="yield">1 9" pie (8 servings)</span>
<span itemprop="nutrition" itemscope itemtype="http://data-vocabulary.org/Nutrition">
Serving size: <span itemprop="servingSize">1 medium slice</span>
Calories per serving: <span itemprop="calories">250</span>
Fat per serving: <span itemprop="fat">12g</span>
</span>
Ingredients:
<span itemprop="ingredient" itemscope itemtype="http://data-vocabulary.
org/RecipeIngredient">
<span itemprop="name">White sugar</span>:
<span itemprop="amount">3/4 cup</span>
</span>
Directions:
<div itemprop="instructions">
1. Cut and peel apples
...
</div>
</div>

Metadatos: web -> microdatos -> GRS -> Breadcrumbs
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/dresses" itemprop="url">
<span itemprop="title">Dresses</span>
</a> ›
</div>
<a href="http://www.example.com/dresses/real" itemprop="url">
<span itemprop="title">Real Dresses</span>
</a> ›
</div>
<a href="http://www.example.com/clothes/dresses/real/green" itemprop="url">
<span itemprop="title">Real Green Dresses</span>
</a>
</div>

Metadatos: web -> microdatos -> Google Testing Tool

http://www.google.com/webmasters/tools/richsnippets

Metadatos: web -> microdatos -> Google Testing Tool

Metadatos: web -> microdatos -> Google -> ¿peligro?

VS
https://www.google.com/advisor/home

http://www.bankimia.com

¡Muchas gracias!
Ivan Pla Rodríguez: @iplarodriguez
http://www.linkedin.com/in/iplarodriguez

Con la colaboración de...
Cristina Luengo Maravert: @cluengomaravert
http://es.www.linkedin.com/in/cluengomaravert

"Meta datos & Google Rich Snippets" por @iplarodriguez

Recommandé

Recommandé

Contenu connexe

Similaire à "Meta datos & Google Rich Snippets" por @iplarodriguez

Similaire à "Meta datos & Google Rich Snippets" por @iplarodriguez (20)

Plus de webcat

Plus de webcat (20)

Dernier

Dernier (15)

"Meta datos & Google Rich Snippets" por @iplarodriguez