Les rastes de pa (breadcrumbs) són aquella petita ruta de navegació sota el menú: Inici › Serveis › Disseny web. Semblen un detall menor, però en webs d'empresa compleixen tres funcions: orientar el visitant, reduir el rebot i reforçar el SEO tècnic.
Si ja has treballat el menú de navegació i el peu de pàgina, les rastes de pa tanquen el triangle de navegació: a dalt tries destí, al mig saps on ets i a baix trobes enllaços de recanvi.
Què són les rastes de pa i per què importen?
Un breadcrumb mostra la jerarquia de la pàgina actual dins del lloc. El visitant que arriba des de Google a un article del blog pot tornar a la categoria o a la home amb un clic, sense el botó enrere del navegador ni buscar al menú.
- Menys frustració: l'usuari no es sent perdut en webs amb moltes seccions.
- Més pàgines per sessió: facilita explorar serveis relacionats o la resta del blog.
- Més confiança: transmet ordre i professionalitat, sobretot en B2B i serveis.
Tipus de rastes de pa (i quin usar al teu web)
| Tipus | Exemple | Quan usar-lo |
|---|---|---|
| Jeràrquic | Inici › Blog › Article | L'opció més habitual en webs corporatives i blogs |
| Per atributs | Inici › Botiga › Sabates › Talla 42 | E-commerce amb filtres i categories anidades |
| Per historial | Pàgina anterior › Pàgina actual | Poc recomanable: confon i no ajuda al SEO |
A la majoria de webs d'empresa n'hi ha prou amb el breadcrumb jeràrquic que reflecteixi l'estructura real del lloc, no la ruta exacta que va seguir l'usuari.
Beneficis SEO: estructura clara per a Google
Google usa les rastes de pa per entendre com es relacionen les teves URLs. Si implementes el marcatge BreadcrumbList de Schema.org, a més pots aparèixer als resultats amb la ruta visible sota el títol — un extra d'espai i context que millora el CTR.
- Reforça l'arquitectura d'enllaços interns cap a categories i la home.
- Ajuda Google a classificar pàgines profundes (serveis, casos d'èxit, posts).
- Complementa el treball de la teva pàgina d'inici i les landings de captació.
Com dissenyar rastes de pa que converteixen
- Ubicació consistent: sota el header, sobre l'H1, a totes les pàgines internes.
- Separador clar: › o / amb bon contrast; evita icones ambigües.
- Text breu: usa els mateixos noms que al menú (màxim 3–4 nivells visibles).
- Enllaç a tots els nivells excepte l'actual: la pàgina on ets no ha de ser clicable.
- Visible en mòbil: una sola línia amb scroll horitzontal si cal; no l'ocultis.
Combina les rastes amb CTAs ben ubicats: l'usuari orientat és més propens a prémer «Demanar pressupost» o «Contactar».
Errors freqüents en webs d'empresa
- Rastes que no coincideixen amb la URL real (p. ex. enllaçar a /serveis quan la ruta és /ca/serveis).
- Incloure la pàgina actual com a enllaç — genera confusió i enllaços redundants.
- Ometre la home — sempre ha de ser el primer element.
- Duplicar el menú complet — les rastes resumeixen la jerarquia, no el substitueixen.
- No implementar Schema — perds l'oportunitat de rich results sense cost extra.
Checklist abans de publicar
| Element | Ho tens? |
|---|---|
| Breadcrumb en pàgines de segon nivell o més | ☐ |
| Noms alineats amb menú i títols de pàgina | ☐ |
| Marcatge BreadcrumbList en JSON-LD | ☐ |
| Contrast i mida llegible en mòbil | ☐ |
| Comprovat a Search Console després del desplegament | ☐ |
Preguntes freqüents
Les rastes de pa són obligatòries?
No legalment, però en llocs amb més de 10–15 pàgines són una bona pràctica d'UX i SEO. Google les recomana a la documentació de dades estructurades.
Les he de mostrar a la home?
No. Només en pàgines internes. A la portada no hi ha jerarquia que mostrar.
Afecten el disseny minimalista?
Poden ser discretes: text petit, color secundari. El benefici d'orientació supera el cost visual si la resta de l'hero està ben treballat.
WordPress, PrestaShop o Laravel les inclouen?
Molts temes i CMS les porten per defecte, però convé revisar noms, enllaços i Schema. En desenvolupaments a mida les implementem des del wireframe perquè encaixin amb l'arquitectura del lloc.
Següent pas
Les rastes de pa no substitueixen un bon menú ni una home clara, però fan que cada pàgina profunda sigui més útil per al visitant i per a Google. Si estàs replantejant la navegació del teu web, a disseny web per a empreses t'ajudem a definir estructura, breadcrumbs i marcatge tècnic des del primer wireframe.
