20 señales que tu sitio está vibecodeado
Tu sitio puede funcionar perfecto y aún así gritar que lo hizo una IA. Estas son las 20 señales que lo delatan, una por una, con lo que revisa cualquiera que sepa mirar y cómo se arregla cada una. Todo acá, sin dejar el correo.
Vibecodear un sitio es fácil. Que no se le note es lo difícil. La IA te arma una web que carga, se ve decente y hasta tiene animaciones, pero deja afuera todo lo que no le pediste: la página de error, el título de cada ruta, la descripción que sale en Google, el archivo que le dice a los buscadores qué indexar. Nada de eso rompe el sitio. Solo hace que se note quién lo hizo, y que no aparezca en ningún lado.
La lista de abajo son las 20 cosas que reviso cuando alguien me manda su web. Las agrupé en tres tandas: lo que se ve desde afuera sin abrir nada, lo que se ve al mirar el código fuente, y lo que se ve al abrir la consola. Ninguna requiere saber programar para detectarla. Casi todas se arreglan en minutos si sabés que existen.
Ese es el punto de fondo, y es el mismo de siempre: ninguna de estas señales la arregla la herramienta. Las arregla saber que existen. El modelo va a cambiar el mes que viene y esta lista va a seguir igual, porque no es una lista sobre IA, es la lista de lo que hace que una web sea seria.
Las 20 señales
- 1
URL de vercel.app
El proyecto nunca salió del hosting. Un dominio propio cuesta unos diez dólares al año y es lo primero que separa un experimento de un negocio.
Cómo se arregla: Comprá el dominio (Namecheap, Cloudflare o GoDaddy), agregalo en Vercel en Settings, Domains, y pegá los registros que te da: un registro A para el dominio raíz y un CNAME para www. Elegí uno de los dos como canónico y dejá que el otro redirija, no los dejes vivos a los dos. Después buscá en el código toda URL vieja de vercel.app hardcodeada, porque el OG y el canonical van a seguir apuntando ahí.
- 2
View source vacío
Click derecho, ver código fuente, y aparece un div vacío. Tu contenido lo pinta JavaScript en el navegador, así que Google, los previews de WhatsApp y los modelos de IA llegan a una página en blanco.
Cómo se arregla: Es el síntoma de una SPA pura. La solución de fondo es renderizar en el servidor: pasarte a Next.js o Astro, donde el HTML sale ya escrito. Si el sitio ya está hecho y no lo vas a rehacer, el parche es prerenderizar las rutas públicas en el build. Verificá con curl a tu URL: si el texto de tu hero no aparece en la respuesta, nadie lo está viendo salvo un navegador con JS.
- 3
Sin página 404
Escribís cualquier ruta que no existe y sale una pantalla en blanco o el error crudo del framework. Es la señal más barata de arreglar y la que más se olvida.
Cómo se arregla: En Next.js es un archivo `app/not-found.tsx`. Que tenga tres cosas: que diga en humano que esa página no existe, un link de vuelta al home y un link a lo que la persona probablemente buscaba. Probala a mano entrando a /esto-no-existe antes de darla por hecha.
- 4
Vite + React para todo
Vite es excelente para una app detrás de un login. Para un sitio de contenido que tiene que aparecer en Google, es la herramienta equivocada, y es el default que la IA elige cuando no le decís nada.
Cómo se arregla: Separá los dos mundos. Todo lo público (home, landings, blog, precios) va en un framework que renderiza en el servidor: Next.js si vas a tener app y contenido en el mismo proyecto, Astro si es casi todo contenido. La app privada puede seguir siendo una SPA. No es una cuestión de gusto: es que el contenido público necesita existir sin JavaScript y la app no.
- 5
Mismo título en todas las páginas
Las cinco pestañas dicen lo mismo. Google usa el title como el titular del resultado de búsqueda, así que tenés cinco páginas compitiendo por el mismo encabezado y ninguna gana.
Cómo se arregla: Un title único por ruta, de 50 a 60 caracteres, que arranque con lo específico y termine con la marca. En Next.js se exporta `metadata` por página, y en el layout raíz se define un `title.template` para no repetir el sufijo. Regla de escritura: si el title no serviría como titular de un resultado de Google, está mal escrito.
- 6
Sin meta descripciones
Cuando falta, Google inventa el resumen agarrando el primer texto que encuentra. Casi siempre agarra el menú de navegación.
Cómo se arregla: Una descripción por página, de 140 a 160 caracteres, escrita como una promesa concreta y no como un resumen. Mencioná el problema que resuelve la página y usá las palabras que la gente escribe al buscarlo. No repitas la misma en dos rutas: repetida cuenta casi igual que ausente.
- 7
Sin og:image
Pegás el link en WhatsApp o LinkedIn y sale un rectángulo gris. El sitio puede ser impecable y el link igual parece spam.
Cómo se arregla: Necesitás og:image (1200 x 630), og:title, og:description, og:url y twitter:card en summary_large_image. Lo importante es que la imagen sea una URL absoluta con https, no relativa, porque es el error que hace que no aparezca nada. Generala automática por ruta en vez de subir un PNG a mano, así ninguna página nueva nace sin OG. Comprobalo en el debugger de Facebook y en el Post Inspector de LinkedIn, que cachean fuerte.
- 8
Sin datos estructurados
Es el bloque JSON que le explica a Google qué es la página: una persona, un servicio, un curso, un artículo. Sin él, Google adivina, y no te da ninguno de los resultados enriquecidos.
Cómo se arregla: Un bloque JSON-LD por página, con el tipo que corresponda: Person u Organization en el home, Service en las páginas de servicio, Course en un curso, Article en un recurso, FAQPage donde haya preguntas. Solo marcá lo que de verdad está visible en la página. Pasalo por el Rich Results Test de Google, que te dice si es válido y qué resultado te habilita.
- 9
Varios H1 por página
La IA reparte H1 por todas las secciones porque se ven grandes. Los encabezados no son tamaños de letra, son la tabla de contenidos de la página.
Cómo se arregla: Un solo H1 por ruta, que es el tema de esa página. Las secciones van en H2, las subsecciones en H3, sin saltarte niveles. Si un texto necesita verse grande pero no es un encabezado, es un párrafo con clase de tamaño. Ojo con el caso típico en móvil: duplicar el H1 para dos layouts distintos cuenta como dos.
- 10
Sin H1
El otro extremo del mismo error. La página abre con un logo y un texto enorme que en realidad es un div, así que ni Google ni un lector de pantalla saben de qué trata.
Cómo se arregla: Que el titular del hero sea un H1 de verdad. Revisalo rápido con la extensión de accesibilidad del navegador o abriendo el outline de encabezados: si la lista arranca en H2 o en H3, falta el H1.
- 11
Sin canonical tag
La misma página vive en varias URLs a la vez: con www y sin www, con barra y sin barra, con parámetros de campaña pegados. Google las trata como páginas distintas y reparte la autoridad entre todas.
Cómo se arregla: Un canonical absoluto por página apuntando a la versión que elegiste. Decidí primero una sola forma (yo uso www y sin barra final) y hacé que el servidor redirija todo lo demás con 301. El canonical no reemplaza la redirección: van juntos.
- 12
Sin llms.txt
Es el equivalente del sitemap para los modelos de lenguaje: un archivo en la raíz que resume en markdown qué es tu sitio y cuáles son sus páginas importantes. Cada vez más gente busca preguntándole a un modelo, no escribiendo en Google.
Cómo se arregla: Creá `/llms.txt` en la raíz del sitio con un H1 con el nombre del proyecto, una línea de qué hace, y listas de links con una descripción corta cada uno, agrupadas por sección. Es markdown plano, se escribe en diez minutos. Es un estándar joven y opcional, así que va después de todo lo demás de la lista, no antes.
- 13
robots.txt bloqueando a la IA
Muchos templates traen bloqueos a los crawlers de modelos copiados de otro proyecto. Estás invisible para el canal donde cada vez más gente busca, sin haberlo decidido.
Cómo se arregla: Abrí tu-dominio.com/robots.txt y leelo. Si ves Disallow para GPTBot, ClaudeBot, PerplexityBot o CCBot y querés que te citen, sacalos. Aprovechá y revisá que no haya un `Disallow: /` heredado del staging, que es el error que borra un sitio entero de Google. Lo que sí conviene bloquear es /api/ y las páginas de gracias o confirmación.
- 14
Sin favicon
La pestaña muestra el ícono genérico o el logo del framework. Cuando alguien tiene quince pestañas abiertas, la tuya es la que no se puede encontrar.
Cómo se arregla: No alcanza con un ico. Poné favicon.ico, un PNG de 180x180 para apple-touch-icon, y un icono de 512x512 en el manifest para Android. En Next.js basta con dejar `icon.png` y `apple-icon.png` en app/ y los genera solos. Verificá que el ícono se lea a 16 píxeles: un logo con texto a ese tamaño es una mancha.
- 15
Sin sitemap.xml
Google encuentra tus páginas siguiendo links. Si una ruta no está enlazada desde ningún lado y no está en el sitemap, no existe.
Cómo se arregla: Generalo desde el código, nunca a mano, para que una página nueva entre sola. En Next.js es `app/sitemap.ts` devolviendo la lista de rutas con lastModified. Incluí solo páginas públicas e indexables: las de gracias y las privadas se quedan afuera. Después declararlo en robots.txt y subirlo en Search Console, que es el paso que casi todos se saltan.
- 16
Sin atributo de idioma
La etiqueta html sale sin lang, o sale con lang="en" en un sitio en español porque así venía el template. Google usa eso para decidir a quién le muestra tu sitio, y los lectores de pantalla para elegir la pronunciación.
Cómo se arregla: Poné `<html lang="es">`. Si querés ser preciso por región, es-CR o es-419 para Latinoamérica. Si tenés versiones en varios idiomas, agregá los hreflang cruzados, y que cada versión se apunte también a sí misma, que es la parte que siempre falta.
- 17
Alt text faltante
La IA genera las etiquetas de imagen sin alt, o con basura tipo "image" o el nombre del archivo. Es accesibilidad, es SEO de imágenes, y es lo que se lee cuando la imagen no carga.
Cómo se arregla: Describí qué se ve y qué función cumple, en una frase, sin empezar con "imagen de". Si la imagen es puramente decorativa, poné alt vacío (alt="") a propósito, que no es lo mismo que no ponerlo. Las capturas de pantalla necesitan que el alt diga qué muestra la captura, no que es una captura.
- 18
Source maps expuestos
Los archivos .map en producción dejan que cualquiera reconstruya tu código original, con los comentarios y los nombres de variables incluidos. A veces con más de lo que creías que había ahí.
Cómo se arregla: Apagá la generación de source maps en el build de producción, o subilos a tu herramienta de errores sin publicarlos. Antes de eso, hacé la revisión que importa: buscá claves de API en el código del cliente. Toda variable que empiece con NEXT_PUBLIC_ o VITE_ se hornea en el bundle y es pública, aunque el .env esté en el gitignore. Si encontrás una clave secreta ahí, rotala, no la borres nomás.
- 19
Errores en consola
Abrís las herramientas de desarrollo y hay warnings de React, 404 de imágenes, errores de hidratación. El sitio se ve bien igual, y esa es justamente la razón por la que nadie los mira.
Cómo se arregla: Abrí la consola en cada página con la vista de red vacía y arreglá hasta llegar a cero. Priorizá en este orden: errores de hidratación (te están rompiendo la interactividad), 404 de recursos (te están rompiendo el diseño en algún dispositivo), y los warnings al final. Los de key duplicada en listas son señal de que algo se está renderizando dos veces.
- 20
Bundle de JS gigante
Una landing de una pantalla que baja varios megas de JavaScript. Se nota en un celular de gama media con datos móviles, que es donde está la mayoría de tu tráfico real.
Cómo se arregla: Corré Lighthouse en modo móvil, no en escritorio. Las tres causas casi siempre son las mismas: una librería de animación entera para dos efectos, un paquete de íconos completo importado de una sola vez, y fuentes cargadas en todos los pesos cuando usás dos. Sacá lo que no uses, importá los íconos uno por uno, cargá bajo demanda lo que está debajo del pliegue, y serví las imágenes en webp con width y height puestos para que no salte el layout.
Contá cuántas tenés. Si te salieron más de cinco, no es que hayas hecho algo mal: es que la IA no las arregla si no se las pedís. La herramienta cambia. Esta lista no.
El siguiente paso
Cómo hacer un website desde 0 con IA
Esta lista es el repaso. El curso es el proyecto entero con todo esto resuelto desde el día uno, más lo que ninguna lista te enseña: pagos que disparan, correos que llegan, analítica que mide y SEO que aparece.
A tu ritmo · WhatsApp 3 meses · 1 sesión 1:1 · $49 precio fundador hasta el 31 de agosto (luego $199)