Gdg 2013
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Gdg 2013

on

  • 747 views

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

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

Statistics

Views

Total Views
747
Views on SlideShare
747
Embed Views
0

Actions

Likes
0
Downloads
10
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Gdg 2013 Presentation Transcript

  • 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. 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. 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. 1- Introducción (01)¿Qué son losdatosestructurados?¿Por quéquedo a la colasi no los uso?
  • 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. 1-Introducción:EJEMPLOS (03)● Comercio electrónico:● Series de televisión
  • 7. 1-Introducción:EJEMPLOS (04)PelículasProgramación de eventos
  • 8. 1-Introducción:EJEMPLOS (05)RecetasAutoría...
  • 9. 1-Introducción:EJEMPLOS (06)
  • 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. 1-Introducción:EJEMPLOS (08)Mmmmmh... Interesante....
  • 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. 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. 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. 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. 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. 2- microdatos (04)
  • 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. 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. 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. 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. 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. 3- Microformatos (4)
  • 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. 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. 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. 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. 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. 5- Otras tecnologías relacionadas:opengraph(2)AAAAAHHHHH,OpenGraph, Claaaro....
  • 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. 5- Otras tecnologías relacionadas:opengraph(3)
  • 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. 5- Otras tecnologías relacionadas:opengraph(5)Ejemplo de código
  • 34. 5- Otras tecnologías relacionadas:opengraph(6)Tendría más imágenes:
  • 35. 5- Otras tecnologías relacionadas:opengraph(7)¡Perfecto!¿Cómo lo hagoen mi wordpress?Con su plugin oficial >>
  • 36. 5- Otras tecnologías relacionadas:GOOGLE KNOWLEDGE GRAPH (1)
  • 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. 5- Otras tecnologías relacionadas:gkg (3)El carousel es un efecto visual interactivo muy llamativo
  • 39. 5- Otras tecnologías relacionadas:gkg (4)Si pinchamos en su obra, vemos el carousel
  • 40. 5- Otras tecnologías relacionadas:gkg (5)Cada album, devuelve datos enriquecidos
  • 41. 5- Otras tecnologías relacionadas:gkg (6)Carousel disponible también en google images:
  • 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. 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