Nivel del sitio · L3

El Detalle: la ficha que agota un tema y mueve a la decisión

El nivel 3 es la ficha: UNA entidad explicada a fondo. /modulos/topbar, /productos/equipo-base, /servicios/consultoria y cada artículo del blog son L3. Aquí el visitante ya eligió qué le interesa; la ficha le entrega todo para decidir. Esta misma página es un L3.

Esta ficha documenta el L3 a fondo —y lo hace siendo uno—: qué problema resuelve (convertir el interés en decisión + rankear por términos específicos de cola larga + ser la hoja donde vive el schema concreto), de qué seis piezas estructurales se compone (hero con migas de dos niveles, cuerpo a fondo, ejemplo/galería/prueba, schema específico, FAQ/buenas prácticas, y cierre derivado de la SSoT), qué tipos de ficha existen (módulo/guía, producto, servicio, artículo, cobertura, caso) y cómo se construye con rutas dinámicas que iteran una colección.

Con una particularidad recursiva: el L3 ES el molde de 10 secciones de la serie Módulos, y esta página lo cumple al pie de la letra —hero sin CTAs, títulos duo, anatomía con ejemplo en vivo, variantes, responsive, sí/no, cierre con siblings—. Es el nivel más profundo del flujo común (lleva las migas más largas: Inicio › Sección › Item) y la hoja del grafo de datos: el índice L2 emitió la lista (ItemList), la ficha L3 emite el detalle (Product/Service/Article). Un solo emisor por página, regla B3. Cuando una entidad se subdivide aún más, nace el L4.

Definición

¿Qué es el nivel L3 · Detalle?

La ficha de UNA entidad, explicada a fondo: un módulo, un producto, un servicio, un artículo, una zona. Cuelga de un índice L2 y, cuando la entidad se subdivide, es padre de un L4. Su trabajo no es presentar el sitio (home) ni listar una sección (índice): es agotar un tema y mover a la decisión. Esta misma página es una ficha L3.

El L3 es la ficha: la página donde el visitante, que ya eligió qué le interesa, encuentra todo lo necesario para decidir. /modulos/topbar explica un módulo del concepto al código; /productos/equipo-base detalla un producto; /servicios/consultoria, un servicio; cada /blog/<slug>, un tema. Es el nivel más profundo del flujo común y el de tráfico mejor calificado.

En esta plantilla la ficha de la serie Módulos sigue un molde fijo de 10 secciones —el mismo que cumple esta página—, y las fichas de catálogo (producto, servicio, artículo) se generan con rutas dinámicas que iteran una colección. Lleva migas de dos niveles (Inicio › Sección › Item) y es la hoja del grafo de datos: el único lugar del Product/Service/Article específico.

Función e importancia

¿Para qué sirve?

Tres trabajos: convertir el interés en decisión (el visitante ya eligió; la ficha agota el tema para que diga «sí»), rankear por términos específicos de cola larga (la intención de compra más alta del sitio) y ser la hoja de contenido donde vive el schema concreto (Product/Service/Article). Una ficha pobre desperdicia el tráfico mejor calificado.

La función primaria de la ficha es la conversión: a diferencia de la home (presenta) y el índice (reparte), el visitante de un L3 ya eligió y quiere decidir. La ficha agota el tema en su propia página —qué es, para qué, cómo, qué lo diferencia, FAQ, siguiente paso— sin remitir a otra. Cada clic extra para entender es una fuga del tráfico mejor calificado del sitio.

La secundaria es de SEO long-tail: la ficha rankea por términos específicos de alta intención (el nombre concreto + calificadores), donde el contenido profundo (specs, FAQ, casos) captura las búsquedas. Y la terciaria es de datos: la ficha es la hoja del grafo —el único emisor del Product/Service/Article completo (regla B3)—, mientras el índice emitió la lista y el layout el Organization.

Convierte el interés en decisión — el visitante ya eligió

La ficha es donde se decide. A diferencia de la home (que presenta) o del índice (que reparte), el visitante que llega a un L3 ya eligió qué le interesa: este módulo, este producto, este servicio. La ficha no tiene que venderle la sección —tiene que darle todo lo que necesita para decir «sí»: qué es, para qué sirve, cómo funciona, qué lo diferencia y cuál es el siguiente paso—. Por eso agota el tema en su propia página, sin remitir a otra: cada clic extra para entender es una fuga de conversión.

Rankea por términos específicos — el long-tail

Mientras el índice L2 rankea por términos amplios («cascos de seguridad»), la ficha L3 rankea por los específicos y de intención alta («casco de seguridad dieléctrico clase E marca X precio»). Son los términos de cola larga: menos volumen, pero muchísima más intención de compra. La ficha es donde el contenido profundo (specs, FAQ, casos) captura esas búsquedas. Por eso una ficha pobre desperdicia el tráfico mejor calificado del sitio.

Es la hoja de contenido — donde vive el schema específico

La ficha es el nodo hoja del grafo de datos estructurados: el único lugar donde se emite Product, Service o Article con todos sus campos (precio, disponibilidad, autor, fecha, rating). El índice emitió la lista (ItemList); la ficha emite el detalle. Un solo emisor por página (regla B3): la ficha NO duplica el Organization (eso vive en BaseLayout) ni emite ItemList (eso es del índice). Cada nivel emite lo suyo, y el grafo del sitio queda limpio y bien jerarquizado.

Anatomía

¿Qué lleva por dentro?

Seis piezas estructurales: hero con migas de dos niveles, cuerpo a fondo (secciones h2), ejemplo/galería/prueba, schema específico (la hoja del grafo), FAQ/buenas prácticas, y cierre derivado de la SSoT. En la serie Módulos esas piezas se concretan en un molde fijo de 10 secciones —el que cumple esta misma página—.

La ficha es la página más rica del sitio: seis piezas estructurales que se concretan según el tipo. La 1 (hero + migas de dos niveles) presenta y ubica. La 2 (cuerpo a fondo) agota el tema con jerarquía h1→h2→h3. La 3 (ejemplo/galería/prueba) demuestra. La 4 (schema específico) es la hoja del grafo. La 5 (FAQ/buenas prácticas) despeja la última duda. La 6 (cierre) deriva de la SSoT, nunca se hardcodea.

En la serie Módulos esas piezas se fijan en un molde de 10 secciones, para que toda guía se lea igual —del concepto al código—. Esta página lo cumple al pie de la letra: por eso es su propio ejemplo en vivo. El molde completo está en el recuadro de abajo y en docs/MODULOS.md §2.

  1. Hero con migas de dos niveles — presenta la entidad

    La apertura de la ficha: un h1 con el nombre propio de la entidad (el módulo, el producto, el servicio, el artículo) y, encima, las migas de pan de DOS niveles (Inicio › Sección › Item). A diferencia del L1 (sin migas) y del L2 (un nivel), la ficha lleva el rastro completo: el visitante llegó hasta lo más específico y necesita saber cómo volver a la sección o al inicio.

    SSoT: breadcrumbs={[{ label: "Sección", href: "/seccion" }, { label: "Item" }]} · h1 = nombre propio

  2. Cuerpo a fondo (secciones h2) — qué es, para qué, cómo

    El núcleo de la ficha: el contenido que agota el tema, dividido en secciones con h2 (qué es, para qué sirve, cómo funciona, características). Aquí el visitante ya eligió, así que la ficha entrega TODO lo que necesita para decidir, sin remitir a otra página. La jerarquía se mantiene: un h1 (el nombre), h2 por sección, h3 por sub-bloque.

    SSoT: SectionHeading layout="duo" por bloque · jerarquía h1 → h2 → h3 · medida legible ~65ch

  3. Ejemplo / galería / prueba — demuestra, no solo describe

    La parte que enseña en vivo: un ejemplo funcionando (en una guía de módulo), una galería de fotos (en un producto), el proceso paso a paso (en un servicio) o capturas/datos (en un caso). Demostrar pesa más que afirmar; es lo que convierte una ficha informativa en una persuasiva.

    SSoT: GaleriaDisenos + DisenoCard (variantes) · galería de producto · ejemplo en vivo del componente

  4. Schema específico — el emisor de esta hoja

    La ficha es el ÚNICO lugar donde vive el schema específico de la entidad: Product en una ficha de producto, Service en una de servicio, Article/TechArticle en un artículo o guía, LocalBusiness en una zona. Es la hoja del grafo: el índice L2 emitió la lista (ItemList), la ficha L3 emite el detalle. Un solo emisor por página (regla B3).

    SSoT: lib/seo.ts → productSchema() / serviceSchema() / articleSchema() · UN emisor por página (B3)

  5. Buenas prácticas / FAQ — resuelve la última duda

    Antes del cierre, la ficha despeja objeciones: una FAQ (FAQAccordion + faqSchema), una sección de «qué hacer y qué evitar», o specs comparadas. Es el último empujón antes de la conversión —responde lo que el visitante no preguntó en voz alta— y aporta contenido de cola larga para SEO.

    SSoT: FAQAccordion.astro + faqSchema() · bloque sí/no · tabla de especificaciones

  6. Cierre (siblings / CTA) — el siguiente paso

    El final de la ficha: un SectionMenu que reparte hacia fichas hermanas + la home (derivado de la SSoT con un helper como siblingsModules/siblingsNiveles), o un CTABanner que pide la conversión. La regla: el cierre NO se hardcodea —se deriva de la lista de la sección— para no romper enlaces cuando cambia el contenido.

    SSoT: SectionMenu + siblings<Serie>("slug") · o CTABanner (PRESET_CATEGORIA) · waUrl()

Otros diseños y aplicaciones

Tipos de ficha

Seis tipos de detalle según la entidad: ficha de módulo/guía técnica (el molde de 10 secciones), de producto (galería + specs + CTA), de servicio (proceso + CTA dual), artículo de blog (cuerpo + FAQ + sigue leyendo), de cobertura/zona (SEO local) y caso de éxito (problema → solución → resultado). Todas son L3 —agotan un tema y convierten— pero cambian el contenido y el schema.

El nivel no cambia, la entidad sí —y con ella el contenido y el schema—. Una guía técnica usa el molde de 10 secciones y emite Article; un producto lleva galería y specs y emite Product con precio; un servicio lleva proceso y CTA dual y emite Service; una zona emite LocalBusiness. Reconocer el tipo correcto define qué piezas resaltan y qué datos estructurados se emiten.

Cada tipo reordena las mismas seis piezas estructurales: presenta, profundiza, demuestra, marca el schema, despeja dudas, cierra. La plantilla parte de la ficha de módulo (la más completa, el molde de 10 secciones) y las fichas de catálogo se generan con rutas dinámicas. Mismo nivel, distinto contenido y emisor.

  • Inicio › Módulos › Topbar
    El módulo

    1 · Ficha de módulo / guía técnica — el molde de 10 secciones (REAL · /modulos/*)

    Guía · Documentación · Knowledge base

    La ficha más completa del sitio: el molde canónico de 10 secciones (hero sin CTAs, qué es, para qué, anatomía con ejemplo en vivo, variantes, responsive, dónde va, cómo se construye, sí/no, cierre). Es /modulos/topbar, /modulos/hero… y esta misma página. Aplica a guías técnicas y documentación donde un tema se explica del concepto al código. La referencia de profundidad del sitio.

  • Inicio › Productos › Item
    $Cotizar

    2 · Ficha de producto — galería + specs + CTA

    E-commerce · Catálogo · Producto físico

    La hoja comercial: galería de fotos (imagen grande + miniaturas), título, precio, badge, descripción, tabla de especificaciones, y CTA fuerte (comprar/cotizar). Emite Product JSON-LD con precio y disponibilidad (la única página que lo hace). El visitante evalúa y decide; la galería y las specs son el corazón. Cierra con CTABanner (PRESET_CATEGORIA).

  • Inicio › Servicios › Item
    Servicio
    123
    Ver

    3 · Ficha de servicio — qué incluye + proceso + CTA dual (REAL · /servicios/*)

    Servicios · Consultoría · B2B

    La hoja de un servicio: qué incluye, para quién, el proceso paso a paso, casos o entregables, y un CTA dual (ver ficha / hablar por WhatsApp). Emite Service JSON-LD. A diferencia del producto, suele no llevar precio fijo —el siguiente paso es una conversación—, así que el CTA a WhatsApp con mensaje pre-armado (waUrl) pesa más. Es /servicios/consultoria hoy.

  • Inicio › Blog › Artículo
    Título del artículo
    FAQ + Sigue leyendo

    4 · Artículo de blog — intro + cuerpo + FAQ + sigue leyendo (REAL · /blog/*)

    Blog · Contenido · SEO de cola larga

    La hoja editorial: hook de entrada, cuerpo con subtítulos, tabla o checklist, FAQ y cierre con «sigue leyendo» (3 enlaces: par cruzado + tesis). Emite Article/TechArticle JSON-LD con autor y fecha. Es el motor de SEO del sitio: cada artículo captura búsquedas específicas y enlaza a la ficha del módulo relacionado. Es /blog/<slug> hoy (25 artículos).

  • Inicio › Cobertura › CDMX

    5 · Ficha de cobertura / zona — SEO local (REAL · /cobertura/*)

    SEO local · Multi-zona · Negocio regional

    La hoja de SEO local: una página por ciudad/zona (Inicio › Cobertura › CDMX) con contenido específico de esa área —servicios disponibles, casos locales, NAP—. Emite LocalBusiness con areaServed. Captura búsquedas «<servicio> en <ciudad>». Es /cobertura/cdmx y /cobertura/edomex hoy. El riesgo a evitar: contenido duplicado entre zonas (cada una debe aportar algo real).

  • ProblemaSolución
    +38%resultado
    “Cita del cliente”

    6 · Caso de éxito — problema → solución → resultado

    Prueba social · Portfolio · Testimonio

    La hoja de prueba: la narrativa de un proyecto real —el problema del cliente, la solución aplicada, el resultado con números—. Combina texto, capturas y una cita del cliente. Convierte porque es prueba específica y atribuible, no una afirmación de marca. Cierra invitando a «tener un resultado como este». Vive en la colección casos.

Responsive y móvil

La ficha, en el teléfono

Cuatro patrones reales: migas de dos niveles que colapsan el salto del medio, cuerpo legible (medida ~65ch, font ≥16px anti-zoom iOS), tabla de especificaciones con scroll horizontal en lugar de columnas aplastadas, y cierre/CTA táctil en la zona del pulgar. La ficha es texto a fondo: su reto móvil es la lectura larga.

La ficha es la página con más contenido, así que en móvil el reto es leer cómodo sin perder la orientación. El cuerpo se limita a una medida de ~65 caracteres y font ≥16 px (que además evita el zoom de iOS); los subtítulos h2/h3 dan respiro. Las migas, las más largas del sitio (tres saltos), colapsan el del medio para no ocupar dos líneas.

Dos detalles propios del L3: las tablas de especificaciones (que no se «encogen» sin volverse ilegibles, así que se envuelven en un scroll horizontal que conserva su forma) y el cierre táctil (el CTA full-width a 48 px en la zona del pulgar, con safe-area iOS). El contenido profundo solo convierte si se puede leer y la acción solo se toma si se alcanza.

1 · Migas de dos niveles que colapsan

La ficha lleva la ruta más larga (Inicio › Sección › Item). En el teléfono se colapsa el salto del medio dejando Inicio, un «…» y la página actual. El visitante conserva el «volver al inicio» y el «dónde estoy» en una sola línea.

CSS · migas de dos niveles colapsables 
/* MÓVIL · MIGAS DE DOS NIVELES (Inicio › Sección › Item)
   La ficha es lo más profundo: su ruta es la más larga. En el teléfono,
   tres saltos desbordan, así que se colapsa el del medio dejando el
   primero (Inicio), un «…» y la página actual. El visitante conserva
   el «volver al inicio» y el «dónde estoy» sin ocupar dos líneas. */

.crumbs { display: flex; flex-wrap: nowrap; gap: .35rem; font-size: var(--text-xs); }
@media (max-width: 480px) {
  /* oculta los intermedios, deja Inicio + actual (+ un «…» como aviso) */
  .crumbs > :not(:first-child):not(:last-child) { display: none; }
  .crumbs::after { content: '…'; order: 1; }
}

2 · Cuerpo legible (la ficha es texto a fondo)

El contenido largo solo convierte si se lee: medida de ~65ch, font-size ≥16px (anti-zoom iOS), interlineado holgado y subtítulos h2/h3 que dan respiro. Una ficha-muro de texto a 14 px se abandona antes del CTA.

CSS · cuerpo legible mobile 
/* MÓVIL · CUERPO LEGIBLE (la ficha es texto a fondo)
   El contenido largo solo convierte si se puede leer. Medida de ~65
   caracteres por línea, font ≥16 px (anti-zoom iOS), interlineado
   holgado y subtítulos que dan respiro. */

.ficha__cuerpo { max-width: 65ch; margin-inline: auto; }
.ficha__cuerpo p { font-size: 1rem; line-height: 1.7; }   /* ≥16px → sin zoom iOS */
.ficha__cuerpo h2 { margin-top: 2em; }                    /* respiro entre bloques */

3 · Tabla de specs con scroll horizontal

Una tabla de especificaciones no se «encoge» sin volverse ilegible: en móvil se envuelve en un contenedor con overflow-x: auto y un min-width, así conserva su forma y el visitante la desplaza. La primera columna puede quedar sticky como referencia.

CSS · tabla con scroll horizontal 
/* MÓVIL · TABLA DE SPECS CON SCROLL HORIZONTAL
   Una tabla de especificaciones no se «encoge» sin volverse ilegible.
   En móvil se envuelve en un contenedor con scroll-x: la tabla conserva
   su forma y el visitante la desplaza, en lugar de aplastar columnas. */

.specs-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.specs-wrap table { min-width: 480px; }                   /* no se aplasta */
.specs-wrap th { position: sticky; left: 0; background: var(--c-white); }

4 · Cierre / CTA en la zona del pulgar

La ficha cierra pidiendo una acción. En móvil el CTA pasa full-width con min-height: 48px (WCAG SC 2.5.5), al alcance del pulgar y respetando env(safe-area-inset-bottom). El cierre se deriva de la SSoT de la sección (siblings), nunca hardcodeado.

CSS · cierre táctil 
/* MÓVIL · CIERRE / CTA TÁCTIL EN LA ZONA DEL PULGAR
   La ficha cierra pidiendo una acción. En móvil el CTA pasa full-width
   con superficie de 48 px, al alcance del pulgar y con safe-area iOS. */

@media (max-width: 560px) {
  .ficha__cierre .btn {
    width: 100%;
    min-height: 48px;                                      /* WCAG SC 2.5.5 */
    padding-bottom: calc(.8rem + env(safe-area-inset-bottom, 0));
  }
}

Posición en la jerarquía

¿Dónde va en el sitio?

Dos niveles bajo la home: cada ficha cuelga de un índice L2 y, cuando la entidad se subdivide, es padre de un L4. Lleva migas de dos niveles (Inicio › Sección › Item). Es la hoja del flujo común —lo más profundo a lo que llega la mayoría— y, en el grafo de datos, la hoja que emite el schema específico de la entidad.

El L3 ocupa el segundo nivel bajo la raíz: /modulos/topbar cuelga de /modulos; /productos/equipo-base de /productos. Por eso lleva migas de dos niveles (Inicio › Sección › Item): tiene abuelo (la home) y padre (el índice). En la mayoría de los sitios es el nivel más profundo —el flujo termina aquí—; solo los catálogos que se subdividen bajan a L4.

En el flujo del visitante, la ficha es el destino: llega desde el índice o desde una búsqueda específica, lee a fondo y decide. En el grafo de datos, es la hoja que emite el schema concreto (Product/Service/Article), mientras el índice emitió la lista y el layout el Organization. Cada ficha enlaza «volver a la sección» vía migas, devolviendo equity al índice (hub-and-spoke).

Capa técnica

Cómo está construida

Las fichas de catálogo se generan con una ruta dinámica src/pages/<seccion>/[...slug].astro que itera una colección (getStaticPaths) y renderiza el cuerpo del Markdown; las guías de módulo viven en src/pages/modulos/<slug>.astro. Lleva pageType='page' + schemaType específico (Product/Service/Article) + breadcrumbs de dos niveles. Emite SU schema una vez (regla B3).

La arquitectura del L3 tiene dos formas. Las fichas de catálogo (producto, servicio, artículo, zona) se generan con una ruta dinámica [...slug].astro: getStaticPaths produce una página por entrada de la colección, y el cuerpo se renderiza del Markdown validado por Zod. Las guías de la serie Módulos son páginas .astro a mano que siguen el molde de 10 secciones. Ambas leen de SSoT, no hardcodean.

Dos detalles técnicos del nivel: las migas de dos niveles (la ficha declara su sección con href y su nombre sin href; Breadcrumbs antepone «Inicio») y el schema específico (la ficha pasa schemaType="Product"/"Service"/"TechArticle" y buildSchema emite ese nodo una sola vez, regla B3 —sin duplicar Organization ni ItemList—). La receta A muestra la ruta dinámica; la B, la jerarquía del grafo por nivel.

A · src/pages/productos/[...slug].astro — ficha desde colección 
---
// src/pages/productos/[...slug].astro — una ficha L3 desde una colección.
// La ruta dinámica genera una página por entrada. getStaticPaths produce
// las rutas; el cuerpo se renderiza del Markdown. Migas de DOS niveles.
import PageLayout from '@layouts/PageLayout.astro'
import { getCollection, render } from 'astro:content'

export async function getStaticPaths() {
  const productos = await getCollection('productos')
  return productos.map((p) => ({ params: { slug: p.id }, props: { entry: p } }))
}

const { entry } = Astro.props
const { Content } = await render(entry)
---

{/* Migas de DOS niveles: la ficha tiene abuelo (home) y padre (sección). */}
{/* schemaType="Product" → buildSchema emite el Product de ESTA hoja (B3). */}
<PageLayout
  title={entry.data.title}
  description={entry.data.excerpt}
  pageType="page"
  schemaType="Product"
  breadcrumbs={[{ label: 'Productos', href: '/productos' }, { label: entry.data.title }]}
>
  <h1>{entry.data.title}</h1>
  <Content />                {/* el cuerpo a fondo, desde el Markdown */}
</PageLayout>
B · Schema específico — la hoja del grafo (regla B3) 
---
// La ficha es la HOJA del grafo: emite SU schema específico, una vez.
// Product en producto, Service en servicio, Article en artículo. El
// emisor es central (buildSchema desde BaseLayout, regla B3). La ficha
// NO duplica Organization (eso es del layout) ni emite ItemList (eso
// es del índice L2). Cada nivel emite lo suyo.
import { productSchema } from '@lib/seo'

// buildSchema(), según schemaType="Product", arma el nodo:
//   productSchema({ name, image, description, offers: { price, availability } })
// y lo compone en el @graph junto al Organization base. La página NO
// escribe <script type="application/ld+json"> a mano.
---

{/* Jerarquía del grafo por nivel: */}
{/*   L1 home  → Organization + WebSite   (BaseLayout)         */}
{/*   L2 índice → ItemList                 (grid padre)         */}
{/*   L3 ficha  → Product / Service / Article (esta hoja, B3)   */}

Buenas prácticas

Qué hacer y qué evitar

Siete hábitos que mantienen la ficha como la página que agota un tema, convierte y emite su schema limpio; siete errores que la convierten en un teaser que remite a otra página, desperdicia el long-tail o ensucia el grafo. La ficha recibe el tráfico mejor calificado del sitio: cada acierto y cada error pesan donde más importa.

La diferencia entre una ficha que convierte y una que frustra es disciplinaria: migas de dos niveles, agotar el tema, h1 con el nombre propio, schema específico único, demostrar en lugar de afirmar, cierre derivado de la SSoT y cuerpo legible. Cada regla viene de un error real: fichas sin migas, teasers que remiten, h1 repetido de la sección, schema duplicado, cierres hardcodeados con 404s, párrafos-muro a 14 px.

Los sí son hábitos de jerarquía + profundidad + SEO long-tail + grafo limpio. Los no son atajos que parecen ahorrar (un teaser corto, un cierre a mano) pero rompen el trabajo del L3: agotar el tema y convertir el tráfico mejor calificado. Léelos en pares.

Sí

  • Lleva migas de pan de dos niveles (Inicio › Sección › Item). La ficha es lo más profundo del flujo común: el visitante necesita el rastro completo para volver a la sección o al inicio. El componente Breadcrumbs antepone «Inicio»; la página declara la sección (con href) y la entidad actual (sin href). Es la diferencia con el L2 (un nivel) y el L1 (ninguno).
  • Agota el tema en la propia ficha: el visitante ya eligió, dale todo. Qué es, para qué, cómo funciona, qué lo diferencia, FAQ y el siguiente paso —sin remitir a otra página para entender lo básico—. Cada clic extra para comprender es una fuga. La ficha es la última parada antes de la decisión; que no le falte nada.
  • Usa un h1 con el nombre propio de la entidad y su keyword específica. El h1 de la ficha es el término de cola larga por el que rankea: el nombre del producto/servicio/módulo + su calificador. Las secciones del cuerpo son h2; los sub-bloques, h3. Un solo h1 por página, con el nombre concreto, no el de la sección.
  • Emite el schema específico (Product/Service/Article) una sola vez, desde la ficha. La ficha es la hoja del grafo: el único lugar del Product/Service/Article con todos sus campos. El emisor es central (lib/seo.ts vía buildSchema); la ficha NO duplica Organization ni emite ItemList. Un emisor por página (regla B3).
  • Demuestra, no solo describas: ejemplo en vivo, galería, proceso o datos. Una ficha que enseña (el componente funcionando, las fotos del producto, el paso a paso del servicio, los números del caso) convierte más que una que solo afirma. La prueba visual o funcional es el corazón persuasivo del L3.
  • Deriva el cierre de la SSoT de la sección, no lo hardcodees. El SectionMenu de cierre (fichas hermanas + home) se arma con un helper sobre la lista de la sección (siblingsModules/siblingsNiveles), que salta las entradas no publicadas. Hardcodear cuatro enlaces garantiza 404s el día que cambie el contenido.
  • Cierra con UN siguiente paso claro: reparto (SectionMenu) o conversión (CTABanner). Una guía cierra repartiendo hacia fichas hermanas (el visitante explora); una ficha comercial cierra pidiendo la conversión (cotizar/comprar). Elige según la intención de la página —pero cierra siempre con una acción, no en seco—.

No

  • NO omitas las migas en una ficha. Es la página más profunda del flujo: sin migas, el visitante queda sin «dónde estoy» ni «cómo vuelvo» y depende del botón atrás. Las migas de dos niveles (Inicio › Sección › Item) son obligatorias en todo L3. Solo el L1 va sin ellas; el L2 lleva uno; el L3, dos.
  • NO conviertas la ficha en un teaser que remite a otra página. Si la ficha dice «contáctanos para más información» en lugar de dar la información, pierde su trabajo: el visitante ya eligió y quiere decidir aquí. Remitir a otra página para lo básico es fricción que mata la conversión del tráfico mejor calificado.
  • NO repitas el h1 de la sección en la ficha. El h1 de la ficha es el nombre de la ENTIDAD (este producto), no el de la sección (Productos) —ese ya es el h1 del índice L2—. Repetir el término amplio desperdicia la oportunidad de rankear por el específico y confunde la jerarquía del sitio.
  • NO dupliques schema en la ficha (Organization, o un ItemList que es del índice). La ficha emite SU schema específico (Product/Service/Article) y nada más. El Organization lo emite BaseLayout una vez; el ItemList es del índice L2. Meter Organization a mano o un ItemList en la ficha ensucia el grafo y los validadores marcan error (regla B3).
  • NO entierres el siguiente paso ni cierres en seco. Una ficha que termina sin CTA ni navegación deja al visitante en un callejón: leyó todo y no sabe qué sigue. Cierra con un SectionMenu (reparto) o un CTABanner (conversión) según la intención —pero nunca con el último párrafo a secas—.
  • NO hardcodees los enlaces del cierre. Cuatro enlaces escritos a mano se rompen cuando una ficha hermana cambia de slug o se despublica. El cierre se deriva de la lista de la sección con un helper (siblingsModules/siblingsNiveles) que solo enlaza lo publicado. Es el patrón que evita 404s automáticamente.
  • NO descuides la legibilidad del cuerpo largo. Una ficha es texto a fondo: líneas de 120 caracteres, font de 14 px o párrafos-muro la vuelven ilegible en móvil. Medida de ~65 caracteres, font ≥16 px (anti-zoom iOS), subtítulos h2/h3 que dan respiro. El contenido profundo solo convierte si se puede leer.

Preguntas frecuentes · el nivel L3

¿De cuántos niveles son las migas de una ficha?

De dos (Inicio › Sección › Item). La ficha es lo más profundo del flujo común, así que necesita el rastro completo para que el visitante suba a la sección o al inicio. El componente Breadcrumbs antepone «Inicio»; la página declara la sección (con href) y la entidad actual (sin href). Si la entidad se subdivide en un L4, ese llevará tres.

¿Qué schema emite la ficha?

El específico de su entidad, una sola vez: Product en un producto, Service en un servicio, Article/TechArticle en un artículo o guía, LocalBusiness en una zona. La ficha es la hoja del grafo: el índice L2 emitió la ItemList y BaseLayout el Organization. La ficha NO duplica ninguno de esos (regla B3 — un único emisor por página).

¿Por qué se dice que la ficha captura el long-tail?

Porque rankea por términos específicos y de alta intención («casco dieléctrico clase E precio»), no por el término amplio del índice («cascos»). Son búsquedas de poco volumen pero muchísima intención de compra; el contenido profundo de la ficha (specs, FAQ, casos) es lo que las captura. Por eso una ficha pobre desperdicia el tráfico mejor calificado del sitio.

¿Cuántas secciones tiene una ficha en esta plantilla?

El molde canónico (docs/MODULOS.md §2): hero sin CTAs, ¿qué es?, ¿para qué sirve?, anatomía con ejemplo en vivo, variantes, responsive, ¿dónde va?, cómo está construido, sí/no, FAQ y cierre con siblingsNiveles/siblingsModules. Esta misma página lo cumple —es su propio ejemplo en vivo (eat-your-own-dog-food)—.

¿La ficha puede remitir a otra página para «más información»?

No. La ficha agota el tema en su propia página: el visitante ya eligió y quiere decidir aquí. Un «contáctanos para más info» en lugar de la información es fricción que fuga el tráfico mejor calificado. Lo que sí cierra la ficha es UN siguiente paso claro (cotizar, ver hermanas), no más lectura obligatoria.

¿El cierre de la ficha se escribe a mano?

Nunca. El SectionMenu de cierre (fichas hermanas + home) se deriva de la lista de la sección con un helper (siblingsModules / siblingsNiveles) que solo enlaza lo publicado. Hardcodear cuatro enlaces garantiza 404s el día que una hermana cambia de slug o se despublica. El patrón data-driven los evita automáticamente.

¿El schema FAQ de la ficha rinde en Google?

Caveat de mayo de 2026: Google retiró los rich results de FAQ para casi todos los sitios (solo sobreviven autoridades gov/health). El schema FAQPage sigue siendo correcto y útil —Bing y DuckDuckGo lo aprovechan, y Google lo usa para entender la página—, pero no esperes el acordeón en la SERP. Se emite una sola vez (regla B3): o el componente con emitSchema, o buildSchema, nunca ambos.

Sigue por el sistema

Los niveles vecinos y los módulos que definen el molde de una ficha.

¿Necesitas ayuda?