Genera datos estructurados con JavaScript

Los sitios web modernos usan JavaScript para mostrar mucho contenido dinámico. Cuando usas JavaScript para generar datos estructurados en tu sitio web, debes tener en cuenta algunos aspectos. En esta guía, verás las prácticas recomendadas y las estrategias de implementación. Si aún no estás familiarizado con los datos estructurados, obtén más información sobre su funcionamiento.

Existen diferentes maneras de generar datos estructurados con JavaScript, pero las más comunes son las siguientes:

• Google Tag Manager
• JavaScript personalizado

¿Usas el lenguaje de marcado Product? Ten en cuenta que el lenguaje de marcado generado de forma dinámica puede hacer que los rastreos de Shopping sean menos frecuentes y menos confiables, lo que puede ser un problema para el contenido que cambia rápidamente, como la disponibilidad y el precio de los productos. Si tienes un comercio y realizas optimizaciones para todos los tipos de resultados de Shopping, asegúrate de que tu servidor tenga suficientes recursos de procesamiento para manejar el aumento de tráfico de Google.

Cómo usar Google Tag Manager para generar JSON-LD de forma dinámica

Google Tag Manager es una plataforma que te permite administrar etiquetas del sitio web sin editar el código. Para generar datos estructurados con Google Tag Manager, sigue estos pasos:

1. Configura e instala Google Tag Manager en tu sitio.
2. Agrega una nueva etiqueta HTML personalizada al contenedor.
3. Pega un bloque de datos estructurados admitidos en el contenido de la etiqueta.
4. Instala el container como se muestra en la sección Cómo instalar Google Tag Manager del menú de administración del container.
5. Para agregar la etiqueta a tu sitio web, publica el contenedor en la interfaz de Google Tag Manager.
6. Prueba la implementación.

Uso de variables en Google Tag Manager

Google Tag Manager (GTM) admite variables para usar la información de la página como parte de tus datos estructurados. Usa variables para extraer los datos estructurados de la página en lugar de duplicar la información en GTM, ya que la duplicación aumenta el riesgo de discrepancia entre el contenido de la página y los datos estructurados que se insertan mediante GTM.

Por ejemplo, puedes crear la siguiente variable personalizada llamada recipe_name a fin de crear dinámicamente un bloque JSON-LD de Receta que use el título de la página como nombre de la receta:

function() { return document.title; }

Luego, puedes usar {{recipe_name}} en el código HTML de tu etiqueta personalizada.

Recomendamos que crees variables para recopilar toda la información necesaria de la página que usa variables.

Este es un ejemplo de contenido de etiqueta HTML personalizada:

<script type="application/ld+json">
  {
    "@context": "https://schema.org/",
    "@type": "Recipe",
    "name": "{{recipe_name}}",
    "image": [ "{{recipe_image}}" ],
    "author": {
      "@type": "Person",
      "name": "{{recipe_author}}"
    }
  }
</script>

Nota: En el ejemplo anterior, se supone que definiste las variables recipe_name, recipe_image y recipe_author en GTM.

Cómo generar datos estructurados con JavaScript personalizado

Otra forma de generar datos estructurados es usar JavaScript para generar todos tus datos estructurados o para agregar más información a los datos estructurados procesados en el servidor. De cualquier manera, la Búsqueda de Google puede comprender y procesar los datos estructurados que están disponibles en el DOM cuando procesa la página. Para obtener más información sobre la manera en la que la Búsqueda de Google procesa JavaScript, consulta la Guía básica de JavaScript.

Este es un ejemplo de datos estructurados generados por JavaScript:

1. Busca el tipo de datos estructurados que te interesa.
2. Edita el código HTML de tu sitio web para incluir un fragmento de JavaScript como el del siguiente ejemplo (consulta la documentación de tu CMS o proveedor de hosting, o pregunta a tus desarrolladores).
   

   fetch('https://api.example.com/recipes/123')
   .then(response => response.text())
   .then(structuredDataText => {
     const script = document.createElement('script');
     script.setAttribute('type', 'application/ld+json');
     script.textContent = structuredDataText;
     document.head.appendChild(script);
   });

3. Prueba tu implementación con la Prueba de resultados enriquecidos.

Cómo usar el procesamiento del servidor

Si usas el procesamiento del servidor, también puedes incluir los datos estructurados deseados en el resultado procesado. Consulta la documentación relacionada con tu marco de trabajo a fin de averiguar cómo generar el código JSON-LD para el tipo de datos estructurados de tu interés.

Cómo probar tu implementación

Para asegurarte de que la Búsqueda de Google pueda rastrear e indexar tus datos estructurados, sigue estos pasos y prueba tu implementación:

1. Abre la Prueba de resultados enriquecidos.
2. Ingresa la URL que quieres probar.
   Te recomendamos que utilices la entrada de URL en lugar de la entrada de código debido a las limitaciones de JavaScript que puedan surgir para el uso de la entrada de código (por ejemplo, restricciones de CORS).
3. Haz clic en Probar URL.

   Prueba exitosa: Si hiciste todo correctamente y tu tipo de datos estructurados es compatible con la herramienta, verás el mensaje "La página es apta para los resultados enriquecidos".
   Si estás probando un tipo de datos estructurados que no es compatible con la Prueba de resultados enriquecidos, verifica el HTML procesado. Si el HTML procesado contiene los datos estructurados, la Búsqueda de Google podrá procesarlo.

   Vuelve a intentarlo: si ves errores o advertencias, lo más probable es que se deban a un error de sintaxis o la falta de una propiedad. Lee la documentación relacionada con tu tipo de datos estructurados y asegúrate de haber agregado todas las propiedades. Si el problema persiste, asegúrate de consultar la guía sobre cómo solucionar problemas de JavaScript relacionados con la búsqueda.