Le di a GPT-Vision un screenshot de la homepage de shinobis.com. En un chat separado, le pegué el HTML completo del mismo sitio. Las mismas 5 preguntas en ambos casos: de qué trata, para quién es, cuál es la jerarquía, qué harías primero, y qué te confunde.
Describió dos sitios diferentes.
Desde la imagen: "Entiendo qué es, pero no estoy 100% seguro de qué quieres que haga primero." Desde el HTML: "La estructura semántica es mucho más explícita para una IA que para una taxonomía convencional de blog."
Mi sitio es más claro para máquinas que para humanos. Y eso no fue intencional.
Lo que la imagen no comunica
Desde el screenshot, GPT-Vision identificó el tema general rápidamente: un diseñador que comparte herramientas y workflows de IA. Hasta ahí, correcto. Pero señaló cinco problemas que solo son visibles mirando la página como un humano la ve.
La identidad del sitio no es clara. El logo aparece como "XX" sin un nombre legible. Un visitante nuevo no sabe de quién es el sitio sin leer más.
Hay demasiados puntos de entrada compitiendo. Herramientas gratuitas, Claude Code, tres caminos, artículos. GPT-Vision dijo: "I can understand the site, but I don't immediately know what the creator considers the #1 thing I should do."
"Empieza con Claude Code" es demasiado específico sin contexto previo. Un visitante nuevo no sabe por qué Claude Code es importante.
Los thumbnails generativos dominan visualmente la lista de artículos pero no comunican nada sobre el contenido. Los títulos hacen el trabajo. Las imágenes ocupan espacio visual sin aportar información. GPT-Vision describió los thumbnails como "QR-code-looking" y señaló que "don't help me understand the content."
Los tres caminos ("Más conectado / Explorar / Construir") suenan como categorías pero su relación con el resto del sitio no es obvia desde lo visual.
Lo que el HTML sí comunica
Desde el HTML, sin ver nada visual, GPT construyó un modelo mental mucho más completo y coherente del sitio.
Identificó exactamente qué es: "a personal technical publication and tool hub by a UX/UI designer who uses AI in real production work." Eso es porque el HTML declara explícitamente qué es el sitio, para quién es, y cuál es el principio detrás. No lo infiere. Lo lee.
Mapeó la jerarquía completa: posicionamiento, luego herramientas, luego orientación, luego intención del usuario, luego contenido curado, luego artículos. Notó que la página prioriza la propuesta de valor antes que el contenido, lo cual es una decisión de arquitectura de información deliberada que desde la imagen se percibe como "demasiados puntos de entrada."
Identificó la acción principal sin ambigüedad: "Try my free tools" tiene la clase btn-primary y está directamente debajo del H1. Para una máquina, la jerarquía es clara. Para un humano mirando la página, compite con "Empieza con Claude Code" que está al lado.
Y concluyó algo que ninguna de las auditorías anteriores articuló tan claramente: "The HTML is much more explicit for an AI than it is for a conventional blog. It literally declares what this is, who it's for, the principle, the user intents, and the primary tool action. That is a very strong semantic structure."
El mismo sitio, dos lecturas
Las divergencias son el hallazgo.
La identidad. Desde el HTML, la IA sabe exactamente quién soy, qué hago, y por qué importa. El nav dice "Designer in the Age of AI". Los meta tags establecen "AI Tools and Workflows for Designers." Desde la imagen, el logo parece decir "XX" y el visitante tiene que leer el hero para entender de quién es el sitio.
Los thumbnails. Desde el HTML, los alt text existen y son descriptivos para los artículos de la grilla. Las máquinas leen eso. Desde la imagen, un humano ve patrones visuales tipo QR que dominan la lista de artículos sin comunicar nada sobre el contenido de cada post. El HTML es accesible para máquinas. La experiencia visual no es informativa para humanos.
La acción principal. Desde el HTML, btn-primary marca inequívocamente "Try my free tools" como la acción principal. Desde la imagen, compite con "Empieza con Claude Code" y con los tres caminos y con los artículos. La prioridad que el código establece no se traduce visualmente.
La orientación. Desde el HTML, las secciones "Qué es esto / Para quién / El principio" son contenido estructurado que responde las tres preguntas básicas de un visitante nuevo. Desde la imagen, son bloques de texto que compiten con los CTAs y los artículos por atención visual.
Lo que esto revela sobre GEO
Durante 6 meses construí infraestructura para que las máquinas entiendan mi contenido. JSON-LD con 5 entidades conectadas. llms.txt con resumen del sitio. Content negotiation para servir Markdown a agentes. Un buscador de grafo con endpoint WebMCP. Todo eso funciona. Los modelos de IA leen mi sitio y entienden exactamente qué es, para quién es, y cómo se relacionan los contenidos entre sí.
Pero la capa visual, la que ven los humanos que llegan por primera vez, no comunica con la misma claridad. La infraestructura invisible es más precisa que la interfaz visible. El backend le habla a las máquinas con exactitud. El frontend le habla a los humanos con ambigüedad.
Es una inversión interesante de la prioridad habitual: optimicé deliberadamente la estructura semántica para máquinas y descubrí que la interfaz visual no había recibido el mismo nivel de atención.
Los thumbnails como síntoma
Las imágenes generativas de cada post nacieron para resolver un problema real: las fotos de stock se repiten y se sienten muertas. Cada imagen es un patrón visual único generado desde el hash del título del post. Son rápidas de cargar (2 a 8KB en SVG), únicas por definición, y no requieren buscar imágenes manualmente.
Pero GPT-Vision acaba de confirmar algo que sospechaba sin datos: los thumbnails no comunican contenido. Un humano mira la lista de artículos y ve patrones repetitivos que no le dicen nada sobre cada post. Los títulos hacen todo el trabajo. Las imágenes ocupan espacio visual que podría estar comunicando algo útil.
Eso no significa que los thumbnails generativos sean un error. Significa que su función es identidad visual, no comunicación de contenido. Si los evalúas como comunicación, fallan. Si los evalúas como identidad (cada post tiene una imagen única que no es stock), funcionan. El problema es que ocupan el espacio visual donde un humano espera comunicación.
Lo que voy a cambiar
La capa visual necesita heredar la claridad de la capa semántica. El HTML ya sabe qué priorizar. La interfaz todavía no.
Los thumbnails son un proyecto futuro que necesita exploración: cómo hacer que la imagen generativa comunique algo sobre el contenido del post sin perder la identidad visual única ni la velocidad de carga. Es un problema de diseño que no voy a resolver con un fix rápido.
La acción principal necesita dominar visualmente. Si el HTML dice btn-primary, la interfaz debería reflejarlo sin competencia visual al mismo nivel.
La identidad del sitio necesita ser legible en los primeros 2 segundos sin leer texto. Un visitante que llega desde una citación de IA debería saber de quién es el sitio antes de hacer scroll.
La lección
Si tu infraestructura semántica es más clara que tu interfaz visual, tienes un problema que la mayoría de blogs no tiene: las máquinas te entienden mejor que las personas. Y en un ecosistema donde los humanos siguen siendo quienes deciden si tu contenido vale la pena, eso significa que la mitad del trabajo está perfecta y la otra mitad necesita ponerse al nivel.
El mismo test que revela la fortaleza de tu GEO revela la debilidad de tu UX. Y eso es exactamente el tipo de descubrimiento que no puedes hacer leyendo solo métricas o solo código. Necesitas ver tu sitio como lo ven dos audiencias diferentes: la máquina que lee tu HTML y el humano que mira tu pantalla.