Gdg 2013

878 views

Published on

Introducción a rich snippets: microdatos, microformatos, RDFa, opengraph y herramientas que sacan partido al marcado de datos estructurados.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
878
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Gdg 2013

  1. 1. Structured Data(Rich Snippets)Iniciación a la optimización de resultados debúsqueda con "fragmentos enriquecidos"IndustriasI S.L. (Juan Carlos Rubio Pineda)
  2. 2. Creative CommonsLicencia: ShareAlike 3.0Usted es libre de:● Compartir: copiar, distribuir, transmitir,etc.● Modificar la presentación● Hacer uso comercial de la mismaManteniendo autoría y misma licencia.Más información:http://creativecommons.org/licenses/by-sa/3.0/
  3. 3. Structured DataIndustriasI S.L.1.-Introducción: Rich Snipplets (fragmentos enriquecidos ¿Qué ganamos silos usamos?2.-Microdatos3.-Microformatos4.-RDFa5.-Otras tecnologías relacionadas:● OpenGraph● Google Knowledge Graph6.-Herramientas7.-Referencias
  4. 4. 1- Introducción (01)¿Qué son losdatosestructurados?¿Por quéquedo a la colasi no los uso?
  5. 5. 1- Introducción (02)● ¿Qué es un fragmento enriquecido (RichSnipplets)?○ Es un resumen de una página que aparece en losresultados de búsqueda de Google, Bing o Yahoo, yen Facebook (cuando se comparte un vínculo) en unformato llamativo y resaltado; por ejemplomostrando puntuaciones con estrellas, fotografía deun autor, imágenes, etc.○ Tipos:■ Microdatos (recomendado por Google),microformatos y RDFa
  6. 6. 1-Introducción:EJEMPLOS (03)● Comercio electrónico:● Series de televisión
  7. 7. 1-Introducción:EJEMPLOS (04)PelículasProgramación de eventos
  8. 8. 1-Introducción:EJEMPLOS (05)RecetasAutoría...
  9. 9. 1-Introducción:EJEMPLOS (06)
  10. 10. 1-Introducción:EJEMPLOS (07)● ¿Cuáles son las ventajas inmediatas de usardatos estructurados?○ Proporciona a los buscadores información precisa eimportante para mostrar de forma resaltada.○ Los resultados son muy interactivos○ Ayuda a puntuar más alto en las búsquedas(usados con moderación)○ Ayuda a Facebook a mostrar información apropiadacuando los usuarios comparten vínculos○ Aumentan el Click Through Rate, por ejemplo enresultados de blog con foto de autor.
  11. 11. 1-Introducción:EJEMPLOS (08)Mmmmmh... Interesante....
  12. 12. 1-Introducción:EJEMPLOS (09)● Tipos de Rich Snipplets:○ Trazas, "miguitas de pan" o Breadcrumbs○ Eventos○ Música○ Organizaciones○ Productos○ Recetas○ Puntuación de usuarios○ Opiniones○ Aplicaciones software○ Vídeos
  13. 13. 1-Introducción:EJEMPLOS (10)Pasos para crear un fragmento enriquecido:1. Elegir un formato de marcado (microdatos,microformatos, RDFa...)2. Marcar el contenido (persona, evento, etc)3. Probar el marcado:http://www.google.com/webmasters/tools/richsnippets
  14. 14. 2- microdatos (01)● La especificación HTML5 sobre microdatos es unaforma de etiquetar contenido para describir un tipoespecífico de información (por ejemplo, opiniones,información sobre personas o eventos).● Cada tipo de información describe un tipo de elementoespecífico como, por ejemplo, una persona, un evento ouna opinión.● Por ejemplo, un evento incluye las propiedades"venue", "starting time", "name" y "category".● Para una lista completa de microdatos, consultar http://schema.org/docs/full.html
  15. 15. 2- microdatos (02)Ejemplo: bloque HTML breve en el que semuestra la información de contacto básica deRoberto Sánchez.<div>Mi nombre es Roberto Sánchez, pero me llaman "Rober". Esta es mi páginaprincipal:<a href="http://www.example.com">www.example.com</a>Vivo en Alcobendas (Madrid) y trabajo de ingeniero en ACME S.A.</div>
  16. 16. 2- microdatos (03)A continuación se indica el mismo código HTMLmarcado con microdatos:<div itemscope itemtype="http://data-vocabulary.org/Person">Soy <span itemprop="name">Roberto Sánchez</span>,pero me llaman <span itemprop="nickname">Rober</span>.Esta es mi página principal:<a href="http://www.example.com" itemprop="url">www.example.com</a>Vivo en Alcobendas (Madrid) y trabajo de <span itemprop="title">ingeniero</span>en <span itemprop="affiliation">ACME S.A.</span>.</div>
  17. 17. 2- microdatos (04)
  18. 18. 2- microdatos (05)● Microdata consiste en un grupo de pares"nombre/valor".● A los grupos "nombre/valor" se les nombracomo "items"● Cada par "nombre/valor" es una "property"(propiedad).● Para crear un item se usa el atributoitemscope.
  19. 19. 2- microdatos (06)Ejemplo para aplicaciones:Item● itemtype: http://schema.org/mobileapplication● itemprop:○ url: https://play.google.com/.....○ logoimageurl: https://www.gstatic.com/android.........○ logohrefurl: https://play.google.com○ topdeveloperbadgeurl: https://ssl.gstatic.com/android/market_images.......○ name: Cut the Rope○ image: https://lh3.ggpht.com/I5NYwBKCBphMQvQLC7DWgTbMa......[...]
  20. 20. 3- Microformatos (1)● Los microformatos son sencillasconvenciones (conocidas como entidades)que se usan para describir un tipo concretode información (por ejemplo, una opinión, unevento, un producto, una empresa o unapersona).● Cada entidad tiene sus propias propiedades.● Por ejemplo, una persona tiene lassiguientes propiedades: nombre, dirección,cargo, empresa y dirección de correoelectrónico
  21. 21. 3- Microformatos (2)Ejemplo:<div><img src="www.example.com/robertosanchez.jpg" /><strong>Roberto Sánchez</strong>Editor principal de Ediciones ACMECalle Mayor 4Alcalá de Henares, Madrid 28801</div>
  22. 22. 3- Microformatos (3)Con "microformato hCard"<div class="vcard"><img class="photo" src="www.example.com/robertosanchez.jpg" /><strong class="fn">Roberto Sánchez</strong><span class="title">Editor principal</span> de <span class="org">Ediciones ACME</span><span class="adr"><span class="street-address">Calle Mayor 4</span><span class="locality">Alcalá de Henares</span>, <span class="region">Madrid</span><span class="postal-code">28801</span></span></div>
  23. 23. 3- Microformatos (4)
  24. 24. 3- Microformatos (5)● Envuelve tu nombre con "fn"○ La clase "fn" indica que es tu “formatted name”.● La clase "vcard" declara que todo lo queenvuelve, es microformato hCard<span class="vcard"><span class="fn">JamieJones</span></span>● ¿Pasos siguientes?○ Agrega más información hCard○ Enlaza a tus amigos y contactos con XFN○ Añade eventos con hCalendar○ Opina sobre películas, libros y más con hReview○ ...
  25. 25. 4- RDFa (1)● RDFa es una extensión de HTML5 que nosayuda a marcar información como Personas,Lugares, Eventos, Recetas y Opiniones. Esainformación marcada será leída porbuscadores.● Es muy parecido amicrodatos/microformatos.
  26. 26. 4-RDFa (2)Veamos el ejemplo con nuestro amigo "Rober":<div>Mi nombre es Roberto Sánchez, pero me llaman "Rober". Esta es mi páginaprincipal:<a href="http://www.example.com">www.example.com</a>Vivo en Alcobendas (Madrid) y trabajo de ingeniero en ACME S.A.</div>
  27. 27. 4-RDFa (3)Y con marcado RDFa:<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person">Soy <span property="v:name">Roberto Sánchez</span>,pero me llaman <span property="v:nickname">Rober</span>.Esta es mi página principal:<a href="http://www.example.com" rel="v:url">www.example.com</a>.Vivo en Alcobendas (Madrid) y trabajo de <span property="v:title">ingeniero</span>at <span property="v:affiliation">ACME S.A.</span>.</div>
  28. 28. 5- Otras tecnologías relacionadas:opengraph(1)● OpenGraph Protocol: Capacitaa cualquier página web aconvertirse en un objeto ricoen un gráfico social, pensado paraun entorno interactivo(esteeee... ¿FACEBOOK?)● Por ejemplo, en Facebook, OpenGraphpermite incluir información precisa sobre nuestro sitio webpara una correcta representación del contenido cuandocompartimos un enlace.● Basado en RDFa; utilizaremos etiquetas META en el<HEAD>
  29. 29. 5- Otras tecnologías relacionadas:opengraph(2)AAAAAHHHHH,OpenGraph, Claaaro....
  30. 30. 5- Otras tecnologías relacionadas:opengraph(2)Ejemplo;● En Facebook (por decir algo) se puedecompartir una página desde dentro deFacebook, en tu muro, o en el de tusamigos.● También se puede compartir una página através de la URL de Facebook:http://www.facebook.com/sharer.php?u=url_pagina&t=titulo_contenido
  31. 31. 5- Otras tecnologías relacionadas:opengraph(3)
  32. 32. 5- Otras tecnologías relacionadas:opengraph(4)Metadatos Básicos: dentro de la etiqueta HTML<head> podemos colocar las siguientespropiedades en etiquetas <meta>:og:title – Título del enlace a compartirog:description – Descripciónog:image – Imagen thumbnail
  33. 33. 5- Otras tecnologías relacionadas:opengraph(5)Ejemplo de código
  34. 34. 5- Otras tecnologías relacionadas:opengraph(6)Tendría más imágenes:
  35. 35. 5- Otras tecnologías relacionadas:opengraph(7)¡Perfecto!¿Cómo lo hagoen mi wordpress?Con su plugin oficial >>
  36. 36. 5- Otras tecnologías relacionadas:GOOGLE KNOWLEDGE GRAPH (1)
  37. 37. 5- Otras tecnologías relacionadas:gkg (2)● El Gráfico deconocimiento se utilizapara responderpreguntas y paraayudarte a descubrirmás información sobre lamateria en la que estásinteresado.
  38. 38. 5- Otras tecnologías relacionadas:gkg (3)El carousel es un efecto visual interactivo muy llamativo
  39. 39. 5- Otras tecnologías relacionadas:gkg (4)Si pinchamos en su obra, vemos el carousel
  40. 40. 5- Otras tecnologías relacionadas:gkg (5)Cada album, devuelve datos enriquecidos
  41. 41. 5- Otras tecnologías relacionadas:gkg (6)Carousel disponible también en google images:
  42. 42. 6- HERRAMIENTAS● Plugins de wordpress:○ Schema Creator: http://goo.gl/mDyww○ EasyChema: http://goo.gl/0iGsU○ All In One Schema.org Rich Snippets: http://goo.gl/ILJbv○ Wordpress SEO by Yoast: http://goo.gl/lUrS9● Test de datos estructurados: http://goo.gl/6eliX● Microdata generator: http://goo.gl/8Np53● Marcado de datos estructurados: http://goo.gl/XTUyQ● Calais: extractor y desambiguador de entidades: http://goo.gl/c8n1e● Swoogle: buscador en web semántica: http://goo.gl/PVNbR● Dbpedia: extractor de info estructurada de la wikipedia: http://dbpedia.org○ Ojo al online acces y SPARQL
  43. 43. 7- REFERENCIAS● Google webmasters: http://goo.gl/moZ4h● Especificación HTML5 para microdatos: http://goo.gl/Q82rU● Good Relations: vocabulario web para comercio electrónico: http://goo.gl/3rEgF● All in one Schema.org Rich Snippets: http://goo.gl/cJ5Kf● Matthew Brown: Datos estructurados y SEO semántico: http://goo.gl/f8nnA● Dashburst.com: http://goo.gl/CzZDd● Seoskeptic: web semántica http://goo.gl/a60Xz● Blog Los tiempos cambian: http://goo.gl/UC1TA● OpenGraph Protocol: http://ogp.me/● El modelo microdata: http://goo.gl/5EinB● Microformatos:http://microformats.org/● RDFa: http://rdfa.info/ Y también: http://www.w3.org/TR/rdfa-primer/● Ayuda de jmerodio sobre marcador de datos: http://goo.gl/p6QmR

×