Les rutes de navegació són una senzilla eina de navegació web, que mostren de forma ràpida on està ubicada la pàgina que tens en pantalla. Un efectiu “vostè està aquí”, especialment indicat per a llocs web amb moltes  seccions.

En aquesta entrada, t’explico els beneficis de les rutes navegació i com posar-les en marxa dins del teu blog wordpress amb el plugin wordpress Yoast SEO.

Què són les rutes de navegació o breadcrumbs en un pàgina web?

Com ja he mencionat, les rutes de navegació són un recurs gràfic molt simple que ens ajuda a navegar pel lloc web. S’acostumen a ubicar en la part superior esquerra, per sota del menú de navegació principal.

Cada part de la ruta està enllaçada de forma que és fàcil memoritzar l’estructura del lloc web. Les meves entrades estan organitzades de la següent manera: Inici > Categoria del Blog > Nom de l’entrada.


Nota: Els anglesos anomenen breadcrumbs o breadcrumb trail a les rutes de navegació per la influència dels contes infantils (Pulgarcito, Hansel i Gretel, etc) on feien servir molles de pa com un rastre per trobar el camí de tornada.


Beneficis de les Rutes Navegació

Els beneficis principals són dos:

  1. El primer (i més important) és que ajuden a l’usuari a navegar fàcilment.
  2. El segon (també destacable) és que permeten a Google ‘entendre’ quines paraules clau són importants dins del teu lloc web.

Google estarà encantat de la vida, si utilitzes les rutes de navegació!

Tant que les inclourà en el resultat de cerca, substituint la URL, mostrant el teu domini i la categoria.

Rutes navegacio wordpress yoast seo2

A més a més, el seu ús també afavoreix:

  • Una millora del SEO tècnic de pàgina on-page.
  • La usabilitat del teu lloc web.
  • El posicionament a Google
  • Les possibilitats de clic dins dels resultats de cerca.
  • El disseny atemporal: Les rutes de navegació destaquen perquè són fàcils de reconèixer i d’utilitzar.

Com configurar les rutes de navegació amb el plugin Yoast SEO?

Pas #1: Clica l’opció Avançat

Dins del menú lateral, clica a SEO → Avançat:

yoast breacrumbs seo

Pas #2: Activa la Ruta de Navegació

Posa la marca ✅ en la casella que habilita la ruta de navegació.

Omple la resta de paràmetres. En la imatge de sota pots veure quins són els valors que jo tinc configurats.

yoast breacrumbs seo

I fins aquí ja està! Però com sempre passa a la vida, una cosa és la teoria i l’altra la pràctica.

Si no veus les rutes de navegació del plugin Yoast, és possible que necessitis modificar algun arxiu del teu tema wordpress. En el meu cas, jo ho vaig haver de fer per activar-les en el tema Canvas de WooThemes.

Annexe: Com activar les rutes de navegació Yoast dins de Canvas de Woothemes.


⚠️Compte! ⚠️

Qualsevol modificació que facis al fitxer de les funcions del tema functions.php, prova-la abans en local. Si t’equivoques en una sola coma, corres el risc de carregar-te el blog…?!! Per seguretat, fes també una còpia de seguretat! Aquí tens un tutorial per ℹ️ instal·lar WordPress a l’ordinador i fer tants experiments ?com vulguis.


Jo ho he fet així, però segurament hi ha altres maneres d’aconseguir-ho igual de vàlides o millors.

Pas #1: Activar les breadcrums en el tema Canvas

Dins del menú lateral, clica per anar a les opcions de configuració del tema Canvas: Canvas → Settings:

yoast-breadcrumbs-canvas-woothemes

Dins de Settings → General Settings: Activa les rutes de navegació de Canvas

yoast-breadcrumbs-canvas-woothemes1

Pas #2: Modificar el fitxer funtions.php

Dins del menú lateral, clica per accedir a l’Editor: Aparença → Editor:

yoast-breadcrumbs-canvas-woothemes4

Dins l’editor, copia i enganxa el codi de sota en la part indicada:

[php]// Both woo_breadcrumbs() and Yoast breadcrumbs need to be enabled in the WordPress admin for this to function.
add_filter( ‘woo_breadcrumbs’, ‘woo_custom_use_yoast_breadcrumbs’ );
function woo_custom_use_yoast_breadcrumbs ( $breadcrumbs ) {
if ( function_exists( ‘yoast_breadcrumb’ ) ) {
$before = ‘<div class=”breadcrumb breadcrumbs woo-breadcrumbs”><div class=”breadcrumb-trail”>’;
$after = ‘</div></div>’;
$breadcrumbs = yoast_breadcrumb( $before, $after, false );
}
return $breadcrumbs;
} // End woo_custom_use_yoast_breadcrumbs()[/php]

yoast-breadcrumbs-canvas-woothemes1
Si tot va bé, tindràs un missatge que et dirà que el fitxer s’ha editat correctament:

yoast breadcrumbs editor ok
En cas contrari, la pantalla blanca de la mort apareixerà en el teu navegador…! Per solucionar-ho, hauries de baixar-te el fitxer functions.php que acabes d’editar, eliminar l’últim canvi i tornar-lo a pujar.

Pas #3: Treure les rutes de navegació de la pàgina d’inici

Com a pas final, s’ha de modificar el fitxer d’estils per amagar les rutes de navegació a la pàgina principal, ja que no fan falta.

Per fer això, ves un altre cop a l’Editor: Aparença → Editor:

Selecciona el fitxer style.css. Aquest no té tant perill com l’anterior.

Afegeix el codi:

.home .breadcrumb { display: none; }

yoast-breadcrumbs-canvas-woothemes3

Ara comprova que tot va correctament. Clica a qualsevol entrada del blog per veure les rutes de navegació en acció i espera uns dies per veure-les dins dels resultats de cerca de Google.

Qualsevol dubte, fes un comentari.

Salut i happy breadcrumbing!! ??