El diseño web y el SEO van juntos porque las decisiones que definen si Google puede rastrear y posicionar un sitio se toman durante el diseño, no después. Arquitectura de URLs, jerarquía de encabezados, peso de las imágenes y cuánto texto queda en HTML se deciden en el wireframe. Corregirlas después cuesta entre 40% y 70% de un sitio nuevo.
Ese es el número que sorprende a la mayoría: no es un ajuste de metadatos, es rehacer plantillas, migrar URLs y montar redirecciones. Abajo está qué decisiones de diseño afectan al posicionamiento, cuánto cuesta separarlos, el checklist de lo que hay que definir antes de abrir el primer boceto y qué exigirle por contrato a quien le construya el sitio.
La analogía que explica el problema
Imagine que termina de construir una casa —muros, fachada pintada, piso nuevo— y solo entonces le dice al ingeniero que quiere las tuberías y el cableado por dentro de las paredes. Habrá que romper lo recién pintado y picar el piso.
Eso pasa cuando se contrata a un diseñador para hacer una web “bonita” y meses después a un especialista para “ponerle SEO”: queda impecable por fuera y estructuralmente invisible para Google. El SEO no es una capa de pintura al final, es el cemento de la estructura.
Qué decisiones de diseño afectan al SEO
Un sitio web tiene dos audiencias: personas, que ven la parte visual, y rastreadores (Googlebot, GPTBot, PerplexityBot), que leen el código. El diseño decide qué ve cada uno. Si el texto de valor está incrustado dentro de una imagen —común en diseños muy artísticos—, el rastreador ve una página vacía, y una página vacía no compite por nada. Estas son las decisiones que se toman diseñando y su impacto real:
| Decisión de diseño | Impacto en SEO | Costo de corregirla después |
|---|---|---|
| Estructura de URLs y menú | Define qué se indexa y cómo se reparte la autoridad | Alto: migración + redirecciones 301 |
| Jerarquía H1–H3 de la plantilla | Google lee la página como esquema; sin jerarquía no hay tema claro | Medio: tocar cada plantilla |
| Texto dentro de imágenes o sliders | Contenido no indexable: para el buscador la página está vacía | Medio: rehacer piezas gráficas |
| Peso y formato de imágenes | LCP y Core Web Vitals; afecta rastreo y conversión | Bajo-medio: reexportar toda la librería |
| Render del contenido en JavaScript | Retrasa o impide la indexación del texto | Alto: cambio de arquitectura técnica |
| Tipografías y recursos externos | Bloqueo de render, CLS por fuentes que cargan tarde | Bajo: optimización técnica |
| Espacio para textos largos en el layout | Sin lugar para contenido, no hay nada que posicionar | Alto: rediseño de secciones |
| Enlazado interno contextual | Distribuye autoridad y define clústeres temáticos | Medio: reescritura de contenidos |
| Accesibilidad (contraste, foco, alt) | Correlaciona con usabilidad y rastreo semántico | Medio: auditoría por componente |
La columna que importa es la tercera. Ninguna de esas decisiones es cara al inicio: son 20 minutos de conversación en el wireframe. Todas son caras después.
Arquitectura de la información: la decisión más difícil de revertir
La arquitectura define qué URL existe, qué contiene y qué tan lejos está del inicio. Es lo primero que se planea y lo último que se puede cambiar sin costo: cada URL modificada arrastra enlaces, historial y posiciones ganadas. No es lo mismo una página de “Servicios” con una lista larga que una estructura de silos, donde cada servicio tiene su URL y su contenido:
dominio.com/servicios/abogado-penal/dominio.com/servicios/abogado-laboral/dominio.com/servicios/abogado-penal/bucaramanga/
Cada URL específica compite por su propia intención de búsqueda. Una sola página genérica compite por todas y no gana ninguna. Tres reglas prácticas:
- Una intención de búsqueda, una URL. Dos páginas para lo mismo se canibalizan entre ellas.
- Máximo tres clics desde el inicio hasta cualquier página que deba posicionar.
- URLs cortas y legibles, sin fechas ni parámetros: cambiarlas después cuesta tráfico.
Esta estructura sale de un keyword research hecho antes del diseño, no de la intuición sobre cómo “debería” verse el menú. Y si habrá páginas de campaña, defina desde el arranque cuáles son landing pages y cuáles son páginas del sitio: tienen objetivos y reglas de indexación distintas.
Jerarquía de encabezados: el esquema que Google lee
Google lee la página como un esquema jerárquico, no como una imagen. El H1 es el título principal y debe haber uno solo; los H2 son las secciones; los H3, los detalles dentro de cada sección. Ese árbol le dice al buscador de qué trata la página y qué parte responde a cada pregunta.
El error clásico de las plantillas baratas es usar los encabezados para cambiar el tamaño de la letra: un H2 porque “se ve más grande”, un H4 porque “queda mejor”. Eso destruye la lógica semántica. El tamaño se controla con CSS; la jerarquía es información, no estética.
Importa más que nunca porque los motores de IA extraen respuestas a nivel de pasaje: un H2 que formula una pregunta seguido de una respuesta directa de 40 a 60 palabras es lo que se cita. Sin jerarquía, no hay pasaje que extraer.
Velocidad: el diseño es el 70% del problema
La velocidad no se arregla con un plugin de caché: se decide en el diseño. Un hero con video de fondo de 8 MB, cuatro tipografías externas y un carrusel de seis imágenes a pantalla completa produce un sitio lento por construcción, y ningún ajuste de servidor lo salva. Las tres métricas que Google usa como señal —los Core Web Vitals— dependen de decisiones visuales:
| Métrica | Qué mide | Umbral bueno | Decisión de diseño que la rompe |
|---|---|---|---|
| LCP | Carga del elemento principal visible | Menos de 2,5 s | Imagen o video de portada sin optimizar |
| INP | Respuesta a la interacción del usuario | Menos de 200 ms | Exceso de animaciones y scripts de terceros |
| CLS | Estabilidad visual mientras carga | Menos de 0,1 | Imágenes sin dimensiones, banners que empujan contenido |
El detalle clave es que se miden con usuarios reales, y en Colombia buena parte del tráfico llega por datos móviles. Un sitio que abre en 2 segundos en el computador del diseñador puede tardar 8 en un celular de gama media en 4G. Profundizo en la guía de Core Web Vitals e INP y en por qué la velocidad de carga define las ventas.
Contenido indexable e imágenes: lo que el buscador sí puede leer
Un rastreador solo posiciona el texto que existe en el HTML. Lo que quede dentro de una imagen, un video, un PDF o un componente que se carga con JavaScript tras la interacción del usuario tiene alta probabilidad de no contar para nada. Cuatro reglas que protegen el contenido indexable:
- El texto va en HTML, no rasterizado dentro del JPG del banner.
- Los sliders no son contenido. Lo que se ve dos segundos y desaparece no sostiene una página.
- Deje espacio real para texto. Un diseño de puros bloques visuales obliga a publicar páginas de 200 palabras que no compiten.
- Menús y pestañas deben tener sus enlaces en el HTML, no generarse solo al hacer clic.
Con las imágenes el ahorro es de diseño puro: exporte en WebP o AVIF, dimensione al tamaño real de visualización y nombre los archivos de forma descriptiva antes de subirlos. Una portada de 1200 × 675 px debe pesar entre 80 y 250 KB, no 3 MB. Subir imágenes gigantes y luego instalar un plugin para comprimirlas es un parche sobre el error; el detalle está en la guía de SEO en imágenes. El texto alternativo sirve al buscador y a los lectores de pantalla a la vez: ahí SEO y accesibilidad WCAG 2.2 coinciden.
Enlazado interno: se diseña, no se improvisa
El enlazado interno le dice al buscador qué páginas son importantes y cómo se relacionan. Se diseña en el mapa del sitio, porque cada plantilla necesita un lugar previsto para enlaces contextuales: si el diseño no lo contempla, terminan pegados al final del texto o no existen. Cuatro criterios a definir:
- Enlaces en el cuerpo del texto, no solo en menú y pie de página: los contextuales pesan más.
- Texto ancla descriptivo (“cuánto cuesta una página web”) en lugar de “clic aquí”.
- De páginas fuertes hacia páginas comerciales, no al revés.
- Cero páginas huérfanas: toda URL debe recibir al menos un enlace interno.
El costo real de separar diseño y SEO
Separar ambas disciplinas no ahorra dinero: lo aplaza y lo multiplica. Un sitio diseñado sin criterio de posicionamiento obliga a pagar dos veces —una por el sitio y otra por arreglarlo—, más el costo de oportunidad de los meses sin tráfico. Estos son rangos de referencia del mercado colombiano, no tarifas de un proveedor específico:
| Escenario | Rango de inversión (COP) | Resultado |
|---|---|---|
| Sitio diseñado con SEO desde el brief | $4.000.000 – $12.000.000 | Estructura lista para posicionar desde el día uno |
| Sitio “bonito” sin criterio SEO | $2.500.000 – $7.000.000 | Funciona como folleto; depende de pauta para recibir visitas |
| Auditoría + corrección superficial | $1.500.000 – $4.000.000 | Sirve si la base técnica es sana |
| Rediseño estructural completo | $5.000.000 – $15.000.000 | Necesario cuando la plantilla es irrecuperable |
| Migración con redirecciones 301 mal hecha | Pérdida de 30% a 70% del tráfico | Recuperación de 3 a 9 meses, si se recupera |
Sume el costo invisible: cada mes sin tráfico orgánico es un mes pagando publicidad por visitas que el sitio debería atraer solo. Con $2.000.000 COP mensuales en pauta, seis meses de retraso son $12.000.000 que no construyeron ningún activo. Para dimensionar el punto de partida: cuánto cuesta una página web en Colombia y cuánto cuesta el SEO en Colombia.
Checklist: qué definir ANTES de diseñar
Nada de esto es trabajo de diseño: es el trabajo previo que hace que el diseño sirva. Debe estar resuelto antes de que alguien abra Figma.
- Keyword research completo: qué busca su cliente y con qué palabras exactas.
- Mapa de URLs definitivo: cada página, su intención y su ruta final.
- Asignación de una intención por página, para evitar canibalización.
- Estructura de encabezados por plantilla: dónde va el H1 y qué H2 se repiten.
- Extensión de contenido estimada por tipo de página, para que el layout la soporte.
- Plan de enlazado interno: qué página enlaza a cuál y con qué ancla.
- Presupuesto de rendimiento: peso máximo de página, número de fuentes y de scripts.
- Inventario de URLs actuales con su tráfico, si va a rediseñar, para no perder nada.
- Mapa de redirecciones 301 viejo → nuevo, aprobado antes de publicar.
- Plan de medición: analítica, eventos de conversión y Search Console listos el día del lanzamiento.
El punto 8 es el que más se salta y el más caro: rediseñar sin inventario de URLs es la forma más rápida de perder años de posicionamiento en una noche.
Qué exigirle a quien le haga el sitio
Pida entregables verificables, no promesas. Un proveedor serio no tendrá problema con ninguno de estos puntos, y quien se incomode con la lista le está dando información valiosa:
- Mapa de URLs aprobado por usted antes de empezar a diseñar.
- Encabezados semánticos correctos: un H1 por página y jerarquía real.
- Core Web Vitals en verde en móvil, medido con datos de campo, no solo en laboratorio.
- Imágenes en WebP o AVIF, dimensionadas y con texto alternativo.
- Títulos y descripciones editables por página, sin depender del proveedor.
- Datos estructurados según el tipo de negocio y sitemap XML activo.
- Redirecciones 301 documentadas una a una, si hay migración.
- Acceso completo a hosting, dominio, repositorio y analítica: el sitio es suyo.
- Capacidad de publicar contenido sin pagar por cada cambio de texto.
El último punto define si el sitio será un activo o una foto congelada: lo que no crece en contenido no crece en posicionamiento, y ahí WordPress bien implementado marca la diferencia.
¿Y si ya tengo una web que no posiciona?
Si el sitio ya existe, la decisión es corregir o reconstruir, y depende de qué tan profundo esté el problema. Los errores superficiales —metadatos ausentes, textos cortos, imágenes pesadas, falta de enlazado— se arreglan con una auditoría y optimización, sin tocar el diseño.
Cuando el problema es la base —contenido que solo existe en JavaScript, plantilla sin jerarquía de encabezados, URLs imposibles de ordenar, tema tan pesado que ningún ajuste baja el LCP— remendar sale más caro que reconstruir. Las señales que inclinan la balanza están en cuándo rediseñar su página web, y el diagnóstico técnico en SEO técnico para WordPress.
Si toca rediseñar, la regla no se negocia: mapa de redirecciones 301 antes de publicar, una a una, para conservar la antigüedad y la autoridad ya ganadas.
Una web bonita sin SEO es un folleto digital que hay que repartir a mano o pagando pauta eternamente. Una web con SEO integrado desde el brief es un activo que atrae clientes las 24 horas. Si va a construir o rediseñar, hágalo una sola vez y bien: conozca el servicio de diseño de páginas web y de posicionamiento web SEO, o escríbame desde contacto con la URL de su sitio actual.
