Cómo utilizar las Rich Cards con JSON-LD en tu web paso a paso.

La utilización de datos estructurados en una web, permite a los buscadores de Internet como Google, conocer mejor el contenido de un sitio y presentarlo en los resultados de una manera mucho más comprensible para sus usuarios.

Estos 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 por medio de una "Rich Card". Este formato es una novedad que ha incorporado Google basándose en el éxito de los "Rich Snippets" (Fragmentos enriquecidos).

El nuevo formato de presentación de resultados de Google conocido como Rich Cards, muestra la información de los resultados de una búsqueda, de una manera diferenciadora y adaptada a las necesidades del usuario.

Por ejemplo, si un usuario de Google buscara un vídeo o 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 para el vídeo o la receta, sino con una imagen completa del vídeo o la receta, con los detalles fundamentales de cada propuesta. 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 Cards, si mostrará correctamente la información de sus datos estructurados: el autor, la descripción, etc...

Rich Card, Rich Snippets y el uso de 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:

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:

 

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

Para ver ejemplos de Rich Snippets y cómo se utilizan, ejecuta la guía: Cómo utilizar los Rich Snippet con microdatos en tu web paso a paso.

¿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é tipos de Rich Cards Existen?

Dependiendo de lo que deseas exponer en los resultados de la búsqueda, cuando en ella salga tu web, se pueden presentar distintos tipos de Rich Cards en función del objeto a presentar:

Los tipos de Rich Cards vienen perfectamente explicado en la página de Google Developers a modo de Galería:

Rich Cards para Recetas:

Una elegante manera de presentar la receta con una imagen del vídeo para la realización y la información básica más importante: el autor, la calificación en estrellas de la receta por parte de los visitantes, la cantidad de visualizaciones, el tiempo de elaboración y las calorías.

Rich Cards para Eventos:

Si necesitas organizar eventos en tu web, publicar fiestas, conciertos, reuniones, etc... las tarjetas enriquecidas para eventos muestran la presentación que necesitas.

Una descripción básica del conjunto de eventos y a continuación la lista con la fecha, la hora y otra breve micro descripción sobre cada celebración.

Rich Cards para productos:

Para presentar productos que hayas realizado, es interesante que aparezca la clasificación vía rating por parte de los usuarios. El número de veces que ha sido votado, el precio y si se encuentra o no en Stock. Finalmente una descripción explicativa del producto que acompañe a toda la tarjeta enriquecida.

Rich Cards para Reviews:

 Si vas a realizar el análisis de un libro, la review de un teléfono móvil, un ordenador, el análisis de cualquier producto, entonces te interesan las tarjetas enriquecidas para review.

Presentan la puntuación de la review como rating, los votos que se le han dado y la descripción completa del producto analizado.

Qué son los Microdatos para los Datos Estructurados y JSON-LD:

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

Con 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. Además los microdatos son muy fáciles de manejar con HTML e intercalar entre el código que utiliza Blogger, WordPress, Joomla o cualquier editor de contenidos web.

Con JSON-LD:

Google es muy claro en su Blog oficial para webmasters cuando se refiere al uso de Rich Cards:

Recomiendan encarecidamente el uso de marcado JSON-LD para obtener los mejores resultados.

Tal como aclara Google: 

JSON-LD, o JavaScript Object Notation for Linked Data, es un método de codificación de datos enlazados usando JSON.

JSON-LD - Wikipedia, la enciclopedia libre

https://es.wikipedia.org/wiki/JSON-LD

Cómo implementar una Rich Card en mi web con JSON-LD:

Si quieres presentarlos en tu web, es sencillo, dirígete a la galería de Rich Cards de Google y sigue los pasos que te explico en la imagen a continuación:

• Selecciona el tipo de Rich Card que quieres implementar y después pulsas en "SEE MARKUP" para llevarte el ejemplode cómo debes implementarla en tu web.

Un ejemplo de implementación:

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.

En este caso he seleccionado "SEE MARKUP" de cómo se implementa el código para presentar una review:

Simplemente tienes que copiarte y pegarte en tu EDITOR HTML el código y cambiar los campos de ejemplo por los que correspondan a tu review (lo mismo sucede con las recetas, los eventos o los productos, se hacen exactamente igual: see markup y después en tu editor html hacer los cambios que necesites):

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Review",
  "itemReviewed": {
    "@type": "Thing",
    "name": "Super Book"
  },
  "author": {
    "@type": "Person",
    "name": "Joe"
  },
  "reviewRating": {
    "@type": "Rating",
    "ratingValue": "7",
    "bestRating": "10"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Washington Times"
  }
}
</script> 

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:

• <script type="application/ld+json">
  { y </script>  Indica la estructura del JSON-LD que le advierte a Google de que se va a intentar expresar la existencia de una Rich Card hecha con JSON-LD.

•   "@context": "http://schema.org/",
    "@type": "Review",
    "itemReviewed": {
      "@type": "Thing",
      "name": "Super Book"
    }, Expresa que es una review, de una cosa y que es un libro.

•   "author": {
      "@type": "Person",
      "name": "Joe"
    },Indica el author de la review. 

•   "reviewRating": {
      "@type": "Rating",
      "ratingValue": "7",
      "bestRating": "10"
    }, Indica la puntuación de la review.

•   "publisher": {
      "@type": "Organization",
      "name": "Washington Times"
    } Indica la web donde se publicará la review.  

¿Cómo compruebo si tengo bien los datos estructurados?, ¿Cómo compruebo que he hecho correctamente el JSON-LD para optar a que se presente una Rich Card?

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 una Rich Card (Tarjeta enriquecida) en los resultados del buscador.ç
• Si no sale la Rich Card, al menos la información del enlace donde aparezca la web en Google, mostrará los campos básicos perfectamente informados (autor, descripción, etc...).