Guía datos estructurados y uso de schema.org para el marcado semántico

Guía completa sobre datos estructurados y schema.org 2018

Hoy tengo el honor de compartir un espectacular post de un gran amigo y compañero SEO, Juan Carlos Trueba. Apuntaros bien este nombre que va a dar mucho que hablar en el mundo SEO. Capaz de unir programación y SEO y a eso sumarle un optimismo sin límites y una energía explosiva, ¿se puede pedir más? ¡A disfrutar el post!

Cómo implementar datos estructurados con Schema sin morir en el intento

Seguramente, a día de hoy ya habrás oído hablar de microdatos, data-markup, datos estructurados o schema.org, un sin fin de terminología para referirse siempre a lo mismo, al marcado semántico, una manera de darle significado a nuestra web y las páginas de nuestro site, es decir, con éste le estamos dando a Googlebot más pistas sobre cómo se estructura nuestra web y qué puede encontrar en ella.

Navegando en internet encontramos miles de post explicando qué es un dato estructurado o qué es schema.org pero la mayoría de ellos no explican cómo se implementan o cómo se construyen éstos.

Ni siquiera en el sitio oficial de schema.org queda claro cómo construir un dato estructurado correctamente debido a que los ejemplos que nos proporcionan son escasos y en la mayoría de las ocasiones no se adaptan a las particularidades de nuestra web.

Por lo que el objetivo de este post no es otro que aprendamos a darle formato nosotros mismos un dato estructurado y poder meterlo en nuestra web o dárselo totalmente preparado a un desarrollador.

Partes de un microdato o dato estructurado según su formato (Microdata, JSON-LD o RDFa)

Según el tipo de formato del marcado semántico que utilicemos el dato estructurado se estructurará de una manera u otra. A continuación te muestro algunos ejemplillos.

Microdata

Se trata de una comunidad HTML de código abierto. La manera en la que implementan los datos estructurados es anidándolos a través de etiquetas dentro del HTML que compone los elementos visibles de nuestra web.

Sería algo así como subrayar los elementos de nuestra web dándoles significado.

RDFa

RDFa es un formato, en cuanto a implementación, muy parecido a Microdata ya que también se inserta en el código HTML, la diferencia principal se encuentra en la sintaxis ya que como vemos en el ejemplo siguiente los diversos niveles se nombran de manera diferente.

JSON-LD

Más conocido en el mundillo como “Jeison” o “jotason”, es la forma de dato estructurado más común en la actualidad ya que es la más limpia y la que no tiene por qué estar asociada al contenido visible de nuestra web. Además de todo esto, la razón principal es que es la que Google recomienda en sus guidelines que usemos siempre que se pueda.

Datos estructurados JSON

A diferencia de los otros dos formatos, éste no se inserta en las etiquetas HTML sino que es un objeto de Javascript (JavaScript Object Notation, de ahí su nombre) que se embebe en el head o en el body en forma de <script>.

Dada la importancia de este formato, a la hora de explicar la implementación de datos estructurados nos centraremos en los JSON, además son los más limpios y los menos engorrosos si no dominamos lenguajes de programación.

¿Qué tienen en común los diferentes formatos de marcado?

Los tres se componen básicamente de type, como su propio nombre indica es el tipo de microdato (no de formato) que queremos introducir y cada type tiene asociada unas propiedades. Sin embargo, una propiedad también puede ser, a la vez un type si a ésta le queremos añadir más propiedades en su interior.

  Type Propiedades
Microdata itemtype itemprop
RDFa typeof property
JSON-LD @type Las propiedades van entre comillas sin @

 

Pero… ¿Cómo se que propiedades van con cada type y qué types pueden ir dentro de cada type? Lo vemos en el siguiente epígrafe ¡Empieza la fiesta!

¿Cómo navegar por schema.org para construir el dato estructurado definitivo?

Lo primero, aunque resulte obvio, es entrar en Schema, una vez ahí entramos en categoría “Schemas”, donde podemos ir directamente a los más comunes o acceder a la lista completa. Seleccionamos uno cualquiera para ver cómo se estructura la propia página de Schema, recomiendo Product, Article, Recipe, Organization o Website, ya que son de los más comunes y nos permitrá irnos familiarizando con ellos.

“Un tip que ayuda a buscar, debido a que tenemos tantos para elegir, es poner en inglés la palabra por la que esperamos encontrar un dato estructurado que siempre aparece algo”

Para la explicación voy a apoyarme en Product (http://schema.org/Product).

Una vez que estamos en el dato estructurado de producto vamos a encontrar algo tal que así:

Schema:product

Por un lado, tenemos la descripción del marcado, nos dice para qué lo podemos utilizar.

A la izquierda del todo las “Properties”, son las propiedades que podemos asociar al dato estructurado.

En el centro los types asociados de cada propiedad ¿Pero no se supone que debemos asociar una propiedad a type y no un type a una propiedad? Pues bien un type también puede ser una propiedad, lo que nos permite ir anidando types dentro más types, es decir, incluir un dato estructurado dentro de otro para hacerlo más rico.

¿Lo vemos en el siguiente epígrafe con un video súper clarificador? Por supuesto.

Por último, a la derecha, la descripción de la propiedad, lo que se espera que incluyamos en ella.

Cómo construir un dato estructurado sin errores y no morir en el intento

Para ello vamos a seguir con el ejemplo del “@type”: “product” ya que nos permite incorporar bastantes elementos y entender la estructura en su conjunto.

Como hemos dicho, se trata de JavaScript embebido en HTML, es decir, está dentro y no en un archivo externo, por lo que para iniciarlo debemos añadir siempre:

<script type=”application/ld+json”> y cerrar con </script>, una vez hecho esto ya podremos empezar a estructurarlo en su interior, lo vemos, a continuación con una video-guía sobre datos estructurados. ¡Vamos allá!

VIDEO-GUÍA SOBRE MARCADO DE DATOS EN JSON-LD

 

Dato estructurado que hemos usado de ejemplo

¿Qué datos estructurados necesita mi web? ¿En qué paginas los implemento?

Existen una infinidad de tipos de web, webs corporativas, blogs, e-commerces, etc. Cada una de ellas tiene datos estructurados específicos, aunque hay muchos datos estructurados comunes para todas las webs.

Lo que aconsejo que miremos que markup utiliza la competencia en primer lugar, nos metemos en su código fuente y buscamos con CTRL + F “schema”.

En segundo lugar, ahora que sabemos cómo se implementa un JSON que miremos las guías de schema.org en busca de oportunidades para destacar sobre la competencia.

En cualquier caso, con el fin de ir allanando el terreno voy a algunos ejemplos de marcado semántico útiles para la mayoría de las webs.

Breadcrumb

Este markup se implementa en todas las páginas de nuestra web que tengan migas de pan, permite informar a Googlebot de cómo es la arquitectura de nuestra web, además permite que en las SERPs obtengamos resultados enriquecidos, los famosos rich snippets.

Breadcrumb microdatos

Website

Nos permite desplegar un campo de búsqueda en las SERPs, es útil si tenemos un blog o un ecommerce en el que nos interésa que nuestros usuarios puedan buscar categorías, artículos o productos.

Searchbox rich snippets

Organization

Es útil si somos un ecommerce o una web corporativa ya que, por un lado, le estamos dando información a Google de que somos una organización y, por otro, podemos asociar nuestra web a un número de teléfono de contacto y a nuestras redes sociales.

Esto nos permite desplegar un knowlegde graph en las SERPs con todos nuestros datos, aunque el apartado de las redes sociales todavía no se encuentra disponible en España.

social profiles microdatos

 

Article

Nos permite etiquetar todos los artículos de nuestro blog y aparecer en la sección de Google Noticias o en las SERPs globales con resultados enriquecidos. Es de verdadera ayuda para posicionar artículos y noticias ya que el dato estructurado tiene la propiedad “keywords” en donde podemos añadir todas nuestras palabras clave

¡PERO SIN ABUSAR QUE NOS CONOCEMOS!

Para el caso de noticias asociadas a un momento concreto es mejor utilizar el marcado de http://schema.org/NewsArticle

 

LocalBusiness

Este dato estructurado es parecido al de Organization pero mucho más enriquecido, para mi es de los más útiles a día de hoy ya que sus resultados son increíbles a nivel local, tanto para las SERPs Globales como para Google My Business. Si tienes una web asociada a una sede física ya estás tardando en implementarlo.

local business schema

 

 

Bonus final

Como colofón final me gustaría despedirme con una serie de recursos y herramientas que uso en mi día a día como SEO.

Éstas no solo me permiten ahorrar muchísimo tiempo sino que también me convierten más ágil a la hora de detectar oportunidades de datos estructurados de la competencia y tener guías de implementación que me den la seguridad de que estoy haciendo las cosas correctamente.

Structured Data Testing Tool

Es una extensión que podemos descargar en el repositorio de Chrome y que nos permite conocer que markup tiene una web determinada y cómo los está implementando.

Guidelines oficiales sobre marcado de datos de Google

Esta guía de datos estructurados es el santo grial para poner darle marcado semántico a la web con total seguridad, no solo te dice que propiedades son obligatorias y cuáles recomendadas sino que también nos da ejemplos concretos de cómo quiere Google que hagamos el marcado semántico.

Recomiendo irla destripando por todas las cateogrías del sidebar que ahí es donde podremos aprovechar todo su contenido.

guidelines google rich snippets

Validador de marcado de datos

Esta es la herramienta que hemos usado en el ejemplo anterior, es un paso obligatorio antes de implementar cualquier dato estructurado en nuestra web.

Generador de datos estructurados

Para todos aquellos que busquen algo simple y no quieran innovar les dejo este Markup Generator que nos permite crear JSON-LDs de los @types esenciales.

  • Website
  • Breadcrumbs
  • Person
  • Organization
  • LocalBusiness
  • Article
  • Product
  • Event
  • Recepi
  • JobPosting

Para un uso adecuado recomiendo cotejar cada uno de ellos con los guidelines de Google y con todo lo aprendido en el post para evitar errores en la implementación.

Bueno, esto ha sido todo por hoy, espero que les haya gustado y que haya quedado todo clarísimo. Si por el contrario no es así, no pasa nada, dejen sus dudas en los comentarios, si quieren otro post más avanzado háganlo saber, también en los comentarios jaja 🤙🏻


Ha sido un placer ¡Hasta otra!

Puntúalo!

1 Star2 Stars3 Stars4 Stars5 Stars (7 votes, average: 5,00 out of 5)
Cargando…

1 comentario

  • Fernando Ferreiro

    mayo 30, 05 2018 05:05:14

    Muy buena información.
    Si los webmaster supieran de lo importante que es todo esto para el SEO … todo iría mejor.
    Saludos.

Deja una respuesta

This site uses Akismet to reduce spam. Learn how your comment data is processed.