Diseño web y SEO: por qué separarlos te cuesta posiciones

Encargas el diseño. Apruebas la maqueta en dos rondas. Publicas.

Tres meses después contratas a alguien para «hacerle el SEO» a lo que ya está hecho, y esa persona te dice que para arreglar la estructura hay que cambiar las URLs, rehacer los encabezados y montar un mapa de redirecciones.

Existe la idea de que el SEO es una capa que se añade al final, como el barniz sobre la madera. Spoiler: falso.

El SEO no es una capa. Es una consecuencia de decisiones que se toman mucho antes, en el boceto, cuando alguien decide cómo se agrupan las secciones y qué elementos van a moverse al hacer scroll.

El coste de hacerlo en el orden equivocado

Aquí conviene la comparación contable, porque es exacta: corregir el SEO después de publicar es como declarar fuera de plazo. Pagas lo mismo que habrías pagado a tiempo, más el recargo.

El recargo tiene tres formas.

La primera es dinero: rehacer una arquitectura de URLs cuesta más horas que definirla bien en el boceto, porque ahora hay contenido, enlaces y posiciones que proteger.

La segunda es tiempo: un cambio de estructura necesita semanas para que Google reprocese el sitio. Ese periodo no lo acortas pagando más.

La tercera es la que nadie factura: las posiciones que no llegaste a tener durante los meses en que tu web estuvo mal planteada.

Nada de barnices al final.

La arquitectura de URLs se decide en el boceto

Esta es la decisión más cara de revertir y la que más se toma por descarte.

Cuando alguien dibuja el mapa de secciones está decidiendo, sin saberlo, qué páginas van a competir por qué consultas. Si tu negocio tiene cinco servicios y el boceto los mete en una sola página con anclas, acabas de renunciar a cinco páginas que podrían posicionar por separado.

Y al revés: si creas una página por cada variación de lo mismo, habrás fabricado canibalización antes de escribir una línea.

Tres preguntas que hay que responder antes de maquetar nada:

• ¿Qué páginas van a tener vida propia en buscadores? Esas necesitan URL propia, título propio y contenido suficiente para sostenerse solas.
• ¿Qué agrupaciones son navegación y cuáles son contenido? Un desplegable del menú no crea una página. Una sección con su propia intención de búsqueda, sí.
• ¿Cómo se va a ampliar esto dentro de dos años? Si el patrón de URLs no admite crecer, cada servicio nuevo te obligará a improvisar.

Cuando esto se define después de publicar, el arreglo pasa por redirecciones 301 y por asumir una pérdida temporal. Es exactamente lo que ocurre en webs publicadas sin estructura pensada, donde el mapa del sitio es el que traía la plantilla.

Jerarquía visual y jerarquía semántica no son lo mismo

Un diseñador ordena por tamaño, color y posición. Un rastreador ordena por etiquetas.

Cuando esas dos jerarquías no coinciden, el resultado es una página que se lee perfectamente y que los buscadores interpretan al revés.

Los tres desajustes que más veo:

• El titular grande que no es el H1. Se maquetó como texto con estilos porque quedaba mejor, y la página se queda sin encabezado principal o hereda uno del tema.
• Los H2 decorativos. Frases cortas de refuerzo visual etiquetadas como encabezado, que ensucian el índice y el esquema del documento.
• El contenido importante dentro de pestañas o acordeones cerrados. Se indexa, pero compite en desventaja frente a quien lo muestra directamente.

Ninguno de los tres se arregla con un plugin. Se arreglan decidiendo, en el diseño, qué es estructura y qué es adorno.

«La jerarquía semántica no es un requisito técnico que molesta al diseño: es el diseño, contado en un lenguaje que las máquinas entienden.»

Cada efecto visual tiene un precio en JavaScript

Las animaciones al hacer scroll, los contadores que suben, los carruseles y los efectos de aparición gradual no son gratis. Cada uno añade trabajo que el navegador del usuario tiene que ejecutar antes de que la página responda.

Ese coste se paga en la capacidad de respuesta, que es una de las métricas que Google mide con usuarios reales. Los umbrales exactos los tienes en medir y corregir LCP, INP y CLS en WordPress, y no los repito aquí.

Lo que sí corresponde a este artículo es la decisión de diseño: qué efectos se quedan.

El criterio que uso es sencillo. Un efecto se queda si comunica algo que el usuario necesita entender (un estado, una jerarquía, una transición entre pasos). Se elimina si solo demuestra que sabemos hacerlo.

Cuando el efecto entra en el diseño sin ese filtro y llega al desarrollo como requisito aprobado, ya es tarde: quitarlo después es una conversación incómoda con quien aprobó la maqueta.

Las imágenes, donde diseño y rendimiento chocan de verdad

Aquí está el conflicto más frecuente entre lo que quiere el diseño y lo que necesita el buscador.

El diseño pide fotografías grandes a pantalla completa. El rendimiento pide el archivo más pequeño posible. Los dos tienen razón, y la solución no es que uno gane.

La solución son cuatro decisiones que se toman en la maqueta:

• Dimensiones reales de cada hueco. Saber a qué tamaño se va a mostrar cada imagen permite servirla a ese tamaño y no al que salió de la cámara.
• Formato moderno. Un JPG pesado pasa a WebP o AVIF con entre un 30% y un 50% menos de peso y sin diferencia visible.
• Espacio reservado. Declarar ancho y alto evita que el contenido salte mientras carga, que es lo que provoca el clic equivocado.
• Qué imagen es la primera. La de cabecera nunca se difiere; el resto, sí.

Ninguna de las cuatro limita la creatividad. Todas limitan la improvisación, que es distinto.

Cuando se hace al revés, el resultado es el que describe lo que se pierde por cada segundo de espera: tráfico que llega y se va antes de ver nada.

Preventivo frente a correctivo

Esta tabla es el resumen del artículo. La misma decisión, tomada antes o después.

La diferencia entre las dos columnas no es la calidad del resultado final. Es cuánto cuesta llegar a él.

Cómo se integra en la práctica

Integrar SEO y diseño no significa que un especialista revise la maqueta al final. Significa tres momentos concretos.

Los tres momentos donde se decide

Antes del boceto se define el mapa de contenidos: qué páginas existen, qué busca cada una y cómo se relacionan. Ese documento condiciona el diseño, no al revés.

Durante el diseño se etiqueta la jerarquía. Cada bloque de la maqueta lleva anotado si es H1, H2, H3 o texto, igual que lleva anotado el color.

Antes de publicar se comprueba lo que se rompió por el camino, que siempre es algo. Ahí entra revisar qué está fallando antes de que lo note Google, y por eso ese trabajo cuesta la mitad cuando llega a un sitio bien planteado.

Es el mismo orden que sigo en cómo planteo un proyecto de principio a fin: primero pensar, después dibujar.

Diseño web WordPress y SEO: lo que el CMS decide por ti

En WordPress hay decisiones de SEO que, si no las tomas a propósito, las toman el tema y el maquetador por defecto.

• Los enlaces permanentes. Se definen el primer día y no se tocan. Cambiarlos con contenido publicado es volver a las redirecciones 301.
• Los encabezados del tema. Muchos temas imprimen su propio H1 o convierten títulos de widgets en H2. Se revisa en el HTML, no en el editor visual.
• Las páginas que WordPress crea solo. Etiquetas, archivos de autor, fechas y adjuntos generan URLs indexables vacías o duplicadas. Se desactivan o se marcan como noindex desde el principio.
• El peso del maquetador. Cada contenedor anidado es HTML y CSS que el navegador procesa. Un maquetador bien usado no penaliza; uno usado para todo, sí.

Un plugin de SEO resuelve títulos, descripciones y sitemap. No resuelve ninguna de las cuatro cosas anteriores. Por eso el desarrollo WordPress a medida empieza revisando lo que el CMS hace solo.

Lo que se ve cuando esto no se hace

Una web bonita que no aparece en ningún sitio. Es el patrón que describí en los fallos que dejan sin negocio a una web de pyme y el que aparece cuando una tienda pierde ventas sin avisar.

También aparece al revés, y conviene decirlo: webs correctísimas a nivel técnico, con la estructura impecable, que no convierten porque nadie pensó en el recorrido de quien entra. Eso está en cómo se mueve de verdad un usuario por una página.

Las dos mitades se necesitan. Una web que posiciona y no convierte te trae visitas que no compran. Una que convierte y no posiciona convierte a quien ya te conocía.

Yo no separo las dos fases porque no se pueden separar sin pagar el recargo. El mapa de contenidos y el boceto salen en la misma semana, y la jerarquía se etiqueta en la maqueta, no después. Puedes ver qué cambia cuando se hace así en proyectos donde esto se midió.