Considere el siguiente código marcado con atributos para proporcionar microdatos:
<!DOCTYPE html>
<html>
<head>
<title>Micro data test - Normal version</title>
</head>
<body>
<div itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">Product name</h1>
<img alt="" itemprop="image" src="http://placehold.it/200x200" />
<div itemprop="description">This is the product description.</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta content="in_stock" itemprop="availability" />
<span content="GBP" itemprop="priceCurrency">£</span><span itemprop="price">100.00</span>
</div>
</div>
</body>
</html>El uso de la herramienta de prueba de datos estructurados de Google da resultados positivos.
Esto está bien en el ejemplo de prueba, sin embargo, queremos implementar microdatos en una variedad de sitios cuya estructura HTML varía mucho. Implementar los atributos de esta manera requerirá que alguien edite manualmente el marcado HTML en cada uno de los sitios individualmente.
Preferiblemente, nos gustaría poder llamar a una sola función que empaquete todos los microdatos en un solo lugar; técnicamente esto es posible mediante el uso de metaetiquetas de la siguiente manera:
<!DOCTYPE html>
<html>
<head>
<title>Micro data test - Meta tag version</title>
</head>
<body>
<meta itemscope itemtype="http://schema.org/Product" itemref="microName microImage microDescription microOffer" />
<meta id="microName" itemprop="name" content="Product name" />
<link id="microImage" itemprop="image" href="http://placehold.it/200x200" />
<meta id="microDescription" itemprop="description" content="This is the product description." />
<meta id="microOffer" itemprop="offers" itemscope itemtype="http://schema.org/Offer" itemref="microCurrency microPrice microAvail" />
<meta id="microAvail" itemprop="availability" content="in_stock" />
<meta id="microCurrency" itemprop="priceCurrency" content="GBP" />
<meta id="microPrice" itemprop="price" content="100.00" />
<div>
<h1>Product name</h1>
<img alt="" src="http://placehold.it/200x200" />
<div>This is the product description.</div>
<div>£100.00</div>
</div>
</body>
</html>El uso de la Herramienta de prueba de datos estructurados de Google da los mismos resultados positivos que la primera prueba.
Como referencia (nunca haríamos esto en un sitio real), la Herramienta de prueba de datos estructurados de Google devuelve un error si intenta pasar microdatos ocultos por CSS.
Entonces, tanto el marcado normal como el metaetiquetado producen los mismos resultados, sin embargo, tengo algunas preocupaciones debido a las siguientes declaraciones de Google y Schema.org:
https://support.google.com/webmasters/answer/146750 declara:
En general, Google usará solo datos marcados que sean visibles para el usuario. Los datos ocultos serán ignorados. Sin embargo, en algunas circunstancias, puede ser útil proporcionar una versión de su contenido legible por máquina y legible por humanos. Por ejemplo, aunque la cadena de texto "El cumpleaños de Elvis" es significativa para muchos lectores humanos, no es tan significativa para los motores de búsqueda como el 1935-01-08. Del mismo modo, los lectores humanos pueden inferir el significado del símbolo $, pero puede ser útil decirle específicamente a los motores de búsqueda si sus precios están en pesos o dólares.
http://schema.org/docs/gs.html estados (en relación con el uso de metaetiquetas):
Esta técnica debe usarse con moderación. Solo use meta con contenido para información que de otra manera no se puede marcar.
http://schema.org/docs/faq.html#13 afirma:
Como regla general, debe marcar solo el contenido que sea visible para las personas que visitan la página web y no el contenido en div ocultos u otros elementos de página ocultos.
Mis preguntas son:
- Si bien no se devuelven errores, ¿nos penalizarían los motores de búsqueda por usar metaetiquetas de esta manera (es decir, contenido duplicado, ocultar información, etc.)?
- Si esto no es adecuado, ¿puede sugerir alguna forma de dividir los microdatos de los datos reales o tendremos que morder la viñeta e implementar esto en HTML caso por caso?