Para que la página sea considerada apta para generar resultados enriquecidos en el validador de Google necesitamos proporcionar una serie de datos según la entidad. El proceso se complica ya que Google sólo admite algunos tipos de entre lo definidos en schema.org haciendo necesario seguir un proceso de prueba y error, añadiendo y verificando con la herramienta cada cambio, siendo un proceso tedioso y lento.
Queremos que la prueba de datos estructurados de Google pase en verde, proporcionando los datos mínimos necesarios. Seguidamente podemos añadir más la información. Una vez en verde debemos eliminar las advertencias, si no todas, la mayoría para lo que deberíamos establecer un número máximo de tolerancia, por ejemplo 5, y reducirlas al menos hasta ese número.
NOTA: las soluciones propuestas son válidas a fecha de publicación de esta entrada. La herramienta de validación puede admitir o no diferentes valores con el paso del tiempo.
Usamos una entidad de tipo SoftwareApplication.
<!DOCTYPE html>
<html lang="es">
<head>
<title>IronWoods.es - Desarrollo web</title>
</head>
<body
itemscope
itemtype="https://schema.org/SoftwareApplication">
<p itemprop="applicationCategory">
Categoría: Foo
</p>
</body>
</html>
Este código nos indica un error: "Se necesitan dos de estas propiedades: offers, aggregateRating, applicationCategory o operatingSystem."
Corregido:
<!DOCTYPE html>
<html lang="es">
<head>
<title>IronWoods.es - Desarrollo web</title>
</head>
<body
itemscope
itemtype="https://schema.org/SoftwareApplication">
<p itemprop="applicationCategory">
Categoría: Foo
</p>
<p itemprop="operatingSystem">
SO: Linux
</p>
</body>
</html>
Pasa la prueba en verde con 2 advertencias: no hemos agregado offers ni aggregateRating (opcionales).
Nota: podemos agregar una de las dos propiedades como meta si no queremos que se muestre:
<meta
itemprop="applicationCategory"
content="Foo">
Se requiere una entidad anidada de tipo PostalAddress con teléfono:
<!DOCTYPE html>
<html lang="es">
<head>
<title>IronWoods.es - Desarrollo web</title>
</head>
<body
itemscope
itemtype="https://schema.org/Organization">
<div
itemprop="address"
itemscope
itemtype="https://schema.org/PostalAddress">
Tlf: <span itemprop="telephone">666 666 666</span>
</div>
</body>
</html>
Otra opción, si no se pueden añadir un teléfono de contacto, es agregar logo y url.
<!DOCTYPE html>
<html lang="es">
<head>
<title>IronWoods.es - Desarrollo web</title>
</head>
<body
itemscope
itemtype="https://schema.org/Organization">
<meta
itemprop="url"
content="https://www.ironwoods.es">
<meta
itemprop="logo"
content="https://www.ironwoods.es/img/mariposa.png">
</body>
</html>
En ambos casos la prueba pasa en verde y sin advertencias, aunque sería recomendable añadir además el nombre de la organización y una breve descripción.
Para un producto hay que indicar al menos una de las siguientes opciones offers (oferta), review (revisión de producto) o aggregateRating (valoraciones de producto). Según el caso se usa una o varias de ellas. Si, por ejemplo, vendemos el producto, debemos añadir su nombre y especificar su precio en una entidad de tipo Offer.
<!DOCTYPE html>
<html lang="es">
<head>
<title>IronWoods.es - Desarrollo web</title>
</head>
<body
itemscope
itemtype="https://schema.org/Product">
<meta
itemprop="name"
content="Foo">
<div
itemprop="offers"
itemscope
itemtype="https://schema.org/Offer">
<span itemprop="price">999 €</span>
</div>
</body>
</html>
Aunque pasa la prueba en verde nos está generando 12 advertencias*.
*Una de las advertencias se debe a como he indicado el tipo de moneda en el precio. Sacando el símbolo del euro del span se elimina esta advertencia.
Si podemos el símbolo del € en otro span y le agregamos un itemprop con valor priceCurrency eliminaremos otra advertencia, mejorando la información de microdatos suministrada:
<span itemprop="priceCurrency">€</span>
Si se agrega algún sistema de puntuación para que los clientes valoren el producto, añadiremos una entidad de tipo AggregateRating:
<!DOCTYPE html>
<html lang="es">
<head>
<title>IronWoods.es - Desarrollo web</title>
</head>
<body
itemscope
itemtype="https://schema.org/Product">
<meta
itemprop="name"
content="Foo">
<div
itemprop="aggregateRating"
itemscope
itemtype="http://schema.org/AggregateRating">
Puntuación<span itemprop="ratingValue">3.5</span>de 5
basada en<span itemprop="reviewCount">11</span>votos
</div>
</body>
</html>
Pasa la prueba en verde con 7 advertencias.
El último caso: el review o revisión de producto, entidad de tipo Review:
<!DOCTYPE html>
<html lang="es">
<head>
<title>IronWoods.es - Desarrollo web</title>
</head>
<body
itemscope
itemtype="https://schema.org/Product">
<meta
itemprop="name"
content="Foo">
<div
itemprop="review"
itemscope
itemtype="http://schema.org/Review">
<meta
itemprop="author"
content="Foo">
<p>
Artículo<span itemprop="itemReviewed">Foo</span>
</p>
</div>
</body>
</html>
Pasa la prueba en verde con 7 advertencias.
Aunque podemos usar etiquetas meta para añadir datos necesarios si no queremos que se muestren, es recomendable que aparezcan.
En lugar del validador de Google de microdatos para generar resultados enriquecidos se pude usar su validador de datos estructurados. Por alguna razón no funcionan igual, acabo de pasar sin errores el código de una entidad de tipo SoftwareApplication con el primero, pero la segunda herramienta indica que este tipo de entidad no debe llevar un id.
Terminado el ajuste de los microdatos, o en paralelo, validar el HTML para detectar errores.
20-07-2020 (actualizado 05-11-2020)