Breadcrumbs: què són i com implementar-les

Què són les Breadcrumbs?

Les Breadcrumbs són una funció el propòsit de la qual és millorar la navegació de l'usuari i indicar clarament, tant als cercadors com als usuaris, la jerarquia de les pàgines. D'aquesta manera, l'usuari pot visitar ràpidament tant la pàgina final com les categories a les quals pertany aquesta pàgina.

Formes d'implementar les breadcrumbs

Pel que fa a la implementació, actualment tenim dues opcions: l'opció visible per als usuaris i l'opció de codi. En realitat, totes dues s'haurien d'implementar sempre juntes i no per separat.

Visible

A l'opció visible, el web implementa les breadcrumbs a la part superior de cada pàgina perquè l'usuari que visita la pàgina sàpiga exactament on és. Per exemple, si estem mirant una pàgina de producte d'un ecommerce (un ordinador HP Envy), a les breadcrumbs veuríem el següent:

Inici > Ordinadors > HP > Envy D'aquesta manera, estem dient a l'usuari que el producte que està veient cau dins de la categoria d'ordinadors i també pertany a la família d'ordinadors HP. Pel que fa a la navegació, aquesta funció és molt important perquè si l'usuari volgués veure més models HP o continuar navegant per ordinadors, només seria a un clic de distància.

Sense aquesta funció, la navegació es fa molt més difícil i les possibilitats que l'usuari abandoni el web són molt més altes.

Codi

Mentre que l'opció anterior ens permetia afegir breadcrumbs per a l'usuari, aquesta opció dirà als cercadors com es categoritza el nostre contingut. És molt important que aquesta implementació es faci correctament perquè Google no entén les breadcrumbs que només són visibles.

A continuació, pots veure un exemple d'una implementació de Breadcrumbs utilitzant un fragment de script JSON-LD.

<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Llibres", "item": "https://example.com/books" },{ "@type": "ListItem", "position": 2, "name": "Autors", "item": "https://example.com/books/authors" },{ "@type": "ListItem", "position": 3, "name": "Ann Leckie", "item": "https://example.com/books/authors/annleckie" },{ "@type": "ListItem", "position": 4, "name": "Ancillary Justice", "item": "https://example.com/books/authors/ancillaryjustice" }] } </script> El codi anterior ens diu que el llibre "Ancillary Justice" va ser escrit per l'autora Ann Leckie i és un llibre.

Llibres > Autors > Ann Leckie > Ancillary Justice

Si hem construït el nostre web amb desenvolupament a mida o amb algun dels llenguatges principals, haurem de fer la implementació manualment. Tot i això, si utilitzem Wordpress, tenim diversos plugins disponibles que ens ajudaran amb aquesta implementació:

• ›Rank Math
• ›Yoast SEO

Validar la implementació

Un cop feta la implementació, el més important serà verificar que s'ha fet correctament. Mentre que verificar la implementació "visible" serà molt simple ja que només haurem de comprovar que tots els elements estan correctament enllaçats i funcionen bé, per verificar la implementació de codi necessitarem una mica més d'esforç.

Tot i així, tenim a la nostra disposició una eina de Google i una extensió de Chrome que ens facilitaran molt la vida.

Eina de Dades Estructurades de Google:

Utilitzant l'eina de Google, podem validar les nostres dades estructurades ja sigui per URL o a nivell de codi si introduïm el fragment directament.

Eina de Dades Estructurades de Google

Si introduïm una URL, Google ens retornarà l'anàlisi amb totes les dades estructurades que s'han detectat.

Exemple d'una anàlisi d'URL a l'eina de dades estructurades de Google.

Si, en canvi, volem provar primer el codi JSON-LD de Breadcrumb abans d'implementar-lo, podem utilitzar l'eina "fragment de codi", que ens donarà el següent resultat:

Eina de validació de fragments de codi per a dades estructurades.

Structured Data Testing Tool (extensió de Google Chrome)

Si en lloc de visitar l'eina de Google, volem validar les dades estructurades de Breadcrumb (i d'altres) directament des del navegador, podem utilitzar l'extensió "Structured Data Testing Tool", que ens mostrarà totes les dades estructurades detectades i també qualsevol error.

Extensió de Chrome per validar Dades Estructurades amb un exemple d'un article de SEO Alive.

Monitorització de breadcrumbs a Google Search Console

Finalment, un cop hem fet la implementació i la validació, només queda monitoritzar l'activitat a Google Search Console, que ens permetrà fer-ne un seguiment diari i detectar qualsevol anomalia.

Visualització de l'informe de breadcrumbs a Search Console (llançat el setembre de 2019).

Per acabar, ens agradaria preguntar-te: quins han estat els errors més comuns que t'has trobat en implementar-les?

Ens agradaria fer-ne una recopilació i publicar-la en aquest article per ajudar altres professionals SEO.

Moltes gràcies i no oblidis compartir els teus comentaris!

Referències

• ›Documentació de Google sobre Breadcrumbs