¿Quieres valorar este artículo? Gracias

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (5 votos, promedio: 4,00 de 5)
Cargando…

Última modificación: 11 julio 2017

Cómo crear tarjetas enriquecidas con JSON-LD

En mayo de 2016  Google Search Console incorporó una nueva funcionalidad: “Las tarjetas enriquecidas” o Rich Cards, en principio disponibles solo para los resultados de búsqueda en inglés. 

Hoy 21 de marzo de 2017 nos anuncian desde su blog, que las tarjetas enriquecidas ya están disponibles en cualquier configuración regional admitida por Google. 

Search Console-Tarjetas Enriquecidas

¿Qué son las tarjetas enriquecidas?

“Las Tarjetas Enriquecidas” o Rich Cards, son un formato de resultado de búsqueda que surge como evolución de los Rich Snippets que tanto éxito han tenido y por el aumento de la demanda de contenidos desde dispositivos móviles, que exigen mostrar los resultados de forma más clara y organizada.

El contenido creado con tarjetas enriquecidas se muestra al principio de las páginas de resultado del buscador (SERPs). La presentación es tipo un carrusel de fichas (similar Google Shopping) en el que se incluye una imagen y diferentes datos remarcados.

Si consigues crear unas tarjetas atractivas y de calidad en tu sitio te ayudará con el posicionamiento orgánico mejorando el SEO.

TarjetasEnriquecidas-RichCards

Tipos de tarjetas enriquecidas

La información ofrecida en “El Blog para Webmasters de Google” y en la “web de desarrolladores de Search Console” es contradictoria.  

En el blog para webmaster nos indican que actualmente se pueden crear tarjetas enriquecidas para recetas, películas y restaurantes locales. Por el contrario en la web de desarrolladores de Search Console nos enseñan a crear tarjetas estructuradas para los siguientes contenidos: recetas, libros, eventos, cursos, productos

Aunque en principio las tarjetas enriquecidas están funcionando para un tipo limitado de contenidos (recetas, películas y restaurantes), en un futuro estos serán ampliados, Google está trabajando y experimentando con tarjetas para nuevos tipos de contenido.

Como actualmente disponemos de información para trabajar con estos datos, puedes ir preparando tu web e incluir tarjetas de recetas, eventos, cursos…

Tipos de Tarjetas Enriquecidas

¿Se muestran siempre las tarjetas enriquecidas?

No, es algo que depende de Google y desconozco el criterio a seguir. En principio estamos hablando de una funcionalidad muy nueva y que está en continuo desarrollo y experimentación. Pasa un poco como con los Rich snippets, que no siempre se muestran aunque realices la misma búsqueda en diferentes ocasiones. 

De momento esto es así para todos los sitios y no depende de la cantidad de visitas que recibas al día, de tu reputación, de la calidad de tus backlinks

A pesar de lo dicho, opino que las tarjetas enriquecidas nos ayudan a mostrar nuestro contenido de manera más atractiva, ofrecer una información detallada, clara y relevante, mejorar la experiencia de usuario y por consiguiente el SEO…

Además al ser una funcionalidad nueva, implementar Rich Cards nos ayudará a destacar un poco de la competencia.

¿Cómo crear tarjetas enriquecidas en una web?

Formatos disponibles

Como son datos estructurados podemos crearlas en tres formatos diferentes: JSON-LD, Microdata y RDFa.

Google nos recomienda que trabajemos con JSON-LD
 

Microdata y RDFa se construyen utilizando etiquetas de HTML.  JSON-LD se desarrolla con JavaScript. Hay que crear un <script> dentro de la cabecera (<head>) de nuestra página (<body>). Este script incluye las etiquetas de marcado y el contenido necesario que formaran la tarjeta enriquecida.

Código del script JSON-LD ejemplo para recetas de cocina

Este código <script> puede colocarse dentro del cuerpo o del head de la página.

Voy a repasar y explicar un poco el código.

Descripción del código

Las primeras líneas corresponden a la declaración del script de tipo JSON-LD, que utiliza datos estructurados según recomendación de schema.org

luego declaramos el tipo de datos estructurados, en este caso recetas (recipe).

Recuerda que hay otros tipos como “@type”: “Event”, “@type”: “Course”…

a partir de aquí el código hace referencia a los campos de título, autor, imagen y descripción de cada receta:

como puedes observar podemos añadir valoraciones de usuarios: agregando un dato de “@type”: “AggregateRating”, para destacar que la receta a obtenido una valoración realizada por 276 usuarios de 4.5 sobre 5.

otros datos que podemos incluir son los tiempos de preparación, dificultad

el siguiente tipo de datos es la “Información Nutricional“. Hay que declararlo como @type y sirve para especificar valores referentes a grasas, calorías, fibra…

y para finalizar los dos bloques de la receta correspondientes a ingredientes e instrucciones para realizar la receta paso a paso. Los ingredientes y los pasos de preparación se nombran uno a uno entre comillas y separados de comas para que aparezcan en formato lista (un ingrediente debajo de otro y un paso de preparación debajo de otro).

Código del script JSON-LD ejemplo para eventos

Herramientas de prueba

Para comprobar tus datos estructurados, Google nos facilita tres herramientas:

  1. Herramienta de prueba de datos estructurados: te muestra los errores cometidos en las etiquetas y una vista previa de como queda tu tarjeta enriquecida en la página de búsqueda.
  2. Informe de tarjetas enriquecidas: abre Search Console y te muestra las tarjetas que contienen errores y cuáles se pueden mejorar añadiendo más etiquetas.
  3. Prueba de AMP: para validar páginas AMP.

Crear Tarjetas Enriquecidas en WordPress con código

En el siguiente tutorial avanzamos un paso más con las tarjetas enriquecidas. Hablaré sobre las propiedades requeridas y recomendadas. Además te enseñará a crear código script para tarjetas enriquecidas tipo EVENTOS.

Si estás interesado en implementar tarjetas enriquecidas en WordPress sin instalar ningún plugin, te invito a leer el siguiente artículo:

Código script tarjetas enriquecidas


Crear Tarjetas Enriquecidas en WordPress con plugin

Si eres de los que no quiere trastear con el código de los archivos WordPress, no tienes tiempo u otro recurso para desarrollar tarjetas enriquecidas con código, o tu web maneja información de varios tipos de tarjetas enriquecidas, te será más útil leer el post: 

Rich Cards Plugins – Datos estructurados para tarjetas enriquecidas en WordPress

Nerea Liebana

Lph by Nerea Liébana

¿Quieres suscribirte al Newsletter?

Web Hosting

Últimos artículos