¿Qué es un breadcrumb en una web? Generador de marcado y schema | We.Inc
Qué es la navegación breadcrumb, el patrón HTML accesible con aria-current, las reglas de BreadcrumbList de Google y un generador que escribe ambos por ti.
Un breadcrumb, o miga de pan, es el breve rastro de enlaces cerca de la parte superior de una página, como Inicio > Zapatillas > Zapatillas de running, que muestra dónde está la página dentro del sitio. Los visitantes lo usan para subir un nivel. Marcado con datos estructurados BreadcrumbList, también ayuda a Google a entender la jerarquía de tu sitio.
Los tres tipos de breadcrumb
Tipo
Ejemplo
Ideal para
Ubicación (jerarquía)
Inicio > Zapatillas > Zapatillas de running
Tiendas, blogs y la mayoría de los sitios
Atributo
Zapatillas > Talla 9 > Azul
Mostrar los filtros elegidos en una lista de productos
Ruta (historial)
Las páginas por las que ha pasado este visitante
Rara vez útil; el botón Atrás del navegador ya lo hace
El nombre viene del rastro de migas de pan del cuento. En un sitio web es un menú secundario, así que nunca sustituye a la navegación principal. Abajo encontrarás el patrón HTML accesible del W3C, los datos estructurados que lee Google y un generador que escribe ambos a partir de tu propio rastro.
Escribe tu rastro en el generador, un nivel por línea, desde la página de inicio hasta la página actual.
Añade la dirección completa después de cada nombre, separada por una barra vertical. La última línea puede omitirla.
Copia el HTML en la plantilla de tu página y el JSON-LD en el head de la página.
Prueba la página con la prueba de resultados enriquecidos de Google antes de aplicarlo en todo el sitio.
Muestra el rastro del lugar de la página dentro del sitio, no el recorrido que hizo el visitante.
Haz que cada miga sea un enlace excepto la página actual, que lleva aria-current="page".
Mantén idénticos el breadcrumb visible y los datos estructurados, para que el marcado describa lo que la gente ve de verdad.
Dibuja los separadores con CSS, como hace el ejemplo del W3C, para que los lectores de pantalla no lean una fila de flechas.
En pantallas pequeñas, deja que el rastro pase a dos líneas en lugar de desplazarse de lado.
Preguntas frecuentes
¿Los breadcrumbs ayudan al SEO?
La documentación de Google sobre breadcrumbs indica que usa el marcado de breadcrumb del cuerpo de una página para clasificar la información que contiene. También dan a los rastreadores más enlaces internos hacia arriba en la jerarquía. Por sí solos no son un atajo para posicionar.
¿Qué exige Google en BreadcrumbList?
Un array itemListElement con al menos dos entradas ListItem. Cada una necesita un name, una position que empiece en 1 y un item con la URL de la página. La última miga puede omitir item, y en ese caso Google usa la URL de la página en la que está.
¿El breadcrumb debe incluir la página actual?
El patrón del W3C sí la incluye como último enlace, marcada con aria-current con el valor page. Muchos sitios la muestran como texto simple. Ambas opciones valen siempre que quienes usan lectores de pantalla sepan cuál es el elemento actual.
¿Qué elemento debe envolver un breadcrumb?
Un elemento nav con una etiqueta como aria-label="Breadcrumb", y una lista ordenada dentro. El ejemplo del W3C usa exactamente eso, porque el orden de los enlaces tiene significado.
¿Puede una página tener más de un rastro de breadcrumb?
Sí. La página de Google muestra un ejemplo con dos elementos BreadcrumbList para una página a la que se llega desde dos categorías. Muestra también ambos rastros a los visitantes, para que el marcado coincida con la página.
Marcado de breadcrumb accesible
El patrón de las WAI-ARIA Authoring Practices tiene tres requisitos: poner el rastro en una región de navegación, etiquetar esa región con aria-label o aria-labelledby, y poner aria-current con el valor page en el enlace a la página actual. MDN describe el valor page de aria-current como el enlace al documento actual dentro de un breadcrumb.
El ejemplo del W3C estructura los enlaces como una lista ordenada y dibuja los separadores con bordes CSS, de modo que la tecnología de apoyo solo anuncia los nombres de las páginas.
Datos estructurados que coinciden
Schema.org explica que la propiedad position sirve para reconstruir el orden de los elementos, con los números más bajos primero. Empieza en 1 para la parte superior del rastro, normalmente tu página de inicio o una categoría principal.
JSON-LD, un bloque de datos estructurados dentro de una etiqueta script, es el formato más fácil de añadir porque va separado de tu HTML visible. El generador de abajo lo escribe a partir de la misma lista que genera el rastro visible.
Estilo de los separadores
Este CSS dibuja un pequeño chevrón antes de cada miga excepto la primera, para que los separadores nunca aparezcan en el texto que anuncia un lector de pantalla.
Breadcrumb con separadores CSS
Edita los nombres para probarlo. Los chevrones salen de la regla ::before, no de caracteres en el HTML.
Generador de breadcrumbs
Tu rastro, un nivel por línea: Nombre | dirección completa
Vista previa
HTML
Datos estructurados JSON-LD
Copiar
Copiado
Google pide al menos dos elementos en un BreadcrumbList. Añade otro nivel.
La línea {n} no tiene dirección. Solo el último elemento puede omitirla.
Se genera en tu navegador a partir de lo que escribes. No se sube nada.