Google indexa el documento, no el diseño

Este mes Google hizo un cambio silencioso a su documentación para desarrolladores: aclaró que Google Search actualmente puede no indexar el contenido colocado dentro de las propiedades CSS content, porque ese contenido no es parte del DOM. Es el tipo de nota que es fácil pasar de largo, pero vale la pena detenerse en ella. El CSS tiene una propiedad content, usada con mayor frecuencia junto a los pseudo-elementos ::before y ::after, que permite a la hoja de estilos inyectar texto en una página —una etiqueta antes de un elemento de lista, un icono, un prefijo, a veces una línea de copia real. En la página renderizada ese texto inyectado se ve exactamente como cualquier otro; una persona no puede distinguirlo de las palabras escritas en el HTML. Pero lo produjo la capa de estilo, no se escribió en el marcado, y así nunca se vuelve parte del Document Object Model —la representación estructurada de la página que un navegador ensambla a partir de tu HTML y que el rastreador de Google lee para entender qué es tu página. Google simplemente está confirmando la consecuencia: las palabras que existen solo en la propiedad CSS content pueden no indexarse, porque en lo que al documento respecta no están ahí. Tomado literalmente este es un punto estrecho, que afecta a la minoría de sitios que empujan texto significativo a través del CSS. Pero la razón por la que ocurre —la brecha entre lo que una página parece y lo que el documento contiene— es general, lo que es lo que vuelve una pequeña nota digna de toda una discusión.

Para entender por qué ocurre esto, ayuda separar dos capas que el renderizado en pantalla funde en una. La primera es el documento: el marcado HTML que define qué es de verdad tu página —los encabezados, los párrafos, los enlaces, las listas, el contenido y la estructura que lo sostiene. La segunda es la presentación: el CSS que define cómo se ve ese documento —los colores, el espaciado, la tipografía, la maquetación, y, a través de la propiedad content, un poco de decoración inyectada. Cuando cargas una página, el navegador fusiona las dos en lo que ves, y la fusión es lo bastante fluida como para que el límite desaparezca para un lector humano. Pero el rastreador no lee la imagen fusionada como lo hace tu ojo. Lee el DOM, el documento estructurado que el marcado produce, donde el contenido y la estructura viven de verdad. Cualquier cosa que existe solo en la capa de presentación —cualquier cosa que el CSS pinta encima pero que el marcado nunca declaró— simplemente no está en ese documento, y lo que no está en el documento no está disponible para ser leído, indexado, o posicionado. Esta no es una limitación que Google no logra superar; es una separación de responsabilidades deliberada sobre la que la web está construida. El CSS existe para dar estilo al contenido, no para ser contenido. La propiedad content estaba pensada para la decoración —una viñeta, una comilla, un icono— no para palabras que cargan significado. Enrutar significado real a través de ella pide a la capa de presentación hacer el trabajo del documento, y luego se sorprende de que el documento no lo contenga. La regla del rastreador es consistente y fácil de enunciar: indexa el documento, no el diseño.

El caso del CSS content vale la pena tratarlo no porque sea generalizado —no lo es— sino porque es la ilustración más limpia de un error que sí es generalizado, solo que con otra ropa. El error subyacente es tratar la apariencia renderizada como el contenido, cuando los dos pueden separarse en silencio. Una vez que ves el patrón, lo encuentras por todas partes. El texto horneado en una imagen —un encabezado, una cita, una estadística renderizada como parte de un gráfico— se ve como contenido para una persona y es invisible para el rastreador a menos que las mismas palabras existan en el marcado o en un atributo alt. Un encabezado estilizado para parecer uno pero marcado como un div ordinario se lee como un encabezado para el ojo y como texto indiferenciado para el documento, así que su señal estructural se pierde. La copia que un script escribe de una forma que el rastreador no ejecuta, o que solo aparece tras un clic que nunca realiza, está llanamente para un humano y ausente de la versión que Google lee. En cada uno de estos la forma es idéntica: algo significa algo para la persona que mira la página renderizada, pero ese significado nunca se comprometió al documento que el rastreador procesa. El mecanismo difiere —hoja de estilos, imagen, elemento mal marcado, script— pero el fallo y el arreglo son los mismos: asegúrate de que el significado viva en el marcado, no solo en el renderizado.

El remedio es un hábito y una regla. El hábito es revisar el documento directamente en vez de confiar en la página renderizada. Mira la página como lo hace el rastreador —inspecciona el código fuente HTML, o mejor, el DOM renderizado— y confirma que las palabras, encabezados y enlaces que importan están presentes ahí como marcado genuino, en vez de pintados por CSS, sellados dentro de una imagen sin equivalente de texto, o supeditados a un script o interacción para aparecer siquiera. La herramienta de inspección de URL de Google es la comprobación autoritativa aquí: te muestra el HTML renderizado que Google de verdad ve, y si algo importante falta de esa vista, falta y punto, por prominente que se vea en tu navegador. Haz de esa inspección una parte rutinaria de construir y revisar páginas, no un paso forense que solo buscas cuando los rankings decepcionan. La regla que previene el problema en primer lugar es la separación limpia en torno a la cual la web fue diseñada: usa HTML para el contenido y la estructura —marca los encabezados como encabezados, el texto como texto, los enlaces como enlaces, y añade datos estructurados para enunciar el significado explícitamente— y usa CSS estrictamente para cómo se ve todo eso. La señal de que estás a punto de cometer este error es el momento en que recurres a la hoja de estilos para añadir palabras que cargan significado; ese es precisamente el movimiento contra el que la aclaración del mes advierte. La decoración pertenece al CSS. El significado pertenece al marcado. Construir páginas cuyo documento carga todo lo que importa —para que el rastreador lea la misma sustancia que una persona ve, en vez de una versión vaciada de ella— es la disciplina estructural por la que el AC Group ha trabajado durante 27 años.