Cómo implementar datos estructurados en sitios JavaScript para SEO técnico
Guía práctica para agregar Schema.org en aplicaciones React, Vue o Angular y asegurar que Google los lea correctamente. Checklist de validación y errores comunes.
Los datos estructurados siguen siendo una de las palancas más potentes —y menos explotadas— del SEO técnico. Cuando tu sitio está construido enteramente en JavaScript, el desafío se multiplica: el crawler de Google tiene que ejecutar el código para ver el markup, y cualquier error en la forma de inyectarlo puede hacer que los rich snippets nunca aparezcan.
En esta guía vamos a ver cómo implementar Schema.org de forma robusta en frameworks modernos sin caer en los errores típicos que vemos en auditorías diarias. Todo paso a paso, con lo que tenés que mirar en Search Console y en herramientas de validación.
Por qué los sitios JS necesitan un tratamiento especial
Googlebot ahora renderiza JavaScript de forma bastante decente, pero sigue habiendo latencia y límites. Si generás el JSON-LD solo después de varios segundos de carga o mediante eventos de usuario, es probable que el crawler no lo capture. Además, los datos estructurados tienen que ser estables: si cambian cada vez que el usuario refresca la página, perdés fiabilidad.
Checklist previo a la implementación
Antes de tocar una sola línea de código, verificá lo siguiente:
- Confirmá que tu contenido principal esté disponible en el HTML inicial o sea renderizado en menos de 5 segundos.
- Usá Search Console > Inspeccionar URL para ver si el HTML renderizado incluye el script de tipo application/ld+json.
- Verificá que no haya errores de hidratación en tu framework que hagan que el markup desaparezca en el servidor.
Tres formas de agregar datos estructurados en JS (y cuál recomiendo)
Opción 1: JSON-LD inyectado en el con useEffect (React/Vue) Es la más usada y también la que más errores genera. Si lo ponés dentro de un useEffect sin SSR, Google puede no llegar a verlo.
Opción 2: Generación estática o en servidor (recomendada) En Next.js usá getServerSideProps o getStaticProps. En Nuxt, el asyncData o useAsyncData. De esta forma el JSON-LD ya está en el HTML que devuelve el servidor y Google no tiene que ejecutar nada.
Opción 3: Usar una librería dedicada como react-schemaorg o vue-schema-org Estas librerías ayudan a tipar correctamente el markup y evitan errores de sintaxis. Pero seguí validando con las herramientas de Google.
Ejemplo práctico: Schema de Producto en una SPA React con Next.js
Supongamos que tenés una ficha de producto. El código mínimo que deberías tener en tu página es algo como esto (adaptalo a tu stack):
Usá el componente Head de Next.js y generá el JSON-LD en el servidor. Incluí siempre las propiedades mínimas que Google requiere para ese tipo: name, image, description, sku, brand, offers con price y priceCurrency.
Agregá también AggregateRating si tenés reseñas reales. No inventes valoraciones.
Datos estructurados para FAQ y HowTo en sitios con mucho JS
Las páginas de preguntas frecuentes son ideales para generar rich snippets de acordeón. El error clásico es usar un componente que colapse con estado local y que el JSON-LD no refleje correctamente las respuestas completas.
Solución: mantené los datos de FAQ en un array centralizado y generá tanto el HTML visible como el JSON-LD a partir del mismo source of truth. De esta forma nunca se desincronizan.
Migraciones y cambios de URL: cómo mantener los rich snippets
Cuando hacés una migración de tecnología (de WordPress a Next.js, por ejemplo), es común que los datos estructurados se pierdan temporalmente. Google puede demorar semanas en volver a reconocerlos.
Recomendación: prepará un archivo de mapeo de URLs antiguas a nuevas y usá redirecciones 301. Luego, verificá en Search Console la propiedad “Mejoras” > “Datos estructurados” para ver si aparecen errores nuevos.
Errores comunes que bajan tu puntuación de elegibilidad
- Faltar la propiedad @context o @type.
- Usar precios en string en vez de número (price: "299.99" en vez de 299.99).
- Incluir URLs relativas en lugar de absolutas.
- Tener múltiples bloques JSON-LD con información contradictoria.
- Usar markup de Organization en todas las páginas en vez de solo en el homepage y contacto.
Herramientas que debés usar en tu flujo de auditoría
- Google Rich Results Test (para validar una URL específica).
- Schema Markup Validator de Schema.org.
- Search Console > Datos estructurados (para ver el volumen a escala).
- Screaming Frog configurado en modo JavaScript Rendering.
- Lighthouse en modo desktop y mobile para ver si el markup afecta el rendimiento.
Cómo medir el impacto real
No prometo posiciones, pero sí te puedo decir qué mirar: porcentaje de impresiones con rich results en el informe de rendimiento de Search Console, tasa de clics en esas impresiones y reducción de la tasa de rebote en las páginas que ganaron snippet expandido.
Cada sitio es distinto. Un e-commerce con miles de productos va a notar más el cambio que un blog corporativo. El punto de partida técnico (tiempo de renderizado, calidad del SSR, tamaño del bundle) determina cuánto podés ganar.
Empezá por una plantilla de producto o una sección de FAQ. Implementala bien, validala, dejala estabilizarse 3-4 semanas y después escalá al resto del sitio. Es más seguro que intentar un cambio masivo que pueda introducir errores en todo el dominio.
Si tu equipo de desarrollo no está familiarizado con SEO, armá un documento de “SEO Requirements for Structured Data” con los tipos de Schema que necesitás según cada plantilla y las propiedades obligatorias. Eso evita idas y vueltas interminables.
El SEO técnico no termina nunca, pero los datos estructurados bien hechos son de esas mejoras que, una vez que las tenés estables, siguen generando valor durante meses sin mantenimiento constante.
