Structured Data (Rich Snippets) Iniciación a la optimización de resultados de búsqueda con "fragmentos enriquecidos"

IndustriasI (Juan Carlos Rubio Pineda)

VÍDEO: http://www.youtube.com/watch?v=520WqyAIS1E

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/

Structured Data

IndustriasI S.L.

1.-Introducción: Rich Snipplets (fragmentos enriquecidos ¿Qué ganamos si los usamos?2.-Microdatos3.-Microformatos4.-RDFa5.-Otras tecnologías relacionadas:

● OpenGraph● Google Knowledge Graph

6.-Herramientas7.-Referencias8.- (Anexo): herrramientas curiosas para mejorar nuestro SEO

Ngram Viewer, Google Insights for search, Google Correlate...

1- Introducción (01)¿Qué son losdatos estructurados?

¿Por qué quedo a la colasi 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 valoraciones con estrellas, fotografía de un autor, imágenes, etc.

○ Tipos tratados aquí:■ 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)● 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 (09)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 (04)

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

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>

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>

3- Microformatos (4)

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

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: Capacitaa cualquier página web a convertirse 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 web para una correcta representación del contenido cuando compartimos un enlace.● Basado en RDFa; utilizaremos etiquetas META en el

<HEAD>

5- Otras tecnologías relacionadas: opengraph(2)

AAAAAHHHHH, OpenGraph, Claaaro....

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

5- Otras tecnologías relacionadas: opengraph(3)

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

5- Otras tecnologías relacionadas: opengraph(5)

Ejemplo de código

5- Otras tecnologías relacionadas: opengraph(6)

Tendría más imágenes:

5- Otras tecnologías relacionadas: opengraph(7)

¡Perfecto!

¿Cómo lo hago

en mi wordpress?

Con su plugin oficial >>

5- Otras tecnologías relacionadas: GOOGLE KNOWLEDGE GRAPH (1)

5- Otras tecnologías relacionadas: gkg (2)

● El Gráfico de conocimiento se utiliza para responderpreguntas y para ayudarte a descubrir más información sobre lamateria en la que estásinteresado.

5- Otras tecnologías relacionadas: gkg (3)El carousel es un efecto visual interactivo muy llamativo

5- Otras tecnologías relacionadas: gkg (4)

Si pinchamos en su obra, vemos el carousel

5- Otras tecnologías relacionadas: gkg (5)

Cada album, devuelve datos enriquecidos

5- Otras tecnologías relacionadas: 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● RDFa Test: http://rdfa.info/vocabs/rdfa-test● RDFA developer: https://addons.mozilla.org/es/firefox/addon/rdfa-developer/● Rhizomer: http://rhizomik.net/html/rhizomer/● Virtuoso Open Source: http://virtuoso.openlinksw.com/dataspace/doc/dav/wiki/Main/

● 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● ITSMO userguide: http://goo.gl/FNFm4● Apache Jena: http://goo.gl/f3qgz● SocialLancer: http://goo.gl/vJir1● Culturomics: http://goo.gl/7vZlE● Instruciones NGRAM: http://goo.gl/rDMqT● Inboundwriter: http://www.inboundwriter.com

7- REFERENCIAS

8.-Herramientas curiosas para mejorar el SEO● Es posible utilizar tres herramientas de

google que nos ayudarán a llegar mejor al público, y a generar mayor interés por lo que ofrecemos (esto no va de POSICIONARSE)

● Objetivos:○ Encontrar direccionalidad, moda, o tendencia

sobre un tema. Aprovechar la "ola" a nuestro favor.○ Contrastar si lo que ofrecemos es un término que

está siendo buscado (¿existen clientes potenciales?)

○ ¿Cómo "anunciar" lo que queremos ofrecer para conseguir el máximo impacto?

● Herramienta capaz de cuantificar tendencias culturales examinando palabras o frases entre más de 5 millones de libros.

● Puede filtrarse por años de publicación.● Puede orientarnos a elegir determinados

términos frente a otros para que nuestros contenidos sean más atractivos.

8.-Herramientas curiosas para mejorar el SEO (2)

8.-Herramientas curiosas para mejorar el SEO (3)

8.-Herramientas curiosas para mejorar el SEO (4)¿Cómo afinar más? Operadores Sufijo y relacionales:

8.-Herramientas curiosas para mejorar el SEO (4)

8.-Herramientas curiosas para mejorar el SEO (5)

8.-Herramientas curiosas para mejorar el SEO (6)

8.-Herramientas curiosas para mejorar el SEO (6)Google Insights for search: o "estadísticas de búsqueda de google"● Nos muestra intereses, modas y

tendencias● Permite comparar búsquedas● Permite localizar áreas geográficas de

influencia o interés sobre determinados temas

8.-Herramientas curiosas para mejorar el SEO (7)

8.-Herramientas curiosas para mejorar el SEO (8)

8.-Herramientas curiosas para mejorar el SEO (9)

8.-Herramientas curiosas para mejorar el SEO (10)

Conociendo lo que interesa en cada parte del mundo podría.... podría... ¡¡Aiiiinnnsssss!!! no se me ocurre nadaaaa... Así no voy a llegar a emprendedor. Tendré que ser notario.

8.-Herramientas curiosas para mejorar el SEO (11)

● Herramienta experimental.● Con Google insights o trends, se obtienen

series de frecuencia de búsqueda al introducir una consulta (de momento, sólo EEUU).

● Con Google Correlate, se introducen series de datos (objetivo) y se obtienen como resultados aquellas consultas cuya frecuencia, sigue un patrón similar.

8.-Herramientas curiosas para mejorar el SEO (12)

8.-Herramientas curiosas para mejorar el SEO (12)● Google Correlate calcula el coeficiente de

correlación Pearson entre las series temporales de entrada que proporcionemos y las series temporales con las frecuencias de búsqueda por cada consulta en las BD de Google.

8.-Herramientas curiosas para mejorar el SEO (13)

8.-Herramientas curiosas para mejorar el SEO (14)● El coeficiente de correlación de Pearson

puede definirse como un índice que puede utilizarse para medir el grado de relación de dos variables cuantitativas.

8.-Herramientas curiosas para mejorar el SEO (15)

8.-Herramientas curiosas para mejorar el SEO (15)