El nivel 1 es la home: la única página raíz del sitio, en /. Es lo primero que ve quien llega por la marca o una campaña, y hace dos trabajos a la vez —presentar en segundos y mandar a cada visitante a la sección correcta—. No es un catálogo ni una ficha: es el mapa de bienvenida.
Esta ficha abre la serie «Niveles» y marca su molde. Documenta el L1 a fondo: qué problema resuelve la home (primera impresión + distribución de tráfico + ancla SEO de marca), de qué seis piezas se compone (hero con h1 único, franja de atajos, vitrina de categorías, bloques a fondo, prueba social + FAQ, y cierre de conversión + footer), qué tipos de home existen (negocio local, landing focal, e-commerce, SaaS, portfolio, editorial), cómo se comporta en el teléfono (hero que prioriza el mensaje, vitrina 4→2→1, CTA en la zona del pulgar, LCP cuidado) y cómo está construida en src/pages/index.astro.
Con dos rasgos que separan al L1 del resto de los niveles. Primero: es la única página SIN migas de pan —es el origen de la jerarquía, no tiene padre—; todos los demás niveles anteponen «Inicio» que vuelve aquí. Segundo: es la página de marca, así que es el lugar natural del Organization JSON-LD —pero el emisor es único y central (buildSchema desde BaseLayout, regla B3); la home no duplica el grafo—. Cuidar el L1 es cuidar la raíz del árbol: su velocidad, su mensaje y sus enlaces internos se propagan hacia abajo, a todos los niveles.
Definición
La página raíz del sitio (/), la única en su nivel. Su trabajo no es agotar un tema (eso es la ficha L3) ni listar una sección (eso es el índice L2): es presentar el negocio en segundos y repartir el tráfico hacia las secciones. Es el origen de la jerarquía —la única página sin migas de pan— y la URL con más autoridad del sitio.
El L1 es la home: la primera y única página raíz. Mientras un índice (L2) lista los hijos de una sección y una ficha (L3) profundiza en una entidad, la home hace dos cosas a la vez: comunica quién eres y qué ofreces en pocos segundos, y manda a cada visitante a la sección correcta. Es bienvenida y mapa, no catálogo ni detalle.
En esta plantilla vive en src/pages/index.astro y se arma componiendo piezas del sistema —no inventa diseño propio—: hero, franja de atajos, vitrina de categorías, bloques a fondo, prueba social, FAQ y cierre. Es el origen de la jerarquía: la única página sin Breadcrumbs (no tiene padre) y la natural para el Organization JSON-LD de la marca.
Función e importancia
Tres trabajos a la vez, todos críticos: causar la primera impresión que decide si el visitante se queda, repartir el tráfico hacia las secciones correctas, y servir de ancla SEO de marca (la URL con más autoridad del sitio). Si la home falla en cualquiera de los tres, el resto del sitio recibe menos visitantes y peor calificados.
La función primaria de la home es la primera impresión: en pocos segundos el visitante decide si el sitio es para él. Por eso el hero manda el mensaje (un h1 claro con la propuesta de valor) y la velocidad importa (el LCP del hero es la primera impresión técnica). Una home que no comunica en cinco segundos pierde al visitante antes de que vea el catálogo.
Su función secundaria es la distribución: a diferencia de una ficha que profundiza, la home reparte —manda a cada quien a productos, servicios, cobertura o blog sin que adivine—. Y la terciaria es de SEO: la home (/) es la página con más autoridad, la que rankea por marca y reparte equity interno al resto. Cuidar la raíz cuida todo el árbol.
La home es la cara del negocio para quien llega por la marca, una tarjeta o una campaña. En pocos segundos el visitante decide si el sitio es para él. Por eso el hero manda el mensaje (un H1 claro con la propuesta de valor) y no la decoración: el logotipo vive en el header, la animación no compite con el texto, y la promesa se entiende sin scroll. Una home que no comunica en 5 segundos pierde al visitante antes de que vea el catálogo.
A diferencia de una ficha (que profundiza en una cosa), la home reparte: su trabajo es mandar a cada visitante a la sección correcta —productos, servicios, cobertura, blog— sin que tenga que adivinar. La franja de atajos y la vitrina de categorías son las dos herramientas; ambas son data-driven (NAV y SHOWCASE) para que nunca se desincronicen del contenido real. Una home es buena cuando, en un vistazo, cualquiera sabe a dónde ir.
La home (/) es la página con más autoridad: la que recibe la mayoría de los enlaces externos y la que rankea por el nombre de la marca. Por eso lleva el H1 con la keyword principal, el Organization JSON-LD (emitido una vez por buildSchema desde BaseLayout, regla B3) y los enlaces internos que reparten equity al resto del sitio. Cuidarla es cuidar la raíz del árbol: lo que pasa aquí se propaga hacia abajo.
Anatomía
Seis piezas en orden de aparición, de arriba a abajo: hero con h1 único, franja de atajos (SectionMenu), vitrina de categorías (CategoryCard), bloques a fondo (CategoryDetail), prueba social + FAQ, y cierre de conversión + footer. Cada pieza es un componente del sistema; ninguna es diseño nuevo inventado para la home.
La home no es un bloque monolítico: es una composición de piezas reutilizables, cada una con un trabajo. La 1 (hero) presenta. La 2 (atajos) reparte rápido. La 3 (vitrina) es el corazón de la distribución —cada categoría como card que enlaza a su L2—. La 4 (a fondo) profundiza sin sacar al visitante. La 5 (reseñas + FAQ) genera confianza y resuelve objeciones. La 6 (cierre + footer) pide la acción y reparte el mapa global.
Todas son data-driven: la vitrina lee de SHOWCASE, los atajos de NAV, el contacto de CONTACT. Agregar una categoría actualiza la home, el menú y el footer a la vez. Esa es la lección del nivel raíz: la home compone lo que ya existe, no reinventa —por eso un cambio de oferta es una línea en site.ts, no cinco páginas tocadas—.
La franja de apertura: un H1 único (el ÚNICO h1 del sitio entero) con la propuesta de valor en lenguaje claro, un subtítulo de apoyo y, en la home, opcionalmente los CTAs. Es lo primero que decide si el visitante se queda. El logotipo NO va aquí —vive en el header—. Tienes pocos segundos: manda el mensaje, no la decoración.
SSoT: src/pages/index.astro → <Hero> · UN solo <h1> por página · propuesta de valor + keyword principal
Justo bajo el hero, una fila de botones que salta a cada sección de la home (o del sitio) sin volver al header. Patrón de catálogo: el visitante entra y de inmediato ve por dónde moverse. Data-driven desde NAV; el último botón es el CTA de conversión (WhatsApp con waUrl()).
SSoT: src/components/SectionMenu.astro · items desde NAV · último botón = CTA waUrl(WA_MESSAGES.x)
La rejilla de tarjetas que presenta cada categoría del catálogo como un producto: foto, etiqueta, título H3, texto de venta y atajos a subcategorías. Es el corazón de la distribución de tráfico: convierte una lista larga en un mapa que se entiende de un vistazo. Data-driven desde SHOWCASE (site.ts).
SSoT: src/components/CategoryCard.astro · grid .showcase 1→2→4 · data-driven desde SHOWCASE
Dos columnas (info izquierda · galería derecha) que amplían UNA categoría antes de que el visitante entre a su L2. Refuerzan la propuesta con texto y prueba visual. Regla del sitio: todos idénticos, sin zig-zag (no se alternan lados ni fondos), para que la lectura sea predecible.
SSoT: src/components/CategoryDetail.astro · info izq · galería der · SIN zig-zag
Reseñas (ReviewCard) que responden «¿le funcionó a alguien como yo?» con la voz de un tercero, y el acordeón de preguntas frecuentes (FAQAccordion) que resuelve objeciones antes de que frenen la conversión. La FAQ además aporta esquema FAQPage para SEO (un solo emisor por página, regla B3).
SSoT: src/components/ReviewCard.astro · FAQAccordion.astro · faqSchema() en lib/seo.ts
La franja final que pide UNA acción (CTABanner con PRESET_GENERAL) o reparte rutas útiles (SectionMenu), seguida del footer que aparece en TODAS las páginas. La home suele llevar ambos: primero el banner (conversión), debajo el footer (mapa global del sitio + NAP + legales).
SSoT: src/components/CTABanner.astro (PRESET_GENERAL) · Footer.astro (montado por PageLayout)
Otros diseños y aplicaciones
Seis tipos de portada según el negocio: negocio local/servicios (la de esta plantilla), landing focal, e-commerce, SaaS/producto digital, portfolio/agencia y editorial/blog-first. Todas son L1 —raíz que presenta y reparte— pero cambian el protagonista: contacto, conversión única, catálogo, producto, trabajo o contenido.
El nivel no cambia, el énfasis sí. Un negocio local pone el contacto al frente; una landing de campaña reduce todo a una conversión; un e-commerce hace protagonista al catálogo; un SaaS explica el producto y baja al registro; un portfolio deja que el trabajo hable; un medio convierte el feed en portada. Reconocer el tipo correcto evita copiar la home equivocada.
Cada tipo reordena las mismas piezas: más o menos hero, vitrina de categorías o de productos, prueba social en logos o en reseñas, CTA de «cotizar», «comprar» o «empezar gratis». La plantilla parte del tipo «negocio local/servicios» porque es el caso de uso central; los demás se arman recomponiendo los mismos componentes.
Responsive y móvil
Cuatro patrones reales: hero que prioriza el mensaje (H1 con clamp, CTA full-width en la zona del pulgar), vitrina 4→2→1 mobile-first, CTA en la zona del pulgar con safe-area iOS, y LCP del hero cuidado (AVIF + fetchpriority + dimensiones fijas). La home es la página más visitada: su comportamiento móvil es el que más pesa.
La mayoría del tráfico de una home llega por teléfono, así que el caso base es el móvil, no el escritorio. El hero reordena (no encoge): el H1 baja de tamaño con clamp sin perder legibilidad, el subtítulo se acorta y el CTA pasa full-width al alcance del pulgar. La vitrina nace en una columna y suma columnas con ancho. Nada de esto es media-query-por-componente: vive en el sistema central (tokens.css + mobile.css).
Dos detalles que separan una buena home móvil de una mediocre: el CTA en la zona del pulgar (la franja inferior que el dedo alcanza sin estirarse, con env(safe-area-inset-bottom) para no chocar con el home indicator de iOS) y el LCP del hero (imagen AVIF optimizada, dimensiones fijas para cero CLS, fetchpriority alta en el fold). La primera impresión técnica de tu sitio se decide en estos dos detalles.
El H1 escala con clamp() (nunca bajo lo legible), el subtítulo se acorta y el CTA pasa full-width en la zona del pulgar. La imagen, si existe, va detrás o debajo —en pantalla angosta el texto manda, no la decoración—.
/* MÓVIL · HERO QUE PRIORIZA EL MENSAJE
En el teléfono el hero no «encoge»: reordena. El H1 baja de tamaño
con clamp() (nunca por debajo de lo legible), el subtítulo se acorta
y el CTA pasa full-width en la zona del pulgar. La imagen, si existe,
va detrás o debajo —nunca compite con el texto en pantalla angosta—. */
.hero__title { font-size: clamp(1.75rem, 7vw, 3.25rem); line-height: 1.1; }
.hero__subtitle { font-size: clamp(1rem, 4vw, 1.25rem); }
@media (max-width: 560px) {
.hero__ctas { flex-direction: column; }
.hero__ctas .btn { width: 100%; min-height: 48px; } /* zona del pulgar */
}La rejilla de categorías (.showcase) arranca en una columna y crece con min-width (2 en tablet, 4 en escritorio). Es el mismo grid del catálogo —la home no inventa diseño—. El visitante recorre una columna cómoda en lugar de cuatro tarjetas apretadas.
/* MÓVIL · VITRINA 4 → 2 → 1 (mobile-first)
La rejilla de categorías arranca en UNA columna y crece con min-width.
Es el mismo .showcase del catálogo: la home no inventa diseño propio. */
.showcase { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 640px) { .showcase { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .showcase { grid-template-columns: repeat(4, 1fr); } }La acción principal debe alcanzarse sin estirar el dedo. En móvil el CTA pasa full-width con min-height: 48px (WCAG SC 2.5.5) y, opcionalmente, se ancla al borde inferior respetando env(safe-area-inset-bottom) para no chocar con el home indicator de iOS.
/* MÓVIL · CTA EN LA ZONA DEL PULGAR
La acción principal de la home debe alcanzarse sin estirar el dedo.
En móvil el CTA de cierre pasa full-width y, opcionalmente, una barra
de contacto se ancla al borde inferior respetando el safe-area de iOS. */
@media (max-width: 768px) {
.home-cta { position: sticky; bottom: 0; }
.home-cta .btn {
width: 100%;
min-height: 48px; /* WCAG SC 2.5.5 */
padding-bottom: calc(.8rem + env(safe-area-inset-bottom, 0));
}
}La home es la página más medida: la imagen del fold carga en eager con fetchpriority="high" y dimensiones fijas (width/height) para cero CLS. AVIF optimizado mantiene el peso bajo. Un hero que tarda pierde visitantes antes del mensaje.
/* MÓVIL · LCP DEL HERO (la métrica de la primera impresión)
La home es la página más visitada: su velocidad ES la primera
impresión. La imagen del hero (o la primera card) carga prioritaria;
el resto, en lazy. AVIF optimizado + dimensiones fijas = cero CLS. */
<img
src="/images/hero.avif"
width="1280" height="720" {/* dimensiones fijas → cero CLS */}
fetchpriority="high" {/* el navegador la prioriza */}
loading="eager" decoding="async"
alt="Propuesta de valor del negocio con la keyword principal"
/>Posición en la jerarquía
En la raíz: la URL / del dominio, el origen del árbol. Es el único nivel sin padre y, por tanto, sin migas de pan. Todos los demás niveles cuelgan de aquí: cada L2 (índice de sección) es hijo directo de la home, y cada L3/L4 cuelga de un L2. Es también el destino del logotipo del header desde cualquier página.
El L1 ocupa la raíz del dominio (/). No tiene padre, así que es la única página sin Breadcrumbs —el componente Breadcrumbs antepone «Inicio» en todos los demás niveles, enlazando de vuelta aquí—. En el árbol del sitio, la home es el nodo del que cuelga todo: los L2 (productos, servicios, módulos, blog, niveles) son sus hijos directos.
Por su posición, la home concentra autoridad: recibe la mayoría de los enlaces externos y reparte equity interno hacia abajo. El logotipo del header enlaza siempre a / —el «volver al inicio» universal—. Cuidar la raíz (velocidad, mensaje, enlaces internos) beneficia a cada nivel que cuelga de ella.
Capa técnica
Vive en src/pages/index.astro y compone piezas del sistema —no inventa diseño—. Los datos vienen de site.ts (SHOWCASE, NAV, CONTACT); el copy de cierre, de cta-presets.ts. Lleva pageType='home' (no 'page') para que buildSchema emita el Organization + WebSite JSON-LD una sola vez (regla B3). NO lleva breadcrumbs: es la raíz.
La arquitectura del L1 es composición pura: la home importa componentes (Hero, SectionMenu, CategoryCard, CategoryDetail, CTABanner) y los alimenta con datos de site.ts. No hay diseño nuevo ni datos hardcodeados —agregar una categoría a SHOWCASE la pinta en la home sin tocar el .astro—. Esa disciplina es lo que mantiene la home estable y sincronizada con el resto del sitio.
Dos detalles técnicos propios del nivel raíz: el pageType="home" (que activa el Organization + WebSite schema en buildSchema, una sola vez, regla B3) y la ausencia de breadcrumbs (es el origen). La receta A muestra cómo se compone la página; la B, por qué el schema de marca NO se escribe a mano en la home —ya lo emite BaseLayout—.
---
// src/pages/index.astro — la home compone piezas, no inventa diseño.
// Cada bloque es un componente del sistema; los datos vienen de site.ts.
import PageLayout from '@layouts/PageLayout.astro'
import Hero from '@components/Hero.astro'
import SectionMenu from '@components/SectionMenu.astro'
import CategoryCard from '@components/CategoryCard.astro'
import CategoryDetail from '@components/CategoryDetail.astro'
import CTABanner from '@components/CTABanner.astro'
import { SHOWCASE, NAV } from '@config/site'
import { PRESET_GENERAL } from '@config/cta-presets'
---
{/* pageType="home" → buildSchema emite Organization (regla B3). SIN breadcrumbs: es la raíz. */}
<PageLayout title="..." description="..." pageType="home">
<Hero title="..." subtitle="..." /> {/* el ÚNICO h1 del sitio */}
<SectionMenu items={NAV} /> {/* atajos data-driven */}
<section class="section">
<div class="showcase">
{SHOWCASE.map((c, i) => <CategoryCard {...c} index={i} />)}
</div>
</section>
<CTABanner {...PRESET_GENERAL} /> {/* cierre de conversión */}
</PageLayout>---
// La home es la página de MARCA → Organization JSON-LD.
// Pero el emisor es ÚNICO y central: buildSchema() lo emite desde
// BaseLayout cuando pageType lo amerita (regla B3). La home NO mete
// un <script ld+json> a mano. El NAP coincide letra por letra con
// el topbar y el footer (docs/MODULOS.md §6.2).
import { organizationSchema } from '@lib/seo'
// buildSchema() (en BaseLayout) hace:
// const graph = [ organizationSchema(), ...(pageType === 'home' ? [websiteSchema()] : []) ]
// y emite UN solo <script type="application/ld+json"> con el @graph.
---
{/* En la home NO escribas esto a mano — ya lo emite BaseLayout: */}
{/* <script type="application/ld+json">{ "@type": "Organization", ... }</script> */}
{/* Duplicarlo = dos entidades en el grafo = Google confundido. */}Buenas prácticas
Siete hábitos que mantienen la home como una raíz rápida, clara y que reparte; siete errores que la convierten en un folleto lento que no manda a nadie a ningún lado. La home es la página más visitada y la de más autoridad: cada acierto y cada error se multiplican por todo el tráfico del sitio.
La diferencia entre una home que convierte y una que pierde visitantes es disciplinaria: un solo h1, repartir en lugar de agotar, contenido data-driven, CTA visible, LCP cuidado, schema único y migas ausentes (porque es la raíz). Cada regla viene de un error real visto en sitios: dos h1, la home como ficha gigante, catálogo hardcodeado, CTA enterrado, carrusel automático, hero de 2 MB, Organization duplicado.
Los sí son hábitos de jerarquía + SSoT + velocidad. Los no son tentaciones que parecen ricas (un carrusel vistoso, una home que «lo dice todo») pero rompen el trabajo del nivel raíz: presentar y repartir, rápido. Léelos en pares —cada sí apunta al error que el no describe—.
No. La home lleva exactamente un H1 con la propuesta de valor. El H1 declara el tema de la página para el árbol de accesibilidad (WCAG 2.2 SC 1.3.1, Info and Relationships) y concentra la señal temática para Google. Varios H1 reparten esa señal y confunden a los lectores de pantalla. Los demás títulos son H2 por sección y H3 por tarjeta; el logotipo del header es una imagen con alt, no un encabezado.
Porque es la raíz del árbol: no tiene padre. Las migas modelan la cadena de ancestros (el JSON-LD BreadcrumbList que emite buildSchema), y la home no tiene ninguno. Todos los demás niveles —L2, L3, L4— anteponen «Inicio» que enlaza de vuelta aquí. Ponerle migas a la home declararía un padre que no existe.
No. Nielsen Norman Group lo desaconseja desde hace años: el primer slide capta cerca del 1% de los clics y los siguientes caen casi a cero, mientras el movimiento automático compite con la lectura y afecta a personas con sensibilidad vestibular (WCAG 2.2 SC 2.2.2, Pause, Stop, Hide). Un mensaje fijo y claro convierte más. Si tienes tres propuestas, repártelas en tres secciones a lo largo del scroll, no en un carrusel que el visitante no controla.
Con Core Web Vitals: LCP por debajo de 2.5 s, CLS por debajo de 0.1 e INP por debajo de 200 ms (umbrales de Google). En la home el LCP casi siempre es la imagen del hero: sírvela en AVIF optimizado, con width/height fijos (cero CLS) y fetchpriority="high". El banco de pruebas es Lighthouse 12.x emulando un móvil de gama media en Slow 4G, no tu equipo de escritorio.
En buildSchema() desde BaseLayout, una sola vez por página (regla B3 — un único emisor). La home NO escribe el JSON-LD a mano. El NAP (nombre, dirección, teléfono) del Organization debe coincidir letra por letra con el del topbar y el footer; si divergen, Google interpreta dos entidades distintas con el mismo nombre y baja la confianza del panel de marca.
Depende del tráfico. La home reparte hacia varias secciones; una landing de campaña recorta todo a una sola conversión y suele rendir mejor para tráfico pagado, donde cada elemento debe empujar a una acción. Regla operativa: si la campaña tiene UNA acción clara, manda una landing focal (tipo 2 de la galería); si es tráfico de marca o genérico, la home es el destino correcto.
Las justas para repartir, no para agotar. El molde de esta plantilla es hero, franja de atajos, vitrina de categorías, uno o dos bloques «a fondo», prueba social y cierre. Si una sección necesita ocho párrafos para explicarse, eso es una ficha L3: preséntala con una tarjeta y enlázala. La home distribuye; el detalle vive un nivel más abajo.
Los niveles vecinos y los módulos que arman una home.