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, puedes obtener más información sobre cómo funcionan.

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

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 el bloque de datos estructurados deseado 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>

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.
  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.