Cuando un agente de IA lee tu página, no ve su diseño: ve el árbol del DOM. La cuidada composición que construiste acumulando capas de <div> no es más que un conjunto de contenedores sin significado para el analizador. Sustituirlos por etiquetas semánticas puede cambiar por completo la precisión con la que se extrae un mismo texto. El HTML semántico no es solo una mejora adicional de accesibilidad: es la forma más económica de ayudar a los motores de IA a citar tu contenido sin ruido.
Por qué los agentes de IA aprovechan especialmente las etiquetas semánticas
Cuando Google AI Overview, Perplexity o ChatGPT rastrean una URL, una cadena de procesamiento convierte el HTML en texto sin formato. En ese proceso se pierde el estilo, pero se conserva la estructura: <h1> indica cuál es el tema de la página, <article> delimita el contenido y <nav> y <footer> se descartan como elementos repetitivos de la plantilla. Elegir las etiquetas correctas ayuda directamente al modelo a identificar las ideas clave. Si todo está construido con elementos <div>, tendrá que recurrir a la extensión, la ubicación y algo de suerte para adivinar qué párrafo merece una cita.
La diferencia está en el grado de confianza con el que se extrae el contenido. Un bloque envuelto en <main><article> y organizado mediante una jerarquía continua de <h2> constituye una unidad con límites claros que el analizador puede aislar. Si se sustituye por <div class="content-wrapper-2">, el mismo texto pierde todas esas señales. En las auditorías GEO que realizamos para clientes, el problema de visibilidad más habitual no es la calidad del contenido, sino que este queda enterrado bajo elementos <div> anidados y sin significado semántico. El motor de IA, por tanto, no puede aislar una cita limpia.
Las etiquetas expresan significado, no apariencia
La semántica se basa en una sola idea: cada etiqueta declara la función de un contenido, no su aspecto. <button> representa un elemento que activa una acción; <a>, uno que lleva a otro destino; y <ul>, un conjunto de elementos relacionados. Navegadores, lectores de pantalla y analizadores de IA interpretan ese significado de forma simultánea. Al elegir una etiqueta, no te preguntes «¿cómo quiero que se vea?», sino «¿qué es realmente este contenido?».
- <main>: debe haber uno y solo uno en toda la página. Delimita «el verdadero contenido de esta página» para que el analizador omita directamente el encabezado, la barra lateral y el pie.
- <article>: identifica una unidad de contenido que puede extraerse de forma independiente y conservar su sentido, como un artículo, una sección de preguntas frecuentes o una ficha de producto.
- De <h1> a <h6>: forman el índice jerárquico de la página. Los niveles deben mantener una secuencia lógica; no los alteres para cambiar el tamaño de la fuente.
- <nav>: delimita los enlaces de navegación. Indica al motor que esa zona es un menú, no parte del texto principal.
- <section> con encabezado: agrupa párrafos sobre un mismo tema y, por lo general, incluye un encabezado.
- <table>, <thead> y <th>: utiliza etiquetas de tabla para datos tabulares reales, no elementos <div> para maquetarlos. Estas etiquetas permiten que la IA reconstruya las tablas.
- <time datetime> y <address>: convierten las fechas y los datos de contacto en campos que las máquinas pueden interpretar directamente.
Una comprobación sencilla consiste en leer el nombre de la etiqueta: ¿describe la naturaleza del contenido? Si utilizas un <div> para una acción en la que se puede hacer clic, su nombre solo dice «contenedor» y, por tanto, es incorrecto. Debería ser un <button>. La apariencia corresponde al CSS; las etiquetas deben aclarar el significado. Solo al separar ambas funciones las máquinas pueden interpretar la página con precisión.
Los errores más habituales: «sopa de divs» y encabezados desordenados
En la práctica, se repiten unos pocos problemas. Uno es construir toda la página exclusivamente con elementos <div> y <span>, sin ninguna etiqueta semántica: lo llamamos «sopa de divs». Otro es incluir varios <h1> en una página o utilizar un <h4> en lugar de un <h2> solo para conseguir otro tamaño de fuente. Esto rompe la jerarquía de encabezados y hace que el modelo genere un esquema incorrecto. También encontramos «listas» compuestas a la fuerza mediante saltos de línea <br> y botones simulados con <div onclick>. En pantalla pueden parecer equivalentes, pero no aportan la misma información semántica al DOM.
Secuencia para transformar semánticamente una página
No es necesario rehacer todo el sitio web de una vez. Elige la página más importante para tu visibilidad y modifícala siguiendo este orden. Pronto entenderás cómo funciona el proceso.
- Traza primero la estructura principal: confirma que haya uno y solo un <main> en toda la página y envuelve el encabezado, la navegación y el pie con <header>, <nav> y <footer>, respectivamente.
- Corrige los niveles de encabezado: utiliza un <h1> por página, coloca <h3> únicamente bajo <h2> y no omitas niveles. Revisa el esquema de encabezados con una extensión del navegador o un comando.
- Envuelve el contenido en <article>: establece límites claros para cada unidad que pueda citarse de forma independiente, como una pregunta frecuente, una secuencia de pasos o una definición.
- Sustituye los componentes simulados: cambia <div onclick> por <button> y los falsos botones de navegación por <a href>.
- Estructura los datos: utiliza <table> para las tablas, <ul> u <ol> para las listas y <time> para las fechas.
- Añade label y alt: usa <label for> en los controles de formulario y alt en las imágenes para que las máquinas y los lectores de pantalla interpreten la misma semántica.
Cómo comprobar que la máquina realmente entiende la página
No confíes en impresiones después de aplicar los cambios. La comprobación más rápida es activar el «modo lectura» del navegador. ¿La vista de lectura de Safari o Firefox puede extraer el texto sin ruido? Si lo consigue, es probable que el analizador de IA también pueda hacerlo. El segundo método consiste en descargar desde la línea de comandos el HTML original y confirmar que el texto no se genera mediante JavaScript. El tercero es abrir el árbol de accesibilidad en las herramientas de desarrollo: su estructura se aproxima mucho a la forma en que una máquina interpreta la página. Solo después de superar las tres comprobaciones podrás considerar que la página es realmente legible.
Si desactivas el CSS de todo el sitio, ¿la página sigue siendo legible? Si el orden se mantiene, los encabezados son claros y las listas siguen siendo listas, el agente de IA podrá entenderla. Si todo se convierte en una sucesión desordenada de texto, la máquina tampoco podrá interpretarla.
Después de la semántica, añade los datos estructurados
El HTML semántico es el punto de partida, no el límite. Una vez corregido, añade JSON-LD de Schema.org y utiliza tipos como Article, FAQPage y Product para explicar con claridad a las máquinas datos como la fecha, el autor y el precio. Pero no inviertas el orden: colocar schema sobre una «sopa de divs» es puro maquillaje. El rastreador contrastará el marcado con el contenido real del DOM y puede restarle valor si no coinciden. Corrige primero la semántica del HTML para que el schema tenga una base sólida. Si quieres descubrir cómo ve tu página un analizador de IA y dónde están las carencias, puedes solicitar un diagnóstico GEO de 30 minutos. Revisaremos contigo los resultados reales de la extracción.
