Con HTML5 uno de los aspectos que más fuerza está cogiendo en las páginas es la semántica, que un robot pueda ser capaz de interpretarla correctamente.

No hace mucho me di cuenta de que en las búsquedas de Google, para algunos resultados aparece debajo del titulo un breadcrumb del sitio web, en lugar de la clásica URL.

Breadcrumb Google

Resulta que lograr estos resultados es bastante sencillo si hacemos uso de los recursos que la web semántica nos proporciona.

¿Cómo generamos los breadcrumbs?

Generar un breadcrumb que pueda leer Google es bastante sencillo, basta con usar microdatos insertados en los distintos elementos del breadcrumb. Para gestionar estos microdatos usamos los atributos: itemscope, itemtype y itemprop.

Con esto el  breadcrumb quedaría como el siguiente:

En este caso hemos utilizado los microdatos para algo tan sencillo como puede ser generar un breadcrumb que Google pueda leer y posteriormente introduzca en las páginas de resultados. Sin embargo, mediante microdatos podemos indicarle a Google distintos datos, como podemos encontrar en algunas búsquedas  estrellas del rating de un articulo, precios de artículos (en el caso de una tienda online)… las posibilidades son muchas.

El borrador con la documentación sobre los microdatos podemos encontrarlo aqui