Com milloren els breadcrumbs l'UX i el SEO del teu lloc web

Segur que has sentit a parlar dels breadcrumbs (fil d’Ariadna en català) en el màrqueting digital. Aquests elements milloren l'experiència d'usuari (UX) al teu lloc web i també són claus per millorar el SEO. En aquesta guia, t'explicarem què són, com funcionen i com implementar-los correctament.

Què són els breadcrumbs i per a què serveixen?

Un breadcrumb és un element de navegació que mostra el camí que ha seguit l’usuari dins de l’estructura d’un lloc web.

Normalment es mostren a la part superior de la pàgina i indiquen la jerarquia del contingut. Per exemple:

Des de la perspectiva de la experiència d’usuari (UX), l’objectiu dels breadcrumbs és facilitar la navegació dins del lloc web. Permeten als usuaris saber en quin punt del lloc es troben i tornar fàcilment a seccions superiors sense necessitat d’utilitzar el botó enrere del navegador (un botó que si hi penses no existeix en molts dels dispositius que fem servir a dia d’avui).

No obstant això, des del punt de vista SEO, els breadcrumbs també tenen una funció molt important. Ajuden els motors de cerca a comprendre l’estructura del lloc web, a identificar la relació entre les diferents pàgines i a millorar el rastreig i la indexació del contingut.

A més, quan estan correctament implementats amb dades estructurades, Google pot mostrar els breadcrumbs directament als resultats de cerca, fet que millora la visibilitat i pot incrementar el CTR. Perquè Google mostri els teus breadcrumbs en el fragment, i no a l'URL modificada, utilitza l’schema markup corresponent. 

Com implementar els breadcrumbs

Implementació de Schema Markup

Per tal de maximitzar els beneficis SEO, afegeix les dades estructurades amb schema.org per a breadcrumbs. Això ajuda a Google a identificar i mostrar la ruta correctament als resultats de cerca. Pots utilitzar JSON-LD per garantir que Google entengui correctament la jerarquia del teu lloc web. 

Fes que cada part sigui un enllaç

Els breadcrumbs no han de ser només indicatius, sinó també clicables, excepte l’últim element (la plana on som). Aquest enllaç ha de ser rastrejable, href de tota la vida, res de coses rares amb JS. Això permet als usuaris tornar a qualsevol secció anterior sense perdre's en el camí, i al bot de Google.

Fer-los visualment clars

Utilitza separadors clars com el símbol “>” per separar els diferents nivells de la jerarquia i així millorar la llegibilitat de les breadcrumbs. La nostra recomanació general és que els col·loquis on han estat sempre, per una qüestió d’usabilitat i costums, a dalt a l’esquerra. En el tema mobile hi ha més debat i de vegades pot ser contraproduent col·locar-lo allà, pots cercar altres opcions. Ara bé: tingues present que si col·loques el fil d’Ariadna en PC però l’amagues en mobile, a ulls de Google aquest enllaç no existeix. No ho facis.

On col·locar els breadcrumbs?

Els breadcrumbs haurien d'estar en un lloc visible, generalment a la part superior de la pàgina, per facilitar la navegació. En pàgines de servei, categoria de servei, fitxes de producte, o posts de blog, es poden utilitzar per millorar l'accessibilitat. A més, si utilitzes un disseny responsiu, assegura't que els breadcrumbs siguin accessibles tant en dispositius de sobretaula com en mòbils.