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:
- El primer (i més important) és que ajuden a l’usuari a navegar fàcilment.
- 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.
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:
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.
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:
Dins de Settings → General Settings: Activa les rutes de navegació de Canvas
Pas #2: Modificar el fitxer funtions.php
Dins del menú lateral, clica per accedir a l’Editor: Aparença → Editor:
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]
Si tot va bé, tindràs un missatge que et dirà que el fitxer s’ha editat correctament:
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:
[box type=”tick”].home .breadcrumb { display: none; }[/box]
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!! ??