20 Abr
Datos estructurados

Datos estructurados: información útil para el usuario (y para Google)

UX Researcher ● Web Designer ● 🍺 ● 🤘🏼

Seguro que te ha llamado la atención un resultado de una búsqueda en Google porque destaca más que los demás: tiene estrellitas mostrando un rating, tiene una imagen, una fecha de inicio, un lugar concreto, un listado de grupos de música… Los datos estructurados y la información que muestra está presentada de una forma coherente y útil.

Datos estructurados: recetas

Y este valor añadido hace que ese resultado y no otro sea el que eliges para consumir la información que buscabas. Para conseguir que el snippet de resultado se muestre de esta manera es necesario recurrir a los datos estructurados.

¿Qué son los datos estructurados?

Básicamente son etiquetas de marcado a nivel de HTML que asocian la información que queremos a un tipo de esquema de marcado previamente definido y estandarizado, permitiendo así categorizar de manera semántica esa información.

Esta «biblioteca» de esquemas se encuentra en Schema.org, sitio web donde de forma colaborativa y abierta se definen los tipos de contenidos susceptibles de contener información semántica: eventos, lugares, recetas, organizaciones, personas, reviews, comentarios, valoraciones… Fue creada en 2011 por Google, Microsoft, Yahoo y Yandex, las empresas detrás de las búsquedas por internet a nivel global.

¿Y los fragmentos enriquecidos?

Los fragmentos enriquecidos, más conocidos como rich snippets, son los datos de marcado que aparecen en los resultados de búsqueda. Aquí ya hablamos de cómo el buscador muestra ese resultado concreto: la valoración, la fecha, la imagen de la receta, etc.

Google muestra de forma destacada los snippets que contienen marcado sobre artículos (con AMP), negocios locales, música, eventos, recetas, reviews, apps, series y películas y productos. Cada uno de estos tipos de contenido se componen a su vez de multitud de subtipos, algunos comunes (por ejemplo, autor) y otros específicos (por ejemplo, tiempo de cocción de una receta), para realizar con efectividad el marcado.

Datos estructurados: eventos

En el ejemplo anterior podemos observar un fragmento enriquecido de la búsqueda «Slayer concerts» y dónde podemos ver cómo dos tipos de marcado se complementan:

  • Por un lado tenemos la valoración (marcado «Review») de la noticia como tal por parte de los lectores, representada en el rich snippet por las estrellas y la valoración numérica, junto con el número de usuarios que han votado.
  • Por otro lado, el marcado de «Evento» nos permite mostrar de forma ordenada y fácilmente identificable los próximos eventos del grupo con su fecha, el lineup del concierto y el lugar físico donde se va a celebrar cada uno de ellos.

Cómo implementar el marcado de datos

Para que nuestra web muestre este tipo de información estructurada podemos usar diferentes soluciones:

Microdata o RDFa:

Tanto los microdatos como RDFa (Rich Structured Data Markup for Web Documents) requieren que unas etiquetas HTML precedan al contenido para encapsular cada formato y permitir que sea legible por los buscadores.

En este ejemplo de código vemos cómo podemos definir el tipo de dato «película», identificando el título de la misma, junto con el nombre del director, el género y un enlace al trailer.

En Schema.org está muy bien definida la implementación de microdatos, mucho más usada que RDFa.

JSON-LD

La segunda opción de implementación es usar JSON-LD (JSON for Linking Data). Difiere de la anterior en que aquí el código ya no necesita ir a la par que el contenido que queremos marcar, sino que podemos aunarlo todo en un script y dejarlo, por ejemplo, al pie de la página.

<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "Recipe",
 "author": "John Smith",
 "cookTime": "PT1H",
 "datePublished": "2009-05-08",
 "description": "This classic banana bread recipe. The walnuts add a nice texture and flavor to the banana bread.",
 "image": "bananabread.jpg",
 "recipeIngredient": [
 "3 or 4 ripe bananas, smashed",
 "1 egg",
 "3/4 cup of sugar"
 ],
 "interactionStatistic": {
 "@type": "InteractionCounter",
 "interactionType": "http://schema.org/Comment",
 "userInteractionCount": "140"
 },
 "name": "Mom's World Famous Banana Bread",
 "nutrition": {
 "@type": "NutritionInformation",
 "calories": "240 calories",
 "fatContent": "9 grams fat"
 },
 "prepTime": "PT15M",
 "recipeInstructions": "Preheat the oven to 350 degrees. Mix in the ingredients in a bowl...",
 "recipeYield": "1 loaf",
 "suitableForDiet": "http://schema.org/LowFatDiet"
}
</script>

Esta sería la implementación de una receta de cocina usando JSON-LD. Podemos observar cómo se va definiendo la estructura en cada propiedad: autor de la receta, ingredientes, datos de tiempo, descripción… llegando incluso a definir para qué tipo de dieta es correcta la receta.

Otras opciones

Junto con las dos anteriores existen también los microformatos y el más reciente Open Graph, creado por Facebook.

Los microformatos han perdido relevancia debido al mayor potencial de los microdatos y Schema.org. Seguro que te suenan cosas como h-cards o h-calendar.

Open Graph sin embargo cada vez es más popular debido a su sencilla implementación con meta-tags:

 

¿Beneficia todo esto al SEO?

La experiencia nos dice que mostrar la información de manera estructurada siempre va a ser mejor para que nuestros resultados sean más visibles y ganen peso en la SERP: al ser más relevantes de forma visual la tasa de clicks se verá afectada al alza.

Si necesitas que tu web sea más semántica y entendible, no dudes en contactar con nosotros.