23 ago
2012

Mejorando los snippets en Google con microdata: Breadcrumb.

Los snippets de las SERP (Search Engine Result Pages) son los pequeños trozos de información se muestran en los resultados de los buscadores, normalmente los controlamos con el titulo de la página y la descripción, pero mediante el uso de microdata podemos aumentar y mejorar la información que se muestra, haciendo que el buscador “entienda mejor” nuestra página y que muestre un rich snippet con más información.

En este post veremos cómo usar el microformato de breadcrumb para indicar a Google el lugar que ocupa nuestra página dentro de la jerarquía de navegación de nuestro sitio. Aunque se presentó en 2009, hay pocas webs que lo usen, pese a que es muy sencillo y útil.

Antes de nada vamos a ver un snippet “estándar”:

image

Muchas veces, la dirección de la página no aporta nada al usuario, sobre todo si el gestor de contenidos que usamos no posee la capacidad de generar urls semánticas(y el usuario ve algo como “www.dominio.com/?p=123232”).

Usando el microformato de breadcrumb, lograremos un doble beneficio:

  • Logramos que el buscador entienda mejor la estructura lógica y de navegación de nuestra web.
  • Mostramos al usuario el lugar lógico de la página dentro de nuestra web, de esta manera podemos mostrar, por ejemplo la situación de un producto dentro de la estructura de nuestro catálogo, aunque la url normal no lo exprese.

Un resultado de búsqueda de una página en la que se ha usado el microformato queda así:

image

Se puede ver que, en lugar de la dirección, aparecen enlaces en cada una de las “migas” de navegación. En caso de que la navegación sea bastante larga, se usan unos puntos suspensivos en los elementos centrales.

 

Para contener esta información debemos añadir unas propiedades a los elementos HTML que conforman nuestro breadcrumb, así en lugar del código HTML “típico”:

<a href="http://www.example.com/dresses">Dresses</a> ›
<a href="http://www.example.com/dresses/real">Real Dresses</a>

Debemos usar algo más de HTML decorándolo con etiquetas de microdata:

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/dresses" itemprop="url">
    <span itemprop="title">Dresses</span>
  </a>
</div>

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/dresses/real" itemprop="url">
    <span itemprop="title">Real Dresses</span>
  </a>
</div>

Vemos que se crean elementos (en este caso divs) que sirven de contendor y se les etiqueta, primero como un ámbito de ítem (con el itemprop) y luego se especifica que el ítem es de tipo breadcrumb (con itemtype). Luego, dentro del div, la url enlace se identifica como la propiedad url (usando el itemprop) y al contenido del span se le etiqueta como propiedad title, siendo el titulo visible de la miga.

 

Tenéis la documentación y ejemplos mas completos en la ayuda para webmasters de Google , además podéis probar como quedarían con la Rich Snippets Testing Tool.

En resumen, una manera fácil de mejorar la información que proporcionamos al buscador y a nuestros posibles visitantes y que es especialmente interesante en caso de que nuestra web no tenga urls semánticas.

PD: Aquí tenéis más información de microformatos para Google.

Saludos cancamuseros!

Varios | |

No se aceptan más comentarios
Seguir a enriquin en Twitter View Enrique Blanco's profile on LinkedIn

En ocasiones veo business

Este es el blog personal de Enrique Blanco, Ingeniero Informático y Executive MBA por el Instituto de Empresa, donde trataré temas relacionados con la tecnología, las empresas, Internet y, en general, cosas que me resulten interesantes.

Actualmente trabajo como consultor en Aventia y soy uno de los socios fundadores y el responsable técnico de Deportempresas.

Últimos Comentarios

Comment RSS

Histórico