Generar datos estructurados con JavaScript

En los sitios web modernos se utiliza JavaScript para mostrar una gran cantidad de contenido dinámico. A la hora de generar datos estructurados con JavaScript en tus sitios web, debes tener en cuenta varias cuestiones. Lee esta guía para conocer las prácticas recomendadas y descubrir estrategias de implementación. Consulta cómo funcionan los datos estructurados si aún no te has familiarizado con ellos.

Hay varias formas de generar datos estructurados con JavaScript, pero las más habituales son las siguientes:

Generar archivos JSON-LD dinámicamente mediante Google Tag Manager

Google Tag Manager es una plataforma que te permite gestionar etiquetas en tu sitio web sin tener que 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. Añade una nueva etiqueta del tipo HTML personalizado a un contenedor.
  3. Pega el conjunto de datos estructurados que quieras en el contenido de la etiqueta.
  4. Instala el contenedor tal como se muestra en la sección Instalar Google Tag Manager del menú de administrador del contenedor.
  5. Para añadir la etiqueta a tu sitio web, publica el contenedor en la interfaz de Google Tag Manager.
  6. Prueba la implementación.

Utilizar variables en Google Tag Manager

Google Tag Manager admite variables para que en los datos estructurados se pueda usar información que haya en las páginas. Aprovecha las variables para extraer los datos estructurados de las páginas y evitar así duplicar información en Google Tag Manager. Si hay información duplicada en esta plataforma, aumenta el riesgo de que se produzcan discrepancias entre el contenido de las páginas y los datos estructurados que se hayan insertado mediante GTM.

Por ejemplo, puedes generar dinámicamente un bloque JSON-LD de tipo receta que utilice el título de la página como nombre de la receta creando la siguiente variable personalizada, denominada recipe_name: 

function() { return document.title; }

De este modo, puedes incluir la variable {{recipe_name}} en la etiqueta HTML personalizada.

Te recomendamos que crees variables para recoger toda la información necesaria de las páginas.

A continuación se muestra un ejemplo del contenido de una 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>

Generar datos estructurados con código JavaScript personalizado

También puedes generar datos estructurados mediante JavaScript, ya sea utilizando este lenguaje para crearlos todos o para añadir más información a los datos estructurados que se renderizan en el servidor. En cualquier caso, la Búsqueda de Google puede entender y procesar los datos estructurados que están disponibles en el elemento DOM cuando renderiza las páginas. Consulta más información sobre cómo procesa la Búsqueda de Google el código JavaScript en la guía básica de JavaScript.

A continuación se muestra un ejemplo de datos estructurados generados con JavaScript:

  1. Busca el tipo de datos estructurados que te interesa.
  2. Incluye en el código HTML de tu sitio web un fragmento de JavaScript como el del siguiente ejemplo. Para saber cómo hacerlo, consulta la documentación de tu sistema de gestión de contenido o de tu proveedor de alojamiento, o bien pregúntaselo 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.

Utilizar el renderizado de servidor

Si utilizas el renderizado de servidor, también puedes incluir los datos estructurados que quieras en el contenido renderizado. Para saber cómo generar el archivo JSON-LD del tipo de datos estructurados que te interesa, consulta la documentación de tu framework.

Probar la implementación

Prueba la implementación para comprobar que la Búsqueda de Google pueda rastrear e indexar tus datos estructurados:

  1. Abre la Prueba de resultados enriquecidos.
  2. Introduce la URL que quieres probar.
  3. Haz clic en Probar URL.

    Correcto: si has hecho todo correctamente y la herramienta admite el tipo de datos estructurados, aparecerá el mensaje "Esta página es apta para generar resultados enriquecidos".
    Si la herramienta no admite el tipo de datos estructurados que pruebas, revisa el código HTML renderizado. Si este código incluye los datos estructurados, la Búsqueda de Google podrá procesarlo.

    Reintentar: si aparece algún error o alguna advertencia, lo más probable es que haya un error de sintaxis o falte una propiedad. Consulta la documentación del tipo de datos estructurados que utilices y comprueba que hayas añadido todas las propiedades. Si el problema continúa, consulta también la guía sobre cómo solucionar problemas de JavaScript relacionados con la Búsqueda.