3 formas de incluir datos estructurados en tu web

Antes de empezar, si no tienes claro lo que son los datos estructurados, os recomendamos leer nuestra entrada de Rich snippets y datos estructurados. Y para los que ya sabéis lo que son y cómo pueden beneficiarnos, vamos a explicar cómo se forman y 3 maneras de incluirlos en tu web.
Cuando termines la guía te será más fácil detectar por qué los datos estructurados generan errores en tu Search Console o campañas de Google Ads.

Qué tipos de datos estructurados puedes usar en tu web

Para hacerlo sencillo de entender, vamos a pensar en los datos estructurados como si fuera un idioma. A la hora de comunicarnos necesitamos, al menos, conocer el vocabulario o léxico y cómo combinar este vocabulario, es decir, la sintaxis, ¿verdad? En el caso de los datos estructurados pasa algo similar.

El léxico de los datos estructurados

Para que todos los buscadores entiendan nuestra información, hay que llegar a una estandarización terminológica. Esto se logra mediante el uso de librerías, que funcionan como “diccionarios” y nos permiten saber qué palabras usar para que Google entienda fácilmente la estructura de nuestra web. De todas las librerías que hay, os vamos a mencionar las más extendidas y usadas:

• Open Graph: Empleada para el marcado de datos de Facebook.
• Schema.org: Orientada sobre todo a motores de búsqueda. Es la librería más extendida y usada, por lo que la emplearemos en nuestros ejemplos.
• Data-vocabulary : Aún podemos encontrar webs con este tipo de librerías de datos estructurados, aunque se está quedando obsoleta.
• Microformats.org

La sintaxis de los datos estructurados

Una vez conocemos el léxico, debemos insertarlo en nuestra web siguiendo cualquiera de los 4 tipos de sintaxis que Google entiende:

1. Microformatos: Esta sintaxis está ya obsoleta, debido a que su estructura se basa en las clases (atributos class) del documento HTML en el que se incluyen. Los documentos HTML están desapareciendo en favor de los HTML5, por lo que este tipo de sintaxis también se ha quedado obsoleta.
2. Microdatos: Este tipo de formato de datos estructurados emplea la propia sintaxis del documento HTML5 en el que se incluyen. Más adelante os mostraremos los atributos propios de este tipo de formato.
3. RDFa: Esta es quizá la sintaxis más complicada y menos usada de todas. Se trata de un formato basado en un conjunto de extensiones XHTML que aprovecha atributos HTML5.
4. JSON-LD: El formato JSON-LD es el preferido de Google, que lo recomienda encarecidamente, y también el más sencillo de entender. Su sintaxis consiste en un conjunto desordenado de elementos nombre:valor.

3 combinaciones de datos estructurados y schema.org

Ahora que ya sabemos qué opciones de léxico y sintaxis tenemos, vamos a ver cómo podemos combinarlas entre sí. Usaremos en todos los ejemplos la librería de Schema.org, ya que es la más usada y con una buena documentación.

1.     Microdatos con schema.org

Como adelantábamos, se trata de una sintaxis basada en HTML5 que cuenta con ciertos atributos propios:

• Itemscope: Indica que se va a dar información sobre un elemento aún sin definir.
• Itemtype: Indica el tipo de elemento que se está definiendo: puede ser un producto, una web, una persona física, etc.
• Itemprop: Indica sus características o propiedades del elemento en cuestión: la marca del producto, una imagen asociada, el precio, etc.

Estos atributos se ven mejor en el propio documento HTML5. A continuación podemos ver un ejemplo de microdatos en el que podemos apreciar dos elementos (), cada uno con su definición de tipo () y sus características ().

 2.     RDFa con schema.org

En este caso también se emplean atributos propios. Entre los más usados destacan los siguientes:

Como este es el caso más abstracto de los tres, vamos a ilustrarlo con un ejemplo, para que sea más sencillo de entender. Si echamos un vistazo al ejemplo de datos estructurados de persona física, vemos los siguientes atributos simples:
En este caso, es el atributo vocab el que marca la librería, y el atributo typeof el que marca el tipo de elemento. El resto de características se marcan mediante el atributo property. Además de ejemplo para persona física, en esta página podemos encontrar una serie de ejemplos de marcado estructurado RDFa.

3.     JSON-LD  con schema.org

Se trata del tipo de sintaxis recomendada por Google. Para implementarlo, debemos añadir una etiqueta de javascript en nuestro documento HTML5 que contenga los datos en un formato de pares nombre/valor, según este modelo:

<script type=“application/ld-json”> { “Producto”: “tipo de producto de mi web” } </script>

Tendríamos que sustituir los datos que figuran entre llaves por los datos y propiedades del elemento que vayamos a definir, siguiendo la documentación de nuestra librería. Este sería un ejemplo de cómo Pccomponentes ha implementado sus datos estructurados a través del formato JSON-LD:
Por último, os dejamos por aquí una herramienta para generar automáticamente el fragmento de JSON-LD que necesitéis en vuestra web, en caso de que no tengáis claro qué léxico y valores son necesarios para cada tipo de elemento.
Y ahora que ya sabes todas las formas de insertar datos estructurados…
[totalpoll id=”21694″]