Estructura de una página web: mapa, secciones y orden
Por el equipo creativo de Virtalio, una agencia creativa con más de 15 años diseñando y construyendo sitios para pymes, marcas y agencias. Última revisión: octubre de 2026.
La estructura de una página web se decide en cuatro pasos y en este orden: el mapa del sitio —qué páginas existen y de cuál cuelgan—, el esqueleto de cada plantilla, la jerarquía de títulos y, al final, las URLs y el menú. Cuando el orden se invierte y se empieza por el diseño, el sitio crece torcido: la quinta página obliga a rehacer el menú, la décima a mover enlaces internos y la vigésima a cambiar direcciones que Google ya tenía indexadas.
Esto es lo que pedimos antes de abrir el editor de diseño en un proyecto de sitio o de landing. Sirve igual para una web corporativa de seis páginas que para un catálogo de cien.
Qué se decide en la estructura y qué se decide después
La estructura fija cinco cosas: qué páginas existen, de qué página cuelga cada una, qué bloques aparecen en cada una y en qué orden, cómo se llaman esas páginas en el menú y qué dirección tiene cada una. Nada de eso depende del color ni de la tipografía.
Lo que viene después es la capa visual y el contenido final: jerarquía tipográfica, paleta, fotografía, animación, textos definitivos. Si esa capa se define antes que la estructura, cada ajuste de contenido rompe una decisión visual que ya estaba aprobada. Es la razón más común por la que un sitio tarda el doble de lo presupuestado.
Hay una segunda consecuencia, menos visible: la estructura define los enlaces internos. Un sitio con páginas que nadie enlaza es un sitio donde la mitad del contenido no recibe visitas, aunque esté publicado. Si quieres la diferencia entre una página suelta y un sitio completo, está en qué es una página web.
El mapa del sitio: cuatro niveles y nada más
El mapa se escribe como una lista, con la URL al lado de cada nombre. Cuatro niveles alcanzan para casi todo:
- Nivel 1: la home.
- Nivel 2: las páginas de servicio o producto, la página de la empresa, contacto y las legales.
- Nivel 3: una página por servicio específico y las entradas del blog.
- Nivel 4: fichas de detalle, casos y variantes de producto.
La regla que aplicamos: si un contenido no cabe en esos cuatro niveles, no necesita una página nueva, necesita una sección dentro de una que ya existe. Crear una página por cada palabra clave que alguien buscó alguna vez termina en veinte URLs que dicen lo mismo y compiten entre ellas.
El menú principal, en la práctica, aguanta siete entradas como máximo antes de volverse ilegible en un teléfono. Si el mapa exige más, lo que falta es jerarquía, no espacio: agrupa por tipo de servicio y deja que la página de grupo haga su trabajo.
El esqueleto de una página, en el orden en que se lee
Cada plantilla repite un orden reconocible, y cada bloque responde una pregunta del lector en el momento en que la tiene:
- Encabezado con navegación. Dónde estoy y a dónde puedo ir.
- Bloque de apertura. Qué haces, para quién y por qué debería seguir leyendo.
- Prueba. Quién ya confió, con qué resultado y con qué evidencia verificable.
- Detalle de la oferta. Qué incluye, cómo se trabaja, cuánto tarda.
- Objeciones. Lo que frena la compra, respondido sin rodeos.
- Llamada a la acción. La misma acción, repetida, sin competencia entre botones.
- Pie. Contacto real, avisos legales y enlaces de soporte.
En el código, ese orden se marca con etiquetas semánticas: header, nav, main y footer. No es un detalle de purista; es lo que permite que un lector de pantalla salte al contenido y que un buscador distinga el cuerpo del sitio de su envoltorio. La referencia completa está en la documentación de MDN sobre estructura de documentos.
Jerarquía de títulos: un H1 por página y un H2 por bloque
El H1 es el tema de la página. Los H2 son los bloques del esqueleto anterior. Los H3 son subdivisiones dentro de un bloque. Cuando el H2 se usa para agrandar una frase que quedaba pequeña, la página pierde su índice y quien navega con lector de pantalla recorre una lista de encabezados que no describen nada.
Las pautas WCAG 2.2 piden que la información y las relaciones se transmitan por estructura y no solo por apariencia, y que la navegación sea consistente entre páginas. Traducido a la práctica: si un bloque no tiene un H2 que lo describa, probablemente no debería existir.
URLs y navegación: la decisión que más caro se paga
Una URL se copia, se pega y se dicta por teléfono. Google recomienda palabras descriptivas separadas por guiones, evitar cadenas largas de números y mantener las direcciones estables, porque cambiarlas después obliga a redirigir cada una. La guía está en estructura de URLs de Google Search Central.
En la práctica usamos español, sin fechas, sin identificadores y con un solo nivel de carpeta: /servicios/diseno-branding funciona; /servicios/2026/equipo/diseno/branding-v2 no. Si un slug tiene que cambiar, la redirección 301 va en el mismo despliegue, no en una tarea pendiente.
La navegación se completa con las migas de pan, que muestran la jerarquía y se pueden marcar con datos estructurados para que aparezcan en el resultado de búsqueda. La especificación está en migas de pan de Google Search Central. En un sitio con servicios agrupados, es la forma más directa de que se entienda que una página de nivel 3 pertenece a una de nivel 2.
Estructura por tipo de página
No todas las plantillas necesitan los siete bloques. Estos son los mínimos que pedimos por tipo:
- Home: promesa, prueba, resumen de la oferta, tres o cuatro rutas de entrada y llamada a la acción. Sin menú disfrazado de contenido.
- Página de servicio: qué incluye, cómo se trabaja paso a paso, qué se entrega, cuánto tarda, cómo se cotiza, preguntas frecuentes y llamada a la acción.
- Landing de campaña: una oferta, un formulario, sin menú completo. Todo lo que distraiga resta. El detalle está en qué debe tener una landing page para convertir.
- Entrada de blog: respuesta arriba, desarrollo por bloques, fuentes al final.
- Contacto: formulario corto más dos canales alternos. Si el formulario pide ocho campos, el correo se vuelve el canal principal.
- Gracias y 404: las dos páginas que nadie planea y todos visitan. La primera confirma qué pasó y qué sigue; la segunda ofrece tres salidas reales.
En móvil el orden cambia, o debería
El orden del HTML es el orden en el teléfono. Si en escritorio la prueba social va a la derecha, en móvil aparece después de todo lo que estaba a la izquierda, y muchas veces el lector llega a la llamada a la acción sin haber visto un solo caso. Por eso la estructura se define primero en una columna y después se reparte en escritorio.
Dos decisiones estructurales afectan métricas que se miden: reservar el espacio de imágenes y avisos evita el salto de diseño que penaliza la estabilidad visual, y la imagen principal no puede ser lo último en cargar porque define el tiempo de carga percibido. Los umbrales vigentes están en Core Web Vitals.
Los errores que obligan a rehacer el sitio
- Menú con doce opciones y ninguna jerarquía.
- Una página por palabra clave, todas respondiendo lo mismo.
- URLs con el nombre completo de la empresa dentro.
- El mismo bloque de texto repetido en tres páginas porque nadie decidió dónde vive.
- Contenido importante escondido en pestañas o acordeones que nadie abre.
- Páginas de soporte sin diseñar: gracias, 404, error de formulario.
- Estructura aprobada por diseño y no por quien decide la oferta comercial.
El último es el caro. Si el mapa del sitio no lo aprueba quien define qué se vende y a qué precio, se aprueba tres veces después, cuando ya hay diseño, textos y desarrollo encima.
Cómo briefear la estructura en una sola hoja
La hoja que pedimos antes de empezar lleva siete puntos: mapa con URLs, plantilla por tipo de página, orden de bloques, etiquetas exactas del menú, qué contenido existe ya y cuál hay que escribir, quién aprueba y qué páginas son obligatorias por operación (legales, gracias, 404).
Con eso se puede estimar, diseñar y desarrollar sin adivinar. Sin eso, cualquier agencia o equipo interno va a inventar la estructura a partir de lo que vio en otro sitio, y el resultado se nota a los tres meses.
Cuándo conviene que la arme el equipo creativo
Hay cuatro señales: el sitio pasa de ocho páginas, hay dos idiomas o dos marcas, el sitio actual ya tiene direcciones indexadas y hay que migrar, o publican varias personas a la vez. En esos casos, sostener la estructura a mano termina en un menú distinto cada mes.
En Virtalio la estructura y el diseño de una web se entregan como una sola pieza: primera entrega en menos de 48 horas en la mayoría de las piezas, branding completo y videos en 3 a 5 días, revisiones incluidas y sin contratos de permanencia. Si el sitio ya existe y solo hay que ordenarlo, se empieza por el mapa. Los planes y el alcance están en diseño y desarrollo de landing y sitio web, y la comparación de modalidades en planes y precios. Para agencias que necesitan producción recurrente sin montar equipo, la ruta es Virtalio para agencias.
Preguntas frecuentes
¿Cuántas páginas debe tener una web corporativa?
El mínimo operativo son seis: home, una página por servicio, quiénes somos, contacto y las legales. A partir de ahí, cada página nueva tiene que responder una pregunta que ninguna otra responde. Si no la responde, es una sección.
¿La estructura es lo mismo que el diseño?
No. La estructura define qué páginas existen, qué bloques las componen y en qué orden. El diseño define cómo se ven esos bloques. Un cambio de estructura obliga a rediseñar; un cambio de diseño no obliga a reestructurar.
¿Se pueden cambiar las URLs después?
Sí, con una redirección 301 por cada dirección anterior y actualizando los enlaces internos en el mismo despliegue. Lo que no conviene es cambiar direcciones cada vez que cambia el nombre comercial de un servicio.
¿Quién debe aprobar el mapa del sitio?
Quien decide la oferta comercial y quien atiende a los clientes. Diseño y desarrollo pueden proponer, pero no pueden decidir qué se vende ni en qué orden se presenta.