Empecemos por la conclusión: cuando un motor de IA lee tu página web, no se detiene primero a valorar lo bien que está escrita. Antes descompone el HTML en un árbol, descarta lo que considera ruido y convierte el contenido restante en texto sin formato o Markdown. Si la página acumula decenas de capas de div y los encabezados no son más que texto ampliado y en negrita, el contenido puede quedar fragmentado o confundirse con una barra lateral durante este proceso. Así será difícil que entre en la selección de fuentes que la IA utiliza como referencia. Un HTML limpio no es una obsesión técnica: puede determinar si la IA llega a citarte.
La clave es que la mayoría de los motores de IA no renderizan la página por completo como lo hace un navegador. Aplican procesos de extracción similares a los de las herramientas de legibilidad: localizan el área de contenido principal, eliminan la navegación y el pie de página, interpretan los encabezados de h1 a h3 como el esqueleto y toman los párrafos y las listas como el cuerpo del contenido. No ven la jerarquía visual que has diseñado cuidadosamente con CSS; solo reconocen la estructura expresada por las propias etiquetas HTML. Por eso, entre dos páginas visualmente idénticas, una puede citarse repetidamente y la otra quedar fuera de las respuestas por mucho que se retoque el texto.
Si los div están demasiado anidados, el sistema de recuperación se pierde
Los frameworks de frontend modernos facilitan la aparición de una auténtica «sopa de div»: cada elemento queda envuelto en nuevas capas y un texto que debería formar una explicación completa termina enterrado bajo ocho o diez div sin significado semántico. El extractor utiliza reglas heurísticas, como la densidad textual y el tipo de etiqueta, para decidir dónde está el contenido principal. Cuanto más profunda es la anidación y más se mezcla con fragmentos breves —botones, etiquetas o rótulos—, menor es su nivel de confianza. Puede seleccionar el área equivocada o dividir un párrafo continuo en tres fragmentos inconexos y procesarlos por separado.
La solución es sencilla: envolver el contenido principal con etiquetas semánticas. <main> contiene el contenido más importante de la página; <article>, una pieza que puede leerse de forma independiente; <section>, sus distintas secciones; y <figure>, una imagen junto con su información asociada. Estas etiquetas le indican directamente al extractor: «Esto es lo importante». No siempre es posible eliminar todas las capas generadas por el framework, pero al menos la capa exterior del contenido principal debe ser <main> o <article>, no el duodécimo div con una clase llamada wrapper. Si una sola etiqueta semántica resuelve la estructura, no hacen falta tres capas de div.
La jerarquía de encabezados es el índice que preparas para la IA
El extractor interpreta los encabezados de h1 a h6 como el índice completo del contenido y los utiliza para dividirlo en bloques. Si la segmentación es clara, la IA puede citar con precisión un párrafo concreto para responder a una pregunta determinada. Si es confusa, todo el artículo queda convertido en un bloque desordenado y las citas pierden contexto. Basta con seguir tres principios.
- Incluye un solo h1 por página, normalmente el título del artículo; estructura las demás secciones a partir de h2.
- No te saltes niveles: después de h2 debe venir h3, no h4 directamente. Saltar niveles puede hacer que el extractor interprete mal la relación jerárquica entre los párrafos.
- Los encabezados definen estructura, no estilo. Si quieres ampliar una línea de texto, utiliza CSS. No uses h2 solo para aumentar su tamaño ni acumules encabezados del mismo nivel con fines de SEO.
Uno de los errores más habituales es incluir un único h1 en toda la página y construir el resto como «falsos encabezados» mediante div y negritas. Para el rastreador, ese artículo no tiene secciones: es solo un gran bloque de texto continuo que debe extraer o descartar por completo. Sustituir esos falsos encabezados por h2 y h3 reales equivale a entregar un índice a la IA para que sepa dónde comienza cada tema.
Etiquetas y atributos semánticos: expresar el significado sin depender del CSS
La estructura permite extraer el contenido limpiamente; los atributos ayudan a conservar su significado después de extraerlo. El atributo alt aporta contenido a las imágenes en un entorno de texto sin formato; <time datetime> evita que las fechas se interpreten como cadenas de caracteres sin sentido; <table> y <th> conservan las relaciones entre campos cuando una tabla se convierte a Markdown; y <dl>, <dt> y <dd> agrupan términos y definiciones para que el modelo los extraiga como conjuntos claros de preguntas y respuestas. Los atributos ARIA (aria-label, aria-labelledby) se diseñaron originalmente para mejorar la accesibilidad, pero también aportan un significado legible por máquinas a los elementos sin texto visible.
Cómo utilizar correctamente los atributos de datos sin esperar resultados mágicos
Conviene ser claros: la mayoría de los sistemas de extracción con IA ni siquiera leen tus atributos data-* personalizados, porque no están diseñados para interpretar convenciones privadas. Los «atributos de datos» con soporte realmente amplio son los que responden a estándares: itemprop de microdatos, data-nosnippet —que indica al motor que no utilice ese párrafo como resumen— y, como capa legible por máquinas más fiable, JSON-LD. En lugar de inventar numerosos atributos data-geo-* y esperar que la IA los entienda, incorpora en JSON-LD los datos clave susceptibles de citarse, como el autor, la fecha de publicación, el precio y las preguntas frecuentes. Así, el sistema de recuperación contará con una fuente de información que no depende del diseño visual.
Por supuesto, data-* sigue siendo útil, pero para otros fines. Puedes utilizarlo en tus propias herramientas de analítica o sistemas internos para marcar qué pasajes se pueden citar y comprobar qué contenidos terminan utilizando los sistemas de IA. Es una coordenada para tu equipo, no una instrucción dirigida a la IA. Mantén separadas ambas funciones para no invertir esfuerzo en atributos que nadie leerá.
Lista de comprobación para limpiar el HTML
- Envuelve el contenido principal con <main> o <article> para delimitar un área única y claramente identificable.
- Elimina los div anidados que solo cumplen una función de maquetación y utiliza etiquetas semánticas siempre que sea posible.
- Incluye un h1 por página, no te saltes niveles entre h2 y h3 y sustituye todos los falsos encabezados por encabezados reales.
- Utiliza alt para las imágenes, <time> para las fechas, <th> para los encabezados de tabla y <dl> para los términos y sus definiciones.
- Incorpora los datos clave en JSON-LD; no dependas únicamente de atributos data-* personalizados.
- Cuando termines el contenido, convierte la página web a Markdown y revisa el resultado una vez. Esa salida se aproxima a la perspectiva de la IA.
La IA no te citará porque la página se vea bien en el navegador, sino porque haya podido extraer una versión limpia y comprenderla.— Tenten GEO
Dentro de una estrategia GEO, limpiar el HTML es una de las medidas que ofrece resultados con mayor frecuencia y, al mismo tiempo, una de las que más se pasan por alto. No exige reescribir el contenido: basta con organizar lo que ya existe en un formato legible por máquinas, con un coste reducido y resultados rápidos. Si quieres descubrir qué partes de tus páginas clave quedan fuera de la vista del extractor de IA, en nuestra auditoría GEO analizamos sus resultados de extracción. También puedes solicitar primero un diagnóstico GEO de 30 minutos para revisar tus propias páginas e identificar las carencias en directo.
