Este documento explica los datos estructurados y fragmentos enriquecidos, incluyendo microdatos, microformatos y RDFa. Estas tecnologías permiten marcar el contenido de una página web de forma que los buscadores puedan extraer y mostrar información relevante como resúmenes, imágenes y estrellas de calificación. El uso de datos estructurados puede mejorar los resultados de búsqueda de una página y la presentación de su contenido cuando se comparte en redes sociales.

1. Structured Data
(Rich Snippets)
Iniciación a la optimización de resultados de
búsqueda con "fragmentos enriquecidos"
IndustriasI S.L. (Juan Carlos Rubio Pineda)

2. Creative Commons
Licencia: ShareAlike 3.0
Usted es libre de:
● Compartir: copiar, distribuir, transmitir,etc.
● Modificar la presentación
● Hacer uso comercial de la misma
Manteniendo autoría y misma licencia.
Más información:
http://creativecommons.org/licenses/by-sa/3.0/

3. Structured Data
IndustriasI S.L.
1.-Introducción: Rich Snipplets (fragmentos enriquecidos ¿Qué ganamos si
los usamos?
2.-Microdatos
3.-Microformatos
4.-RDFa
5.-Otras tecnologías relacionadas:
● OpenGraph
● Google Knowledge Graph
6.-Herramientas
7.-Referencias

4. 1- Introducción (01)
¿Qué son los
datos
estructurados?
¿Por qué
quedo a la cola
si no los uso?

5. 1- Introducción (02)
● ¿Qué es un fragmento enriquecido (Rich
Snipplets)?
○ Es un resumen de una página que aparece en los
resultados de búsqueda de Google, Bing o Yahoo, y
en Facebook (cuando se comparte un vínculo) en un
formato llamativo y resaltado; por ejemplo
mostrando puntuaciones con estrellas, fotografía de
un 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ículas
Programación de eventos

8. 1-Introducción:
EJEMPLOS (05)
Recetas
Autoría...

9. 1-Introducción:
EJEMPLOS (06)

10. 1-Introducción:
EJEMPLOS (07)
● ¿Cuáles son las ventajas inmediatas de usar
datos estructurados?
○ Proporciona a los buscadores información precisa e
importante 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 apropiada
cuando los usuarios comparten vínculos
○ Aumentan el Click Through Rate, por ejemplo en
resultados 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 una
forma de etiquetar contenido para describir un tipo
específico de información (por ejemplo, opiniones,
información sobre personas o eventos).
● Cada tipo de información describe un tipo de elemento
específico como, por ejemplo, una persona, un evento o
una 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 se
muestra la información de contacto básica de
Roberto Sánchez.
<div>
Mi nombre es Roberto Sánchez, pero me llaman "Rober". Esta es mi página
principal:
<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 HTML
marcado 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 nombra
como "items"
● Cada par "nombre/valor" es una "property"
(propiedad).
● Para crear un item se usa el atributo
itemscope.

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 sencillas
convenciones (conocidas como entidades)
que se usan para describir un tipo concreto
de información (por ejemplo, una opinión, un
evento, un producto, una empresa o una
persona).
● Cada entidad tiene sus propias propiedades.
● Por ejemplo, una persona tiene las
siguientes propiedades: nombre, dirección,
cargo, empresa y dirección de correo
electrónico

21. 3- Microformatos (2)
Ejemplo:
<div>
<img src="www.example.com/robertosanchez.jpg" />
<strong>Roberto Sánchez</strong>
Editor principal de Ediciones ACME
Calle Mayor 4
Alcalá 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 que
envuelve, es microformato hCard
<span class="vcard"><span class="fn">Jamie
Jones</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 nos
ayuda a marcar información como Personas,
Lugares, Eventos, Recetas y Opiniones. Esa
información marcada será leída por
buscadores.
● Es muy parecido a
microdatos/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ágina
principal:
<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: Capacita
a cualquier página web a
convertirse en un objeto rico
en un gráfico social, pensado para
un entorno interactivo
(esteeee... ¿FACEBOOK?)
● Por ejemplo, en Facebook, OpenGraph
permite incluir información precisa sobre nuestro sitio web
para una correcta representación del contenido cuando
compartimos 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 puede
compartir una página desde dentro de
Facebook, en tu muro, o en el de tus
amigos.
● También se puede compartir una página a
travé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 siguientes
propiedades en etiquetas <meta>:
og:title – Título del enlace a compartir
og:description – Descripción
og: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 hago
en 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 de
conocimiento se utiliza
para responder
preguntas y para
ayudarte a descubrir
más información sobre la
materia en la que estás
interesado.

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