Skip to content

Guía de implementación · 2026

El FAQPage murió. El contenido Q&A no. Márcalo así.

Google mató los rich results de FAQ en mayo de 2026. El Q&A sigue siendo uno de los formatos de página más útiles — para usuarios, para motores de IA y para accesibilidad. Este es el patrón de HTML semántico que recomendamos, con los trade-offs explícitos.

Publicado16 de mayo de 202611 min de lectura
Herramienta principal
Nativo
details/summary es el elemento HTML nativo para Q&A colapsable — soportado en todos los navegadores modernos desde 2020
MDN Web Docs
100%
cobertura de accesibilidad: los lectores de pantalla anuncian details/summary de forma nativa sin ARIA
WCAG 2.2 + MDN
0
JavaScript requerido para que el patrón funcione — es una feature HTML estática
HTML Living Standard
Bing
sigue premiando el schema FAQPage, así que mantenlo en páginas FAQ genuinas si te importa Bing
Microsoft Bing · oct 2025

Capítulo 01

Por qué este patrón, por qué ahora

El contenido FAQ no murió en mayo de 2026 — solo la recompensa de rich-result del schema. El Q&A sigue siendo uno de los patrones de contenido de mayor utilidad en la web: encaja con cómo los usuarios formulan preguntas, da a los motores de IA unidades de extracción claras, y da a usuarios de lectores de pantalla una estructura predecible.

El error de la industria SEO fue tratar el JSON-LD FAQPage como el objetivo en vez de como una codificación opcional. El objetivo real es contenido que se lea como preguntas y respuestas — y ese objetivo se sirve mejor con HTML semántico que con JSON-LD, porque el HTML semántico beneficia simultáneamente a la accesibilidad, la extracción por IA y la búsqueda.

La recomendación de Joost de Valk en mayo 2026 captura el cambio: mantén el contenido FAQ donde es genuinamente útil, quita el schema FAQPage de páginas donde el Q&A no es el propósito principal, y usa HTML semántico — los elementos details y summary, más encabezados en forma de pregunta — como representación primaria. Este artículo es la guía de implementación para esa recomendación.

Vamos a cubrir tres patrones — disclosure colapsable, prosa basada en encabezados y lista de definición — más cuándo mantener el JSON-LD, cuándo quitarlo y cómo verificar que los lectores de pantalla y los motores de IA ven lo que pretendes.

ObjetivoHerramienta correcta
UX (Q&A colapsable)Nativo, accesible, cero JS<details>/<summary>
Q&A largo con respuestas en prosah3 pregunta + párrafoPatrón basado en encabezados
Glosario o pares Q→A cortosSemántica de lista de definición<dl>/<dt>/<dd>
Señal de extracción para IALos motores parsean el DOMTexto de encabezado en forma de pregunta
Rich result en GoogleSalvo gov/saludNo disponible (post-mayo 2026)
Rich result en BingMantenlo si Bing importaFAQPage JSON-LD aún funciona
DOM
los motores de IA extraen del DOM renderizado, no del @type — el HTML semántico es la señal duradera
Guía Bing Webmaster + básicos RAG
Incluso cuando el schema ayudaba, los motores leían el contenido visible. El schema era una pista, no el dato. Después de mayo 2026 esa pista en Google ya casi no se lee — el contenido visible es lo que hace el trabajo de cualquier forma.

Capítulo 02

Patrón A — Disclosure colapsable

El patrón por defecto. Usa los elementos details y summary cuando tienes una lista de pares Q&A y la página es densa al punto que los usuarios querrán escanear. Los lectores de pantalla anuncian estos elementos nativamente, el markup es autocontenido y no necesitas una sola línea de JavaScript ni ARIA.

Envuelve toda la lista en una sección con un nombre accesible. El summary contiene la pregunta. El cuerpo del details contiene la respuesta — y puede tener lo que quieras: párrafos, código, listas, incluso más details anidados. El estado abierto se controla con el atributo open en el primer item si quieres que esté expandido por defecto.

El único cuidado: no pongas elementos interactivos dentro del summary (links, botones). Los navegadores modernos lo manejan pero las tecnologías asistivas viejas pueden atragantarse. Mantén el summary solo con texto y pon los links dentro del cuerpo.

ComportamientoPatrón ACuándo elegirlo
Estado visualColapsado por defectoFAQs densas, ≥4 items
AccesibilidadNativa, sin ARIASiempre — empieza aquí
JS requeridoNingunoFriendly para estático
AnimaciónNativa del navegador + CSS @starting-styleOpcional, mejora progresiva
Extracción IAEl texto de summary se lee como preguntaLos motores parsean el DOM visible
Nativo
el patrón de disclosure está integrado en HTML — usarlo bien es más confiable que cualquier implementación custom en JS
HTML Living Standard · §4.11.1
0 KB
huella de JavaScript requerida — relevante para INP y Core Web Vitals
web.dev
Disclosure FAQ correcto y mínimo
Código
<section aria-labelledby="faq">
  <h2 id="faq">Preguntas frecuentes</h2>
  <details>
    <summary>¿Cuánto tarda el setup?</summary>
    <p>Unos cinco minutos para un solo sitio, más para cuentas multi-dominio.</p>
  </details>
  <details>
    <summary>¿Hay tier gratuito?</summary>
    <p>Sí — la beta es gratis para sitios individuales con un solo usuario.</p>
  </details>
</section>
Patrón de referencia · compatible con MDN

Capítulo 03

Patrón B — Prosa basada en encabezados

Cuando las respuestas son largas, cuando el contexto importa y cuando el FAQ es realmente un ensayo disfrazado de Q&A, el patrón basado en encabezados le gana al widget de disclosure. Cada pregunta se vuelve un h3 (o h2, según el outline), cada respuesta es un párrafo o varios. La página se lee de arriba abajo, la tabla de contenidos es automática y los motores de búsqueda identifican el span de respuesta con más facilidad.

Es el patrón correcto para artículos de centro de ayuda, entrevistas Q&A de expertos y cualquier FAQ donde la respuesta se beneficia de ser inmediatamente visible. También es el patrón del que los motores de IA suelen extraer con más limpieza — el encabezado de pregunta se vuelve el anclaje, la prosa debajo es el span de respuesta.

Si quieres tanto resumen como profundidad, combina los patrones: un bloque de disclosure arriba para escaneo rápido, seguido de secciones basadas en encabezados para las respuestas largas. Mantén el mismo texto de pregunta en ambos lados para que la página se lea consistente.

NecesidadPatrón BComparado con Patrón A
Respuestas más largas que 2-3 oracionesEncaja fuertePatrón A las esconde por defecto
La página ES la respuesta (no una lista)Encaja fuertePatrón A sobre-estructura
Snippet de búsqueda como targetEncabezado + párrafo se parsean limpioPatrón A también funciona
Superficie de citación IAExtracción estableIgual — los motores leen el DOM
Tabla de contenidosGratis desde el outline de encabezadosPatrón A requiere custom
h2/h3
los encabezados en forma de pregunta son la señal semántica más fuerte — motores y lectores de pantalla dependen de ellos
WCAG 2.4.6 + docs GSC
Igual
los motores de IA tratan Q&A basado en encabezados y Q&A en disclosure como aproximadamente equivalentes para extracción
Paper GEO Princeton · hallazgos agnósticos al patrón

Capítulo 04

Tres trampas que evitar

Trampa — Reinventar el disclosure con divs
Custom <div>+<button>+aria-expanded funciona pero es más difícil de mantener accesible entre navegadores, actualizaciones de tecnologías asistivas y refactors de componentes. <details>/<summary> es la elección duradera. Ve al build custom solo cuando necesites comportamientos que el elemento nativo no puede.
Trampa — Mantener JSON-LD FAQPage en páginas no-FAQ
Si tu página de producto o post de blog tiene tres items Q&A al fondo, esa página no es FAQPage. El schema debe describir la página con precisión. El argumento de Joost de Valk: la honestidad schema-contenido es la disciplina que previene el siguiente ciclo de deprecación.
Trampa — Poner el texto de la pregunta solo en JSON-LD
Algunas implementaciones esconden el Q&A detrás de una pestaña y mandan el contenido completo solo en el JSON-LD. Los propios docs de Google lo prohíben. Los motores de IA extraen del DOM visible. Si una pregunta no aparece en la página renderizada, no existe para la extracción IA.

Capítulo 05

Playbook de migración

01
Audita cada página con schema FAQPage
Encuentra cada página que emite JSON-LD FAQPage. Para cada una: confirma que la página es genuinamente un FAQ (Q&A es el propósito principal, contenido descrito honestamente). Mantén el schema donde es honesto, quítalo donde no.
Recomendación de Joost
02
Convierte accordions custom a <details>
Si tienes un componente accordion custom React/Vue envolviendo cada FAQ, reemplázalo por <details>/<summary> semántico. Probablemente cortes JS, ganes en accesibilidad y evites issues de CLS. Las animaciones pueden quedarse vía CSS @starting-style.
MDN · WCAG
03
Promueve Q&A inline a encabezados
En artículos de centro de ayuda y FAQs de formato largo, cambia widgets colapsables por prosa basada en encabezados. La página se vuelve escaneable desde el outline, los snippets de búsqueda obtienen targets más limpios y los motores de IA extraen spans con más confiabilidad.
Básicos de extracción IA
04
Decide sobre JSON-LD solo-para-Bing
Bing aún premia los rich results FAQPage según su guidance de octubre 2025. En páginas donde el JSON-LD es honesto, mantenerlo es gratis para visibilidad en Bing. En páginas donde no es honesto, quítalo — incluso para Bing.
Microsoft · oct 2025
05
Prueba con un lector de pantalla
Corre VoiceOver (Mac), NVDA (Windows) o TalkBack (Android) en cada patrón FAQ que envíes. <details>/<summary> debe anunciarse como "summary, botón" y togglear correcto. Los accordions custom fallan esto seguido y solo lo notas con un lector de pantalla real.
WCAG 4.1.2
06
Actualiza las reglas del analizador
Si tu tooling SEO aún te dice que añadas FAQPage en todas partes, recalibra. That SEO Agent va a enviar un check de Q&A semántico que premia patrones HTML correctos y marca mismatches schema-contenido.
Nuestro roadmap

Capítulo 06

Qué cambia en nuestro analizador

Nuestros analizadores GEO y AI Visibility actualmente premian el schema FAQPage con peso alto. Después de la deprecación de mayo 2026 y el estudio causal de Ahrefs, estamos moviendo el peso hacia lo que realmente lleva la señal: patrones HTML Q&A semánticos en el DOM renderizado. Abajo está la forma del nuevo check.

Premiar patrones Q&A semánticos
Detectar <details>/<summary>, encabezados en forma de pregunta y listas de definición. Otorgar puntos por estructura Q&A visible independiente del JSON-LD.
Detectar mismatch schema-contenido
Marcar JSON-LD FAQPage en páginas sin sección FAQ visible. La razón por la que murieron los rich results FAQ fue el abuso — y el abuso es detectable desde un solo render de página.
Calificar por honestidad, no cobertura
Más schema no es mejor. Schema honesto y estrecho que coincide con la página le gana cada vez al schema amplio. Nuestro score debe reflejarlo, y lo va a hacer.
Fuentes primarias
Documentación oficial de plataformas
MDN Web Docs — <details> element referencedeveloper.mozilla.org
HTML Living Standard — Interactive elements (§4.11)html.spec.whatwg.org
Google Search Central — FAQPage structured data (May 2026 deprecation)developers.google.com
Microsoft — Optimizing for AI search answers (Oct 2025)ads.microsoft.com
Análisis de la industria
Joost de Valk — The FAQ schema cycle (May 2026)joost.blog
Ahrefs — Does schema markup help with AI citations? (causal study, 2026)ahrefs.com
Estándares y estudios
WCAG 2.2 — Web Content Accessibility Guidelines (W3C Recommendation)w3.org/TR/WCAG22
Aggarwal et al. — GEO: Generative Engine Optimization (KDD 2024)arxiv.org/abs/2311.09735

Audita tu implementación FAQ

Envía contenido Q&A que los motores y lectores de pantalla realmente leen.

El analizador de That SEO Agent se está actualizando para premiar Q&A en HTML semántico y marcar mismatches schema-contenido. Ejecuta una auditoría en tus páginas FAQ y mira qué está funcionando — y qué está silenciosamente invisible.

Gratis durante beta · Consciente de HTML semántico

THAT SEO AGENT

44 herramientas SEO para Claude, ChatGPT y Cursor. Conecta GSC, GA4 y PageSpeed. Deja de explicarle a la IA sobre tu propio sitio.

That SEO Agent - Stop briefing AI about your own site. | Product HuntThat SEO agent - Featured on Builders.to
© 2026 THATSEOAGENT.COM · TODOS LOS DERECHOS RESERVADOSHECHO CON ♥ PARA PROFESIONALES SEO