Cómo utilizar los Rich Snippet con microdatos en tu web paso a paso.

Gracias a la utilización de datos estructurados en una web, Google y cualquier buscador de Internet, puede conocer mejor el contenido de la misma para almacenarlo con mayor precisión dentro de su índice o mostrarlos con un formato especial en los resultados de las búsquedas que ejecutan sus usuarios.

Los datos estructurados le permiten al buscador formatear los resultados de las búsquedas de sus usuarios, de tal manera que al mostrarlos, se identifique perfectamente y de un sólo vistazo, cada apartado esencial del contenido de la página web que mejor se ajusta a la búsqueda realizada por los mismos (presentando un "Rich snippet" o un "Rich Card" con la información de su web).

Hoy vamos a centrarnos en emplear los datos estructurados en una web para que pueda optar a mostrar la información de una receta, de manera diferenciadora y adaptada, a las particularidades de la búsqueda que haya realizado el usuario en Google.

Por ejemplo, si un usuario de Google buscara una receta determinada, en función de los algoritmos de Google, se le puede presentar no sólo el típico enlace a su sitio web con la receta, sino un pequeño "resumen" con la imagen del plato, el resumen de su realización y los detalles de sus ingredientes. Y como mínimo, en caso de que por las peculiaridades del algoritmo de Google y el tipo de búsqueda del usuario, no se presentara en forma de "Rich Snippet" o de "Rich Card", si muestre correctamente la información de sus datos estructurados.

Rich Snippets, Rich Card y Datos Estructurados en Google

Para entender mejor todos los conceptos, te recomiendo acceder a la guía: Qué son y cómo se utilizan los Rich Snippets, Rich Cards y los Datos en una web.

A modo de resumen, te voy a mostrar las diferentes variantes que ofrece Google para presentar la información de una web en los resultados de las búsquedas de los usuarios de una manera especial y adaptada, no sólo a su búsqueda sino también al dispositivo desde donde la está realizando:

Los Datos Estructurados:

La utilización de datos estructurados permite a los buscadores como Google obtener datos de una web que obedece a estructuras de información prefijadas dentro de la misma, para luego mostrarlos en los resultados de las búsquedas. 

Presentar el nombre tu web claramente, su descripción, el autor, la fecha de actualización o eventos que organices en la misma, es parte de lo que lo por medio de los datos estructurados puedes presentar en los resultados de búsqueda de una manera especial.

Por ejemplo, el título y la descripción de un sitio web presentada en los resultados de Google utilizando datos estructurados:

Los Rich Snippets (Fragmentos Enriquecidos): 

Imagina que deseas mostrar en los resultados de búsqueda de Google una "información extra" que acompañe al enlace del resultado que va a tu web.  

Por ejemplo, veamos qué pasaría al mostrar los resultados de tu negocio en Google, de una tienda online, una receta, o un restaurante: 

• Cuando Google presente los resultados del hotel, podría mostrar su localización, la calificación que otros usuarios han realizado de su servicio, etc...

Rich Cards (Tarjetas Enriquecidas)

Las tarjetas enriquecidas no sólo muestran la información con la potencia de los anteriormente explicados fragmentos enriquecidos, sino que además la adapta mejor al dispositivo que el usuario está utilizando para realizar dicha búsqueda.

El mejor ejemplo de cómo ha evolucionado la presentación de resultados por medio de datos estructurados, fragmentos enriquecidos y tarjetas enriquecidas lo proporciona Google en su Blog oficial para webmasters: 

¿Siempre se van a mostrar en Google mis fragmentos enriquecidos y mis tarjetas enriquecidas?

IMPORTANTE: Aunque se aplique el marcaje de etiquetas en una web de fragmentos enriquecidos, Google se reserva la posibilidad de que éstos se muestren o no en los resultados de búsqueda, en función de las decisiones de su propio algoritmo y el cumplimiento de las reglas de calidad de contenidos explicados en Introduction to structured data:

Fragmento original de Introduction to Structured Data de Google explicando sus guías de calidad

Qué son los Microdatos para los Datos Estructurados:

A la hora de utilizar datos estructurados en una web, el marcado de los mismos se puede realizar de dos formas:

Microdatos:

Son unas propiedades o parámetros que se añaden en las etiquetas HTML, que los buscadores como Google o navegadores de internet como Chrome, Explorer, Edge, FireFox... pueden interpretar de una manera determinada, para darles formato o asignarle una conceptualización determinada a la etiqueta HTML donde se han insertado.

Son "metadatos", es decir, una clase de dato que es capaz de almacenar en su interior cualquier clase de información (de ahí viene "meta").

Los Microdatos son ideales para formar Rich Snippet. 

Cómo preparar la entrada de una receta en un Blog o en una Web con Microdatos para que pueda optar a presentarse en Google como un Rich Snippet (Fragmento Enriquecido):

Gracias a la webcodetools y su sección  "Receipe Information Generator", veréis que podemos entender sin problemas cómo funcionan los microdatos y aplicarlos en nuestra web o Blog para montar una receta:

<div itemscope itemtype="http://schema.org/Recipe"> 

<h1 itemprop="name"></h1><br> 

<img itemprop="image" src=""><br> 

Por <span itemprop="author"></span><br> 

<span itemprop="description"></span><br> 

Tiempo de preparado: <time datetime="PT" itemprop="prepTime"></time>, 

Tiempo de cocinado: <time datetime="PT" itemprop="cookTime"></time>,  

Tiempo total: <time datetime="PT" itemprop="totalTime"></time><br> 

Nutricional: <span itemprop="recipeYield"></span><br> 

<div itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation"> 

Calorías por pieza: <span itemprop="calories"></span><br> 

Grasa por pieza: <span itemprop="fatContent">g</span> 

</div> 

</div>

No es necesario que todo el código de vuestra página tenga por todas partes los microdatos que he marcado. Pero si deben aparecer en el mismo orden indicado y nunca deben utilizarse sólo como código, es decir, deben tener la descripción de cada código justo a su lado. Es necesario recordad que en la guía de calidad de Google, no se recomienda utilizar microdatos "ocultos". Es decir, microdatos que no presenten información visible al usuario final. 

Se puede hacer una pequeña ficha al principio o al final del artículo sobre la receta con el código que a continuación explico y tal y como lo presenté arriba:

•  <div itemscope itemtype="http://schema.org/Recipe"> Indica que dentro del DIV, se va a mostrar una Recipe (receta). 

• <h1 itemprop="name"></h1><br> Indica que dentro del título de la entrada o de la página H1, va a ir el name (nombre de la receta). 

• <img itemprop="image" src=""><br> Indica que en src= va a ponerse la ruta a la imagen de la receta. 

•  Por <span itemprop="author"></span><br> Indica el autor de la receta, se pondría como ejemplo el nombre de la persona que la crea <span itemprop="author">Miguel García Sánchez-Colomer</span>  

•  <span itemprop="description"></span><br> Aquí dentro se pondría la descripción de la receta. Por ejemplo: <span itemprop="description">Rica receta de tarta</span><br> 

• En el resto se añade la información que cualquier receta necesita para poder optar a ser presentada como fragmento enriquecido en los resultados de búsqueda de Google.

Un ejemplo de cómo quedaría nuestro código final en la web o blog donde queramos utilizarlo:

<div itemscope itemtype="http://schema.org/Recipe"> 

<h1 itemprop="name">Receta de ejemplo</h1><br> 

<img itemprop="image" src="">http://RUTA_URL/IMAGEN_DE_RECETA<br> 

Por <span itemprop="author">Nombre de autor</span><br> 

<span itemprop="description">La descripción de una rica receta de una tarta</span><br> 

Tiempo de preparado: <time datetime="PT30M" itemprop="prepTime">30M</time>,  

Tiempo de cocinado: <time datetime="PT20:15" itemprop="cookTime">20:15</time>,  

Tiempo total: <time datetime="PT1H30M" itemprop="totalTime">1H30M</time><br> 

Nutricional: <span itemprop="recipeYield">1 Pizza (4 raciones)</span><br> 

<div itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation"> 

Calorías por pieza: <span itemprop="calories">1500</span><br> 

Cantidad por pieza: <span itemprop="fatContent">100g</span> 

</div> 

</div> 

 En Blogger o WordPress, al igual que en cualquier sistema de publicación web, tendrás que meterte en el HTML de la entrada para poder escribir esta parte del código en tu receta tal cual te he explicado aquí. Si dejas que automáticamente te genere el código la propia herramienta, no tendrás el formato adecuado en alguno de los campos y no funcionará como deseas.

Tipos de Rich Snippets que puedes montar con Microdatos

Gracias a webcodetools verás que te proporciona la oportunidad de optar a poder presentar tu información en Google por medio de Rich Snippets, utilizando su generador de microdatos para todos estos tipos de formato:

Es muy importante saber seleccionar bien el tipo de microdato a emplear, dependiendo de la clase de información que vamos a publicar. De esta manera podremos optar a presentaciones especiales en los resultados de Google para nuestros:

• Vídeos
• Reviews
• Artículos
• Álbumes musicales
• Listas de música (Playlist)
• Recetas
• Ofertas de productos
• Aplicaciones de Software
• Eventos
• Restaurantes
• Tiendas

¿Cómo compruebo si tengo bien los datos estructurados?

Hasta hace poco, los datos estructurados eran en ocasiones difíciles de arreglar, hoy día con la nueva herramienta de Google Developers para la prueba de datos estructurados la tarea se ha simplificado enormemente.

Te muestro a continuación cómo utilizar esta magnífica aplicación que te ayudará a tener perfectamente al día los datos estructurados de tu web.

• Localiza en el código de tu web o Blog dónde escribes "cosas" a las que luego se les asigna un formato especial en los resultados de las búsquedas: nombre de autor, fecha de actualización, título... En una tienda online podrían ser importes, valoraciones de product, etc...

1) Para acceder a la herramienta de prueba de datos estructurados haz "clik" aquí

• En la pantalla que aparece introduce la dirección de la página donde hayas introducido los datos estructurados. 
• A la derecha te saldrá la comprobación de si hay errores o tienes cosas que cambiar con los datos estructurados que hayas utilizado.

2) En la zona de la izquierda Haz clik en la parte superior izquierda "Obtener la URL" para escribir la dirección de tu web:

• Ten en cuenta que la URL (dirección web) que introduzcas sera la que sea revisada para datos estructurados. Si pones la URL de tu web, analizarás la página principal. Si pones la URL de una página en concreto de tu web, analizarás esa página en concreto.
• En los Blogs, donde la mayor parte del código está en la página principal, conviene que pruebes siempre una vez con tu dirección principal (tu nombre_de_blog.com o nombre_de_blog.BlogSpot.com o wp...) y después siempre repitas la prueba con una de las direcciones del detalle de una de tus entradas. Muchas veces puedes tener bien los datos estructurados a nivel de página principal pero los puedes estar utilizando mal a nivel de entrada.

3) En la zona de la derecha, saldrán los resultados de la revision de datos estructurados en tu web, donde se te indicarán aquellos datos que han sido localizados y si tienen "error", si son un "aviso" o están correctos.

En general, la mayor parte de errores que puedan salirte es porque tengas campos mal colocados o algún campo con dato incorrecto o sin rellenar. Cualquier duda que tengas pregunta en los comentarios.

¿Qué consigo al utilizar datos estructurados?

Al utilizar Datos estructurados (en este caso, con microdatos), conseguiremos dos características fundamentales para el SEO (posicionamiento en buscadores):

• Indexar mejor toda nuestra información en el buscador (Google)
• Optar a presentar un Rich Snippet (Fragmento enriquecido) en los resultados del buscador.

Si quieres hacer la presentación de datos en forma de Rich Cards con JSON-LD, ejecuta esta guía: Rich Cards (cartas enriquecidas).