Breadcrumbs: reglas de jerarquía y esquema

Las breadcrumbs son una ruta ordenada de enlaces que muestra dónde se sitúa la página actual dentro de la arquitectura de información del sitio, o AI: el sistema de relaciones padre, hijo y hermano que organiza el contenido. Permiten al lector moverse hacia arriba sin tener que reiniciar desde la navegación principal, mientras proporcionan a los rastreadores y sistemas de respuesta un registro explícito y legible por máquina de esa misma jerarquía.

Esa ruta renderizada es intencionadamente literal. Identifica tres antepasados reales, nombra la página actual y enlaza solo hacia arriba. No inserta «navegación SEO» ni otra frase simplemente porque esa redacción pudiera atraer búsquedas.

Por qué es importante este elemento

Los lectores llegan a páginas profundas desde resultados de búsqueda, enlaces compartidos, correo electrónico y respuestas de IA. A menudo no recuerdan la ruta que los menús del sitio esperan que sigan. Una breadcrumb resuelve esa incertidumbre de un vistazo: «Estoy leyendo una página de elemento dentro del manual SEO y puedo regresar a cualquiera de las dos colecciones». Ese contexto reduce el coste de explorar un sitio sin obligar al lector a abrir un menú, editar una URL o usar el botón Atrás.

La psicología trata sobre orientación, no decoración. Una ruta clara le da al lector una sensación estable de ubicación y una ruta de escape obvia. Esto es más importante en sitios grandes donde títulos de página similares pueden estar en diferentes secciones —por ejemplo, una categoría de producto llamada «Analítica» y una sección de documentación con el mismo nombre. Los antepasados desambiguan la página antes de que el lector interprete sus detalles.

Las máquinas necesitan la misma relación expresada sin depender de espaciado visual o cheurones. La extraíbilidad por máquina significa que el software puede recuperar el significado y el orden de una unidad a partir del HTML o los datos estructurados. Un <nav> semántico, una lista ordenada, enlaces comunes, aria-current y los datos BreadcrumbList correspondientes exponen una secuencia de entidades con posiciones explícitas. Una fila de elementos <span> estilizados puede verse idéntica, pero no proporciona un punto de referencia de navegación ni un orden de lista fiables.

La ruta visible y la salida estructurada deben contar una sola historia. Si la página está visiblemente bajo «Elementos» pero el esquema llama a «Herramientas SEO» su padre, un sistema recibe dos jerarquías en competencia. Esa inconsistencia es peor que omitir el esquema porque hace que las relaciones de entidad del sitio sean menos fiables.

Sigue las reglas de redacción de elementos al elegir este componente. Su regla de precedencia aplica aquí: si el propósito de un pasaje es comunicar jerarquía y navegación hacia arriba, usa el elemento tipificado de breadcrumbs. No lo imites con texto libre, un subtítulo separado por barras o palabras clave enlazadas.

Cuándo usarlo

Usa breadcrumbs cuando una página pertenezca a una jerarquía estable con al menos un padre significativo más allá de la página de inicio. Los sitios editoriales grandes, catálogos de comercio electrónico, bibliotecas de documentación, estructuras de áreas de servicio, directorios y sitios de productos multinivel se benefician más porque los visitantes suelen entrar por debajo del nivel superior.

Úsalos de forma coherente dentro de una sección. Una ruta que aparece solo en algunas páginas de producto hace que los lectores se pregunten si las páginas faltantes pertenecen a otro lugar, y hace que la interpretación automatizada dependa de accidentes de plantilla. El modelo de contenido o la ruta debe proporcionar la jerarquía; los autores no deben reconstruirla independientemente en cada página.

No uses breadcrumbs cuando no haya jerarquía que expresar. Una campaña de una sola página, un sitio superficial donde cada página está directamente bajo Inicio, o un estado de aplicación temporal pueden no obtener ninguna ruta útil de ellas. Añadir «Inicio › Página actual» a cada página superficial puede crear ruido visual sin revelar nuevo contexto.

Los errores comunes incluyen:

• Una ruta del historial del navegador. «Búsqueda › Producto › Carrito» registra una sesión, no una jerarquía de contenido. Diferentes visitantes recibirían diferentes padres para la misma página, por lo que la relación no es canónica.
• Una ruta de palabras clave. «Mejor CRM › CRM barato › CRM para startups» puede colocar frases objetivo a la vista, pero fabrica antepasados que pueden no existir como páginas navegables. Las etiquetas de breadcrumbs nombran nodos reales; no son una etiqueta de título adicional.
• Una ruta de filtros. «Zapatos › Azul › Talla 9» describe facetas seleccionadas. Pertenece a los controles de filtro a menos que cada paso sea una página de destino estable, indexable y con una relación parental intencionada.
• Un indicador de progreso. «Detalles › Pago › Confirmación» comunica pasos en una transacción. Necesita semántica de pasos y estado, no marcado BreadcrumbList.
• Una tabla de contenidos. Los enlaces de sección se mueven dentro del documento actual; las breadcrumbs se mueven entre documentos en la jerarquía del sitio.
• Una cadena de etiquetas. Las etiquetas describen relaciones de muchos a muchos, mientras que las breadcrumbs requieren una ruta primaria ordenada. Una página puede tener varias etiquetas, pero no debería exponer varios padres en competencia en una sola ruta.

Cuando una página aparece legítimamente en varias colecciones, elige una jerarquía canónica principal para la breadcrumb. Preserva otras rutas de descubrimiento a través de enlaces contextuales o páginas de colección. Múltiples rutas de breadcrumbs obligan al lector y al consumidor del esquema a decidir qué padre es autoritativo.

Dónde colocarlo

La orientación solo funciona cuando llega antes de que la página exija interpretación, así que coloca la ruta después del encabezado global del sitio y antes del H1 o contenido principal de la página. Debe ser la primera región de navegación específica de la página. Mantén la misma posición en diseños de escritorio y móviles incluso si la ruta se ajusta de manera diferente.

No coloques breadcrumbs junto a una tabla de contenidos, una barra de herramientas compartida, chips de categoría, controles de cuenta o una insignia promocional. Esos elementos responden a preguntas diferentes y hacen que la estrecha línea de orientación parezca una barra de herramientas genérica. No coloques un anuncio ni una llamada a la acción en línea entre la ruta y el H1. Si el héroe contiene ambos, apila la breadcrumb sobre el título y el contenido promocional separado debajo del texto introductorio.

Anatomía

1. Punto de referencia de navegación: un <nav> con el nombre accesible «Breadcrumb» distingue esta ruta de la navegación global y local.
2. Lista ordenada: el orden tiene significado, desde el antepasado más amplio hasta la página actual, por lo que se requiere <ol> incluso si los marcadores de lista se eliminan visualmente.
3. Elementos antepasados: cada antepasado usa su etiqueta legible canónica y un enlace rastreable a la página padre real.
4. Separador: un cheurón o barra separa los elementos visualmente. Es decorativo y está oculto para la tecnología de asistencia.
5. Elemento actual: el elemento final nombra la página actual, no tiene enlace y usa aria-current="page".
6. Relación del documento: la ruta se sitúa sobre el H1. La captura de pantalla etiqueta esta posición, pero la colocación está controlada por la plantilla, no por el texto editado.

Ejemplos de diseño

Las variantes cambian la densidad y el comportamiento adaptable, nunca la jerarquía subyacente.

Por defecto: muestra la ruta completa cuando caben de dos a cinco elementos concisos. Esta es la variante preferida porque no se oculta ningún contexto.

Ruta larga: permite una ruta de seis o siete elementos solo cuando cada nivel representa un antepasado navegable genuino. Ajusta en los límites de los elementos; nunca reduzcas el texto hasta que sea difícil de leer.

Colapsado en móvil: cuando la ruta real no puede ajustarse de forma aceptable, conserva Inicio, el padre inmediato y la página actual. Un control de puntos suspensivos enfocable puede revelar antepasados intermedios ocultos. La ruta completa debe permanecer en el DOM o estar disponible a través de ese control, y los datos estructurados deben conservar cada elemento real.

Héroe oscuro: los colores e indicadores de foco se adaptan al fondo, pero las etiquetas, el orden, el comportamiento de enlace y el nombre accesible permanecen idénticos al valor por defecto.

Parámetros

El elemento es una lista estructurada porque las matrices paralelas de etiquetas y URLs son fáciles de desalinear. El orden de los elementos es la jerarquía, y los mismos elementos alimentan el HTML visible y el esquema.

El primer encabezado no tiene correspondencia en este elemento. Las breadcrumbs son un punto de referencia de navegación, no una sección de contenido con título, y colocar un encabezado en un elemento crearía una jerarquía de documento falsa. El elemento final omite url en la fuente editada por defecto; un renderizador puede usar la URL canónica de la página para la salida BreadcrumbList sin convertir el elemento actual visible en un autoenlace.

Dos elementos significan un antepasado más la página actual. Cinco es el rango superior normal. Siete es un máximo estricto porque las rutas más profundas se vuelven difíciles de escanear y generalmente revelan un problema de AI que debería solucionarse en la fuente en lugar de ocultarse con estilo.

Sintaxis y ejemplos de código

El nombre del componente canónico es breadcrumbs. El orden de sus elementos debe provenir de los datos de jerarquía revisados del sitio, incluso cuando los ejemplos muestren valores en línea.

Directiva Markdown portátil

:::breadcrumbs{ariaLabel="Breadcrumb" schema=true collapse=mobile}
::item{label="Inicio" url="/"}
::item{label="Manual SEO" url="/seo-playbook/"}
::item{label="Elementos" url="/seo-playbook/elements/"}
::item{label="Breadcrumbs" current=true}
:::

Shortcode de Hugo

{{< breadcrumbs ariaLabel="Breadcrumb" schema="true" collapse="mobile" >}}
  {{< breadcrumb-item label="Inicio" url="/" />}}
  {{< breadcrumb-item label="Manual SEO" url="/seo-playbook/" />}}
  {{< breadcrumb-item label="Elementos" url="/seo-playbook/elements/" />}}
  {{< breadcrumb-item label="Breadcrumbs" current="true" />}}
{{< /breadcrumbs >}}

Este es el contrato del adaptador portátil, no una instrucción para añadir un nuevo shortcode a este repositorio. Una implementación en Hugo debería derivar normalmente los elementos de la ascendencia de la página y los metadatos de la sección para que un editor no pueda publicar una ruta que discrepe del enrutamiento.

Bloque de WordPress

<!-- wp:amicited/breadcrumbs {"ariaLabel":"Breadcrumb","schema":true,"collapse":"mobile"} -->
<!-- wp:amicited/breadcrumb-item {"label":"Inicio","url":"/"} /-->
<!-- wp:amicited/breadcrumb-item {"label":"Manual SEO","url":"/seo-playbook/"} /-->
<!-- wp:amicited/breadcrumb-item {"label":"Elementos","url":"/seo-playbook/elements/"} /-->
<!-- wp:amicited/breadcrumb-item {"label":"Breadcrumbs","current":true} /-->
<!-- /wp:amicited/breadcrumbs -->

WordPress debería poblar el bloque a partir de la cadena de padres principales de la página y las URLs canónicas. Las sobrescrituras manuales requieren revisión editorial porque cambiar una etiqueta puede hacer que la navegación, el esquema y la arquitectura del sitio discrepen.

Ejemplos

Correcto: una jerarquía real y navegable

Inicio › Documentación › Auditorías › Auditoría de actualización

Esto es correcto cuando Documentación, Auditorías y Auditoría de actualización son páginas canónicas reales en ese orden padre-hijo. Cada antepasado predice su destino, y la etiqueta actual es lo suficientemente concisa para confirmar la ubicación sin repetir todo el H1.

Incorrecto: palabras clave que pretenden ser jerarquía

Inicio › Mejor Herramienta SEO con IA › Plataforma de Visibilidad con IA Asequible › Breadcrumbs

Esto es incorrecto cuando las dos etiquetas intermedias no son páginas padre reales. La ruta hace promesas que sus enlaces no pueden cumplir, repite frases promocionales en lugar de nombrar secciones y crea una cadena de entidades falsa para los rastreadores. Reemplázala con la ruta de antepasados real más corta. Si los conceptos deseados merecen páginas, crea e integra esas páginas en la AI primero; no previsualices una arquitectura imaginaria en las breadcrumbs.

Marcado de esquema y accesibilidad

Las breadcrumbs pueden alimentar BreadcrumbList de Schema.org, una lista ordenada cuyas entradas son objetos ListItem. Usa valores enteros position basados en uno y mantén name e item alineados con la etiqueta visible y el destino canónico. Genera JSON-LD y HTML a partir de un único objeto de datos para que un cambio de nombre, traslado o cambio canónico actualice ambas salidas juntas.

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {"@type":"ListItem","position":1,"name":"Inicio","item":"https://amicited.com/"},
    {"@type":"ListItem","position":2,"name":"Manual SEO","item":"https://amicited.com/seo-playbook/"},
    {"@type":"ListItem","position":3,"name":"Elementos","item":"https://amicited.com/seo-playbook/elements/"},
    {"@type":"ListItem","position":4,"name":"Breadcrumbs","item":"https://amicited.com/seo-playbook/elements/breadcrumbs/"}
  ]
}

El esquema describe la jerarquía visible; no autoriza una segunda ruta optimizada. No incluyas redirecciones, parámetros de seguimiento, variantes de protocolo o host no canónicas, resultados de búsqueda interna, estados de sesión o categorías de palabras clave ocultas. No publiques dos objetos BreadcrumbList para dos taxonomías posibles. Selecciona la ruta primaria en el modelo de contenido y úsala en todas partes.

La accesibilidad comienza con <nav aria-label="Breadcrumb"> y una lista ordenada. La etiqueta accesible distingue esta región de navegación sin requerir un encabezado visible. Oculta los separadores decorativos con aria-hidden="true" o créalos en CSS para que los lectores de pantalla no anuncien «mayor que» entre cada elemento. Marca solo el elemento final con aria-current="page" y no lo enlaces a sí mismo.

Cada enlace antepasado necesita un indicador de foco visible y un objetivo lo suficientemente grande para activarse en una pantalla táctil. Las rutas largas deben ajustarse o colapsarse mediante un control operable con teclado; el desplazamiento horizontal que oculta la posición actual no es un valor por defecto aceptable. El truncamiento puede acortar una etiqueta visual solo cuando el nombre accesible completo permanezca disponible y el texto acortado siga siendo distinguible. Nunca dependas solo del color para separar los antepasados enlazados del elemento actual.

Reglas de redacción

Las etiquetas de breadcrumbs son nombres de ubicación, así que escríbelas como navegación, no como mini titulares. Usa el nombre oficial más corto y sin ambigüedades de cada sección o página. «Documentación» funciona mejor que «Explora toda la documentación del producto», porque el destino proporciona el contexto y la ruta debe seguir siendo escaneable.

• Usa de una a seis palabras y no más de 60 caracteres por etiqueta. Las etiquetas cortas hacen visible la jerarquía antes del ajuste; no son permiso para abreviar términos desconocidos.
• Usa normalmente de dos a cinco elementos, incluida la página actual. Permite seis o siete solo cuando cada nivel sea estructuralmente necesario.
• Ordena los elementos desde el antepasado más amplio hasta la página actual. Nunca inviertas la ruta ni coloques un hermano en la secuencia.
• Usa mayúscula inicial y minúsculas para el resto a menos que una marca, producto o acrónimo tenga una ortografía aprobada.
• Mantén las etiquetas estables entre páginas. Un mismo padre no puede ser «Docs» en una ruta y «Documentación» en otra, a menos que el sistema de navegación cambie globalmente.
• Haz que las etiquetas de los antepasados coincidan o reflejen fielmente el nombre visible del destino. Una etiqueta de navegación concisa es aceptable; un objetivo de palabra clave diferente no lo es.
• Nombra la página actual de forma concisa. Puede acortar un H1 largo, pero debe seguir identificando el mismo documento.
• Usa un tono neutral. Las breadcrumbs orientan; no venden, felicitan, advierten ni instruyen.

Nunca pongas llamadas a la acción, precios, estado de stock, fechas, nombres de autor, puntuaciones de reseñas, emojis, iconos con significado independiente, afirmaciones promocionales, códigos de seguimiento o parámetros de consulta dentro de una etiqueta de breadcrumb. Nunca añadas «Atrás», «Anterior» o «Siguiente» como elemento porque esos controles expresan historial o secuencia, no ascendencia. Los separadores pertenecen a la presentación gestionada por el renderizador y no forman parte de ninguna etiqueta.

Tipos de publicación que lo usan

El frontmatter postTypes registra las combinaciones admitidas. La tabla convierte esas combinaciones en reglas de uso y colocación; no es una afirmación de que cada instancia necesite una ruta creada manualmente.

«Generalmente» significa usar el elemento cuando el sitio tiene el padre estable nombrado, y omitirlo en una implementación genuinamente superficial en lugar de inventar un nivel adicional. «Siempre» asume que la estructura anidada indicada existe. Las plantillas deben gestionar la representación; el tipo de publicación define la fuente de jerarquía esperada y las excepciones editoriales.

Lista de verificación de control de calidad

• Jerarquía real: cada antepasado es un padre real e intencional en la AI principal del sitio, no una palabra clave, etiqueta, filtro o visita anterior.
• Posición correcta: la ruta aparece después del encabezado global y antes del H1, sin promociones ni barras de herramientas no relacionadas insertadas entre ellos.
• Una sola ruta: la página expone una breadcrumb visible y un BreadcrumbList coincidente, no rutas en competencia.
• Orden completo: los elementos van desde el antepasado más amplio hasta la página actual, sin niveles estructurales faltantes ni hermanos añadidos.
• Enlaces canónicos: cada antepasado resuelve directamente a su URL canónica e indexable sin parámetros de seguimiento ni redirecciones evitables.
• Estado actual: el último elemento visible nombra la página actual, no tiene enlace y tiene aria-current="page".
• Etiquetas concisas: cada etiqueta usa el nombre oficial más corto y sin ambigüedades, sigue mayúscula inicial y minúsculas para el resto, y se mantiene dentro del límite editorial.
• HTML semántico: el componente usa un punto de referencia de navegación etiquetado y una lista ordenada; no es una fila de elementos span genéricos.
• Separadores decorativos: los separadores están ocultos para la tecnología de asistencia y no aparecen dentro de nombres de enlace accesibles.
• Comportamiento adaptable: la posición actual permanece disponible en pantallas estrechas; el ajuste, la revelación, el orden de foco y los objetivos táctiles funcionan sin contenido horizontal oculto.
• Paridad del esquema: los nombres BreadcrumbList, las URLs canónicas, el orden, el recuento de elementos y las posiciones coinciden en sustancia con la jerarquía visible completa.
• Fuente de datos única: el HTML y el JSON-LD se generan a partir de la misma jerarquía revisada, no se mantienen como copias separadas.
• Paridad portátil: las representaciones en Markdown, Hugo y WordPress preservan el orden de elementos, las etiquetas, los destinos y el estado actual idénticos.
• Estado de capturas de pantalla: los comentarios de captura siguen siendo instrucciones no renderizadas hasta que existan activos reales; ninguna captura de pantalla inexistente se referencia como imagen.

Preguntas frecuentes

La plantilla de academia renderiza las cinco preguntas revisadas almacenadas en el frontmatter. Cubren rutas de URL, el elemento actual, datos estructurados, páginas de filtro inestables y límites prácticos de profundidad.