Blog Diseño web
Partes de una página web: qué va en cada una y en qué orden
Las partes de una página web se ven en dos niveles. El primero es el sitio: qué páginas existen y cómo se enlazan entre sí. El segundo es cada página: qué bloques lleva y en qué orden. Eso es la estructura de una página web. En una página de negocio, ese orden casi siempre es cabecera, primera pantalla, secciones, prueba, precios, preguntas, cierre y pie.
El orden no es decorativo. Cada bloque responde la duda que el visitante tiene en ese momento. Si la respuesta llega tarde, la persona se va antes.
El primer nivel: qué páginas necesita tu sitio
Un sitio de servicios pequeño se arma con pocas piezas:
- Inicio. Dice qué haces, para quién y dónde. Reparte a cada visitante hacia el servicio que busca.
- Una página por servicio. Es la pieza que más se salta y la que más pesa en Google.
- Nosotros. Quién está detrás, desde cuándo, cómo trabajas.
- Contacto. Formulario, WhatsApp, horario y zona de atención.
- Blog, si vas a escribir. Artículos que responden preguntas de tus clientes.
¿Por qué una página por servicio? Porque Google muestra páginas, no sitios. Un taller mecánico que tiene frenos, sincronización y alineación en una sola página compite con una página contra tres búsquedas distintas. Con tres páginas, cada una puede aparecer en la suya.
Así se vería el árbol de ese taller:
| Página | Dirección | Qué responde |
|---|---|---|
| Inicio | / |
Qué taller es, dónde está, qué arregla |
| Frenos | /frenos/ |
Cuánto cuesta, cuánto tarda, cuándo cambiarlos |
| Sincronización | /sincronizacion/ |
Qué incluye y cada cuánto se hace |
| Alineación y balanceo | /alineacion-y-balanceo/ |
Precio, tiempo, si hay que pedir cita |
| Nosotros | /nosotros/ |
Quién lo atiende y desde cuándo |
| Contacto | /contacto/ |
Cómo llegar, horario, WhatsApp |
Las direcciones dicen lo que hay adentro. Google lo pide así en su guía de SEO para principiantes. Pide palabras útiles para el usuario en la URL, no códigos al azar. La misma guía sugiere agrupar en carpetas los temas parecidos, como /blog/ para los artículos.
El segundo nivel: las partes de una página web
Dentro de una página, cada bloque tiene un trabajo. Este es el orden que funciona para casi cualquier página de servicio.
Cabecera
Logo, menú y un botón de contacto. Es igual en todo el sitio, así el visitante siempre sabe dónde está. En el celular el menú se esconde, pero el botón de contacto debería quedar a la vista.
Primera pantalla
Lo que se ve sin bajar. Tiene tres líneas de trabajo: qué haces, para quién y qué hacer ahora. En el oficio se le dice «hero». Es la parte que decide si la persona sigue o vuelve a Google.
Secciones de contenido
Aquí va el detalle: qué incluye el servicio, cómo trabajas, en cuánto tiempo, en qué zona. Cada sección con su subtítulo, que sea una afirmación o una pregunta real. Quien lee en diagonal tiene que entender la página leyendo solo los subtítulos.
Prueba
Lo que demuestra que sabes hacerlo. Fotos de trabajos reales, reseñas de Google, marcas con las que trabajas, certificaciones. Solo lo verdadero: una reseña inventada se nota y resta.
Precios
Un precio, un rango o un «desde». Quien no encuentra el precio asume que es caro o que se lo van a inventar. Si de verdad depende del caso, di de qué depende.
Preguntas frecuentes
Las dudas que quedan después de leer lo anterior. Pocas y reales: las que te hacen por WhatsApp cada semana.
Cierre
Repite la acción de la primera pantalla, con el botón y los datos a mano. Quien llegó hasta abajo está listo para escribir, y no debería tener que subir a buscar cómo.
Pie de página
Datos legales, política de datos, enlaces secundarios y redes. También se repite en todo el sitio.
Qué pregunta responde cada bloque
| Bloque | La duda del visitante | Si falta |
|---|---|---|
| Primera pantalla | ¿Esto es lo que busco? | Vuelve a Google |
| Secciones | ¿Qué incluye y cómo funciona? | Escribe a preguntar lo básico o no escribe |
| Prueba | ¿Lo hacen bien? | Desconfía |
| Precios | ¿Me alcanza? | Asume que es caro |
| Preguntas | ¿Y si pasa tal cosa? | Se queda con la duda |
| Cierre | ¿Qué hago ahora? | No hace nada |
La estructura que no se ve: el código
La misma estructura existe en el código, y Google la lee. HTML tiene una etiqueta para cada zona. Son header para la cabecera, nav para el menú, main para el contenido y footer para el pie. MDN las explica en su guía de estructura de documentos.
Los títulos también tienen jerarquía. Un solo título principal por página (el H1), y debajo los subtítulos en orden, sin saltar niveles. Una plantilla que usa títulos grandes solo por el tamaño de la letra rompe ese orden, aunque se vea bien. No necesitas saber código para pedirlo: basta con preguntarle a quien te hace la página cómo está marcada.
Cambia según el tipo de página
El orden de arriba es el de una página de servicio. Otras páginas lo ajustan:
- El inicio reparte. Menos detalle y más caminos: un bloque corto por servicio, con enlace a su página.
- Una landing page no tiene menú. Existe para una sola acción y repite el botón varias veces. Lo explicamos en qué es una landing page.
- Una tienda pone el catálogo y el buscador arriba. La ficha de producto tiene su propia estructura: fotos, precio, envío, variantes y botón de compra.
Cuál de estos tipos necesitas depende de tu negocio, y está desarrollado en tipos de páginas web.
Los errores de estructura que más se ven
- Todo en una sola página. Cómodo al principio, invisible en Google para cada servicio por separado.
- La historia de la empresa en la primera pantalla. Al visitante le interesa su problema antes que tu fundación.
- El contacto solo en el menú. En el celular, el menú está escondido. El botón tiene que estar en la página.
- Precios que nunca aparecen. Obligan a escribir para una pregunta que la página podía responder.
- Menús con diez opciones. Si todo está en el menú, nada se destaca. Cinco o seis alcanzan en un negocio pequeño.
Cómo armar la estructura de una página web antes de diseñar
Hazlo en papel. Escribe la lista de páginas, y dentro de cada una, los bloques con una línea de lo que dice cada uno. Si un bloque no responde ninguna duda, sobra. Si una duda frecuente no tiene bloque, falta.
Después revisa esa lista contra qué debe tener una página web, que baja todo esto a una lista de entrega. Falta ver cómo encaja con el resto de las piezas, como el dominio, el hosting y el código. Para eso, el punto de partida es qué es una página web.
La estructura de una página web es lo primero que hacemos en nuestro servicio de diseño de páginas web. Va antes que los colores y las fotos. Cambiarla en un borrador toma minutos. Cambiarla en una página publicada toma días.
Preguntas frecuentes
¿Cuántas páginas debe tener un sitio web?
Las que tengas servicios, más inicio, nosotros y contacto. Un electricista con cuatro servicios queda en siete u ocho páginas. Una panadería de barrio puede vivir con una sola pantalla.
¿Qué es el hero de una página web?
Es la primera pantalla, lo que se ve sin bajar. Lleva el titular, una línea que explica para quién es y el botón de la acción principal.
¿Qué es el mapa del sitio?
Es un archivo con la lista de las páginas del sitio, pensado para Google. Ayuda a que las encuentre, pero no reemplaza una estructura clara con enlaces entre páginas.