Gdg 2013

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)

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/

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

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

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

1-Introducción:
EJEMPLOS (03)
● Comercio electrónico:
● Series de televisión

1-Introducción:
EJEMPLOS (04)
Películas
Programación de eventos

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

1-Introducción:
EJEMPLOS (06)

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.

1-Introducción:
EJEMPLOS (08)
Mmmmmh... Interesante....

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

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

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

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>

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>

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.

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......
[...]

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

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>

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>

● 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
○ ...

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.

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>

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>

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>

opengraph(2)
AAAAAHHHHH,
OpenGraph, Claaaro....

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

opengraph(3)

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

opengraph(5)
Ejemplo de código

opengraph(6)
Tendría más imágenes:

opengraph(7)
¡Perfecto!
¿Cómo lo hago
en mi wordpress?
Con su plugin oficial >>

GOOGLE KNOWLEDGE GRAPH (1)

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.

gkg (3)
El carousel es un efecto visual interactivo muy llamativo

gkg (4)
Si pinchamos en su obra, vemos el carousel

gkg (5)
Cada album, devuelve datos enriquecidos

gkg (6)
Carousel disponible también en google images:

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

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

Gdg 2013

Recomendados

Recomendados

Más contenido relacionado

Similar a Gdg 2013

Similar a Gdg 2013 (20)

Más de Juan Carlos Rubio Pineda

Más de Juan Carlos Rubio Pineda (20)

Último

Último (20)

Gdg 2013