"meta datos & google rich snippets" por @iplarodriguez

39
Metadatos Rich Snippets & por: Ivan Pla Rodríguez y Cristina Luengo Maravert

Upload: webcat

Post on 12-Jan-2015

1.529 views

Category:

Technology


1 download

DESCRIPTION

Presentación realizada en el #webcat Barcelona de Mayo del 2012Autor: Ivan Pla Rodríguez (@iplarodriguez)------------------------------------------------RECURSOS:- Understanding Metadatahttp://www.niso.org/publications/press/UnderstandingMetadata.pdf- NISOhttp://www.niso.org/- Dublin Core Texthttp://dublincore.org/documents/dc-text/- Dublin Core RDF-XMLhttp://dublincore.org/documents/dc-rdf/- Dublin Core HTMLhttp://dublincore.org/documents/dc-html/- Schema.orghttp://schema.org- Rich snippets typeshttp://support.google.com/webmasters/bin/topic.py?hl=en&topic=1088474&parent=21997&ctx=topic

TRANSCRIPT

Page 1: "Meta datos & Google Rich Snippets" por @iplarodriguez

Metadatos

Rich Snippets

&

por: Ivan Pla Rodríguez y Cristina Luengo Maravert

Page 2: "Meta datos & Google Rich Snippets" por @iplarodriguez

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

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

PresentaciónSin METADATOS:

Con METADATOS:

Page 3: "Meta datos & Google Rich Snippets" por @iplarodriguez

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

Metadatos: definición

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

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

TRADUCCIÓN:

Page 4: "Meta datos & Google Rich Snippets" por @iplarodriguez

Metadatos: ejemplo práctico

¿Cómo catalogaríais esta imagen?

Page 5: "Meta datos & Google Rich Snippets" por @iplarodriguez

Metadatos: ejemplo práctico

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

Page 6: "Meta datos & Google Rich Snippets" por @iplarodriguez

Metadatos: ejemplo práctico

Autor

Popularidad

Descripción

Palabras clave

Características Técnicas

Page 7: "Meta datos & Google Rich Snippets" por @iplarodriguez

Metadatos: método de introducción

Metadatos manuales

Metadatos automáticos

Autor

Popularidad

Descripción

Palabras clave

Características Técnicas

Page 8: "Meta datos & Google Rich Snippets" por @iplarodriguez

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.

Page 9: "Meta datos & Google Rich Snippets" por @iplarodriguez

Metadatos: sintaxis

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

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

Page 10: "Meta datos & Google Rich Snippets" por @iplarodriguez

Metadatos: sintaxis

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

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

Page 11: "Meta datos & Google Rich Snippets" por @iplarodriguez

Metadatos: sintaxis

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

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

Page 12: "Meta datos & Google Rich Snippets" por @iplarodriguez

Metadatos: estructura

Jerárquica Lineal

Schema.org DCMES (DCMI)

Page 13: "Meta datos & Google Rich Snippets" por @iplarodriguez

Metadatos: granularidad

-

+

+-

Page 14: "Meta datos & Google Rich Snippets" por @iplarodriguez

Metadatos: soportes

Físico Electrónico

LibrosCDsDVDsMapasMesasSillasFloreros...

Imágenes DigitalesFotografías Digitales

Documentos DigitalesArchivos de Programas

Tablas de BBDD...

Todo material sensible a ser catalogado

Page 15: "Meta datos & Google Rich Snippets" por @iplarodriguez

Ciencias de la InformaciónMedicinaDerechoEstadísticaGeografiaMedio ambienteTecnología (CDs, DVDs, ...)

Audiovisuales (Foto, Video, Música, ...)

Internet (Virtualización de datos, Cloud Computing, repositorios, Web, ...)

Metadatos: campos

Page 16: "Meta datos & Google Rich Snippets" por @iplarodriguez

titledescriptionkeywordsrobotscharset

Metadatos: web

Viejos conocidos: METATAGS más comunes

Page 17: "Meta datos & Google Rich Snippets" por @iplarodriguez

RDFaMicroformatosMicrodatos

Metadatos: web

Bienvenidos: Nuevos formatos de marcado

Page 18: "Meta datos & Google Rich Snippets" por @iplarodriguez

Metadatos: web

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

RDFa:

Page 19: "Meta datos & Google Rich Snippets" por @iplarodriguez

Metadatos: web

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

Microformatos:

Page 20: "Meta datos & Google Rich Snippets" por @iplarodriguez

Metadatos: web

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

Microdatos:

Page 21: "Meta datos & Google Rich Snippets" por @iplarodriguez

data-vocabulary

Metadatos: web -> microdatos

schemahttp://schema.org

http://data-vocabulary.org

Microdatos MicroformatosRDFa

Page 22: "Meta datos & Google Rich Snippets" por @iplarodriguez

Metadatos: web -> microdatos

http://schema.org

Page 23: "Meta datos & Google Rich Snippets" por @iplarodriguez

Aplicaciones de softwareContactosEventosVídeosMúsicaOpinionesOrganizacionesProductosPuntuaciones de opinionesRecetasRutas de exploración

Metadatos: web -> microdatos -> Google Rich Snippets

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

Page 24: "Meta datos & Google Rich Snippets" por @iplarodriguez

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>

Page 25: "Meta datos & Google Rich Snippets" por @iplarodriguez

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>

Page 26: "Meta datos & Google Rich Snippets" por @iplarodriguez

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>

Page 27: "Meta datos & Google Rich Snippets" por @iplarodriguez

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>

?¿

Page 28: "Meta datos & Google Rich Snippets" por @iplarodriguez

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>

Page 29: "Meta datos & Google Rich Snippets" por @iplarodriguez

Metadatos: web -> microdatos -> GRS -> Opiniones

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

Page 30: "Meta datos & Google Rich Snippets" por @iplarodriguez

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>

?¿

Page 31: "Meta datos & Google Rich Snippets" por @iplarodriguez

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>

Page 32: "Meta datos & Google Rich Snippets" por @iplarodriguez

Metadatos: web -> microdatos -> GRS -> Puntuaciones

<div itemscope itemtype="http://data-vocabulary.org/Review"> <span class="rating-foreground" style="width:90%"> <meta itemprop="rating" content="4.5" /> </span></div> <div itemscope itemtype="http://data-vocabulary.org/Review"> <span itemprop="itemreviewed">Blast 'Em Up</span>—Game Review Rating: <span itemprop="rating">3.5</span> out of 5 </div> <div itemscope itemtype="http://data-vocabulary.org/Review"> <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>

Page 33: "Meta datos & Google Rich Snippets" por @iplarodriguez

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>

Page 34: "Meta datos & Google Rich Snippets" por @iplarodriguez

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> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://www.example.com/dresses/real" itemprop="url"> <span itemprop="title">Real Dresses</span> </a> ›</div> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://www.example.com/clothes/dresses/real/green" itemprop="url"> <span itemprop="title">Real Green Dresses</span> </a></div>

Page 35: "Meta datos & Google Rich Snippets" por @iplarodriguez

Metadatos: web -> microdatos -> Google Testing Tool

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

Page 36: "Meta datos & Google Rich Snippets" por @iplarodriguez

Metadatos: web -> microdatos -> Google Testing Tool

Page 37: "Meta datos & Google Rich Snippets" por @iplarodriguez

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

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

http://www.bankimia.com

VS

Page 38: "Meta datos & Google Rich Snippets" por @iplarodriguez

Ivan Pla Rodríguez: @iplarodriguezhttp://www.linkedin.com/in/iplarodriguez

¡Muchas gracias!

Con la colaboración de...Cristina Luengo Maravert: @cluengomaravert

http://es.www.linkedin.com/in/cluengomaravert

Page 39: "Meta datos & Google Rich Snippets" por @iplarodriguez

Metadatos

Rich Snippets

&

por: Ivan Pla Rodríguez y Cristina Luengo Maravert