Cómo planificar la estructura web de un sitio: método, ejemplos y modelos

La estructura web es el plano jerárquico de todas las páginas de un sitio, dibujado antes de la primera maqueta. Dice qué secciones existen, qué cuelga de cada una y por qué camino llega un visitante desde la portada hasta la página que le interesa.

Es el entregable más barato de corregir y el más caro de ignorar. Una sección mal nombrada se arregla en treinta segundos sobre una pizarra. El mismo error descubierto seis meses después de publicar cuesta rehacer la navegación, montar un plan de redirecciones y aguantar unas semanas de inestabilidad en las posiciones.

Esta guía reúne el método completo: la definición, la diferencia con el mapa del sitio, las partes que componen una página, los tres modelos de estructura, los 7 pasos, tres árboles listos para copiar, las reglas con cifras y su estado real, las herramientas y el protocolo de prueba que conviene pasar antes de arrancar el diseño UX/UI.

La estructura web es la representación en árbol de todas las páginas de un sitio: una portada, unas secciones de primer nivel, sus subsecciones y las páginas finales. Fija la profundidad, las etiquetas del menú y las rutas de las URL antes de que exista un solo píxel de diseño. Cuando el proyecto crece, el mismo trabajo suele llamarse arquitectura de la información.

El vocabulario importa, porque vuelve en cada reunión. Una sección es una entrada de primer nivel. Una subsección cuelga de ella. Se habla de página madre y página hija para describir ese parentesco, y de profundidad para contar los niveles que separan la portada de una página concreta. Las migas de pan enseñan ese camino al visitante, encima del contenido.

¿Quién la construye? Casi nunca una sola persona. La dirección aporta las prioridades comerciales, marketing conoce la demanda real, el diseñador aporta la lógica de recorrido. Cuando la estructura sale de una sola cabeza, acaba copiando el organigrama de la empresa en lugar de las necesidades del visitante. Es el vicio clásico de las organizaciones donde cada departamento reclama su sección.

Y lo que no es: ni una maqueta ni un archivo técnico. Ningún color, ninguna tipografía, ningún texto redactado. Nombres de páginas y relaciones de parentesco, nada más. Esa pobreza es deliberada, y es justo lo que permite rehacer la estructura diez veces en una mañana sin tirar un solo píxel.

Tres documentos se confunden sin falta en los briefings, porque la palabra mapa aparece en los tres. La estructura sirve para decidir, el mapa del sitio sirve para orientar al visitante y el sitemap XML sirve para hablar con los rastreadores. No se dirigen a las mismas personas, no se producen en el mismo momento y no se parecen en nada.

La confusión cuesta tiempo de reunión y a veces dinero. Si un proveedor responde a una petición de estructura enviando un archivo sitemap.xml, ha respondido a otra cosa: ese archivo enumera las URL de un sitio ya construido, no decide nada.

Ten esta aclaración a mano antes del primer taller, ahorra un cuarto de hora de discusión.

Según la guía de SEO de Google Search Central, agrupar temas parecidos en directorios ayuda a Google a aprender con qué frecuencia cambian las URL de cada directorio. La estructura le entrega al buscador un mapa de tus temas y del ritmo al que se mueve cada uno. Ordena tus páginas y, de paso, explica tus prioridades.

Del lado del rastreo, la profundidad funciona como un filtro. Una página colgada en el cuarto nivel, con un único enlace entrante desde un desplegable, se visita menos que una página de sección enlazada desde la portada. No hay magia: el enlazado interno sigue al árbol, y el presupuesto de rastreo sigue al enlazado. Es el mecanismo que desarrollamos en la guía sobre cómo la arquitectura web impacta en la visibilidad SEO.

El silo temático nace del mismo principio. Reunir bajo una sola sección todas las páginas que tratan un tema crea un conjunto coherente, más fácil de interpretar que diez páginas repartidas por niveles distintos.

Del lado de la conversión el efecto es todavía más directo. Un visitante que no encuentra tu página de precios no negocia: se va. Las etiquetas de las secciones pesan a menudo más que el diseño, y un menú bien nombrado rescata un diseño mediocre. Al revés no ha funcionado nunca. Nuestras buenas prácticas de navegación web desarrollan este punto.

Una reserva honesta: nadie puede prometerte una cifra de mejora por adelantado solo con esta palanca. La estructura marca el techo de tus resultados, no los produce por sí sola.

Una página web se compone de cinco bloques que se repiten en casi todos los sitios: la cabecera, el menú de navegación, el contenido principal, la barra lateral y el pie de página. La estructura del sitio y las partes de la página son dos capas del mismo trabajo: el árbol decide qué secciones existen, y esos bloques deciden dónde aparece cada sección dentro de la pantalla.

Conviene separar las dos preguntas, porque en español se mezclan bajo el mismo término. Quien busca la estructura de una página web a veces quiere el reparto visual de esos bloques, y a veces quiere el árbol de secciones del sitio entero. Son dos respuestas distintas, y este artículo cubre las dos en ese orden: primero los bloques, luego el árbol.

En el marcado, cada bloque tiene su etiqueta semántica. La documentación de MDN sobre estructura de documentos describe header para la cabecera, nav para la navegación, main para el contenido propio de cada página, aside para la barra lateral y footer para el pie. Usar la etiqueta correcta no es cosmética: es lo que permite a un lector de pantalla saltar directamente al contenido.

Ahora el enlace entre las dos capas. La cabecera solo tiene sitio para las secciones de primer nivel, así que el árbol decide qué entra en el menú y qué se queda fuera. El pie recoge lo que no cabe arriba y suele ser el único lugar donde el visitante ve el mapa completo. La barra lateral muestra las páginas hermanas de la que se está leyendo, es decir, un trozo del árbol. Si el árbol está mal planteado, los tres bloques heredan el problema.

Tres modelos se reparten casi todos los sitios profesionales. El modelo jerárquico ordena las páginas por niveles sucesivos. El modelo plano lo cuelga todo del primer nivel. El modelo hub-and-spoke organiza un conjunto de páginas alrededor de un eje central que las enlaza a todas. La elección se hace sobre el volumen de contenido previsto a dos años, no sobre el de hoy.

En la práctica, el jerárquico encaja en sitios de empresa con 2 o 3 niveles, el plano en sitios de menos de 20 páginas y el hub-and-spoke en blogs y centros de recursos. Cada modelo tiene su manera de romperse: el jerárquico entierra páginas en el nivel 4, el plano desborda el menú, y el hub-and-spoke deja el eje huérfano cuando el enlazado se hace con prisa.

El método cabe en siete pasos, en este orden. El error más común consiste en saltarse el inventario para dibujar el árbol cuanto antes: así se redibuja el sitio actual con sus defectos, creyendo empezar de cero. Calcula media jornada para un sitio corporativo pequeño y dos o tres días para un sitio de más de cincuenta páginas.

Paso 1. Encuadrar el objetivo y los recorridos prioritarios. Una sola pregunta: ¿qué debe hacer el visitante antes de marcharse? Pedir un presupuesto, descargar un documento, crear una cuenta. Con dos o tres recorridos basta, y son ellos los que dictan qué sube al primer nivel. Un brief de diseño web escrito ahorra dos reuniones en este paso.

Paso 2. Inventariar lo que ya existe. Enumera cada URL viva con su título, su tipo, su palabra clave principal y su papel. Si estás rehaciendo un sitio, este es el paso que decide qué conservas, qué fusionas y qué eliminas. Nuestra guía de auditoría web describe la recogida de datos. La plantilla de inventario de abajo se copia directamente a una hoja de cálculo.

Paso 3. Recoger la demanda real. Tres fuentes gratuitas bastan para empezar: las consultas de Search Console, el buscador interno del sitio y la lista de preguntas que tu equipo comercial escucha por teléfono. Esta tercera fuente es la más olvidada y a menudo la más útil.

Paso 4. Agrupar con card sorting. Escribe cada página en una tarjeta y pide a usuarios reales que formen grupos y los nombren. Descubrirás que tus categorías internas no sobreviven al contacto con la realidad.

Paso 5. Nombrar las secciones con las palabras del cliente. Soluciones, Expertise, Universo: esas etiquetas no dicen nada a un visitante con prisa. Escribe Servicios, Precios, Proyectos. Una etiqueta comprensible vale más que una etiqueta elegante, y este es el paso donde salen a flote los desacuerdos internos.

Paso 6. Fijar la profundidad y las URL. El árbol se traduce en rutas. Según las recomendaciones de URL de Google, conviene usar palabras legibles en lugar de identificadores numéricos, y guiones en lugar de guiones bajos para separar palabras. Una URL como /servicios/portales-web/ se lee sin esfuerzo y refleja el árbol.

Paso 7. Validar antes de las maquetas. Un tree testing de treinta minutos evita tres semanas de correcciones. El método completo está más abajo.

Una observación de campo: los pasos 4 y 5 se hacen juntos, nunca por separado. Agrupar sin nombrar produce montones que nadie sabe anunciar en un menú.

Tres niveles, tres clics, siete secciones: estas cifras circulan desde hace veinte años y se transmiten como si fueran leyes. No lo son. Son reglas de andar por casa, a menudo útiles, y conviene saber cuál se apoya en algo sólido antes de negarle una sección más a un cliente en plena reunión.

En Flat vs. Deep Website Hierarchies, Kathryn Whitenton (Nielsen Norman Group, 2013) compara los dos extremos y concluye que no existe una respuesta universal. Sí documenta un caso elocuente: un sitio hospitalario cuya categoría de servicios médicos enumeraba 32 áreas de golpe, lo que facilita el acceso directo y a la vez arriesga sepultar al visitante bajo un menú larguísimo. La recomendación que sale de ahí es metodológica, no numérica: observa a tus propios usuarios en lugar de aplicar un umbral encontrado en un artículo.

Quédate igualmente con tres referencias y con su estado real. Una profundidad de 3 niveles bajo la portada es una convención de oficio cómoda, no una restricción técnica. Un menú principal de 5 a 7 entradas viene de la regla del 7 más menos 2, que Nielsen Norman Group ya no defiende como umbral fijo. Por encima de las 30 entradas visibles a la vez, el caso documentado en 2013 muestra que el menú empieza a pesar sobre el visitante.

Una opinión a contracorriente de lo que se lee por ahí: la profundidad rara vez es el problema real. Un cuarto nivel bien anunciado se recorre sin esfuerzo, mientras que un segundo nivel llamado Universo detiene a cualquiera.

Aquí tienes tres árboles completos, escritos como listas indentadas en lugar de imágenes, para que puedas copiarlos a una hoja de cálculo en diez segundos. Corresponden a las tres familias de proyecto que más se repiten. Adapta las etiquetas a tu sector y conserva la lógica de niveles.

Sitio corporativo, 12 páginas. El árbol más habitual para una pyme o un despacho.

• Portada
• Servicios
  • Landing pages
  • Sitio corporativo
  • Portal web
• Proyectos
  • Caso 1
  • Caso 2
• Sobre nosotros
  • Equipo
  • Empleo
• Blog
• Contacto

Tienda online. La profundidad sube un escalón porque el catálogo impone una capa de subcategorías.

• Portada
• Tienda
  • Categoría
    • Subcategoría
      • Ficha de producto
  • Novedades
  • Ofertas
• Guías de compra
• Atención al cliente
  • Envíos y devoluciones
  • Preguntas frecuentes
• Mi cuenta
• Contacto

Portal de clientes. Conviven dos árboles: la parte pública, que debe convertir, y la parte con sesión iniciada, que debe servir.

• Parte pública
  • Funcionalidades
  • Precios
  • Acceso
• Panel (tras iniciar sesión)
  • Mis proyectos
  • Documentos
  • Facturación
  • Mensajes
• Administración
  • Usuarios y roles
  • Registro de actividad
• Ayuda

El número de páginas no es un detalle de comodidad: condiciona el presupuesto. En nuestra página de precios, una landing page cubre de 1 a 5 páginas y parte de €1.500, un sitio corporativo cubre de 10 a 30 páginas y parte de €5.000, y un portal web arranca en 50 páginas y parte de €9.000. Una estructura que pasa de 12 a 40 páginas a mitad de proyecto cambia de categoría de precio, no solo de calendario.

Una herramienta de estructura sirve para tres cosas: dibujar el árbol, inventariar lo que ya existe y probar el resultado. Ninguna hace bien las tres, y por eso la pregunta de qué herramienta elegir importa menos de lo que parece. El reparto que funciona se hace por uso, y ten en cuenta que los planes gratuitos de estos productos cambian a menudo.

Para dibujar, GlooMaps y Octopus.do producen un árbol exportable en unos minutos y sirven para sitios de menos de cincuenta páginas. Slickplan llega más lejos en colaboración y exportación. FigJam, Miro y Whimsical no están especializados, pero cumplen de sobra cuando el taller reúne a varias personas, y probablemente ya los tienes contratados.

Para inventariar, Screaming Frog rastrea un sitio existente y saca la lista completa de URL con sus títulos y su profundidad. Google Search Console da gratis las páginas indexadas y las consultas que las traen. Esas dos fuentes alimentan la plantilla de inventario de más arriba.

Para probar, Treejack (Optimal Workshop) y Maze permiten pasar un tree testing en remoto, sin maquetas.

Un mapa mental resuelve el arranque cuando las ideas todavía están sueltas. No sustituye al árbol: un mapa mental admite enlaces transversales, mientras que una estructura exige un sitio único para cada página.

¿Con sinceridad? Una pizarra y una hoja de cálculo ganan a cualquier herramienta de pago si el trabajo de nombrado se hace en serio. Un árbol impecable producido en una herramienta profesional puede fracasar en el primer test con usuarios, sencillamente porque nadie discutió las etiquetas.

Dos métodos bastan y se complementan. El card sorting, o clasificación de tarjetas, sirve para construir el árbol: repartes tarjetas y los participantes forman grupos y los nombran. El tree testing sirve para validarlo: entregas el árbol desnudo, sin diseño ni buscador, y pides a los participantes que encuentren una información concreta. El primero abre, el segundo verifica.

Según Nielsen Norman Group (Samhita Tankala y Katie Sherwin, 2024), un card sorting cualitativo necesita al menos 15 participantes para entender el razonamiento detrás de las agrupaciones, y de 30 a 50 participantes si quieres resultados generalizables a una población más amplia. Por debajo de 15 recoges anécdotas.

El tree testing se prepara en una hora. Escribe de 8 a 10 tareas formuladas como una necesidad real, nunca como un camino. Pregunta dónde se encuentra el plazo de entrega, jamás haz clic en Atención al cliente y luego en Envíos. Después mide tres cosas por tarea: la tasa de acierto, el tiempo hasta llegar al sitio correcto y el número de idas y venidas entre secciones antes de dar con la respuesta.

Ponte un 80 % de acierto por tarea como objetivo y considera que por debajo del 70 % esa sección hay que renombrarla o moverla. Los dos umbrales son convenciones de trabajo, cómodas para zanjar un debate en una reunión: ningún organismo los publica como norma, y la cifra aceptable depende de la dificultad de las tareas que hayas escrito.

El detalle que lo cambia todo: enseñan las tareas falladas, no las acertadas. Mira siempre qué sección eligieron por error, porque ahí está la etiqueta que tus visitantes esperaban.

Cambiar la estructura de un sitio que ya recibe tráfico es la operación que más daño hace cuando se improvisa, y que sale bien cuando se prepara. El principio cabe en una frase: cada URL que desaparece debe apuntar a la página más parecida a lo que contenía, con una redirección permanente 301. Nunca a la portada.

El documento central es una tabla de correspondencias: URL antigua, URL nueva, tipo de redirección y comprobación posterior a la publicación. Se construye a partir del inventario del paso 2, se revisa entre dos personas y se prueba sobre una muestra antes del día señalado. Según Google Search Central, una redirección permanente del lado del servidor es la vía recomendada para que buscadores y personas acaben en la página correcta.

Redirigir en masa a la portada es el fallo más repetido. Es rápido, evita los errores 404 y destruye la pertinencia de cada redirección, porque un destino genérico se interpreta como una página inexistente disfrazada.

Conserva también lo que funciona. Si tres páginas traen la mitad de tu tráfico orgánico, su URL no se mueve aunque el árbol nuevo lo sugiera. Una estructura limpia nunca ha valido una posición perdida. Nuestra guía de preparación de un rediseño detalla la secuencia completa.

Cuenta además con una bajada temporal. Mientras los buscadores vuelven a rastrear y reasignan las señales, unas semanas de inestabilidad son normales en un cambio de estructura de gran alcance.

Si solo te llevas una idea de esta guía: escribe tu árbol en texto, hazlo probar por diez personas que no trabajen contigo y no empieces el diseño de tu sitio hasta que ese test esté superado.