In questo articolo vedremo come inserire i breadcrumbs grazie a Yoast SEO su temi che non possiedono questa funzionalità e anche come inserirli in una posizione diversa rispetto a quella di default data dal tema.
Questo è il risultato finale che otterrai, incluso di CSS, tu potrai modificarlo a tuo piacimento.
Sei pronto? Iniziamo!
Cosa sono i breadcrumbs
I breadcrumbs sono letteralmente delle “briciole di pane” che permettono all’utente visitatore di capire dove si trova, cioè in quale percorso.
Hanno una loro rilevanza proprio perché permettono una maggiore user experience e molti credono anche un miglior posizionamento nei motori di ricerca.
Il motivo è molto semplice: oltre ad indicare all’utente dove si trova lo indica anche al browser e gli permette di capire maggiormente qual è l’argomento “padre”.
Attivare i breadcrumbs
Attiva i breadcrumbs andando su Yoast SEO > Aspetto della ricerca > Breadcrumbs.
Questa qui sopra è la schermata che dovresti vedere ora.
Qui puoi personalizzare vari dettagli come il separatore tra i breadcrumbs di Yoast SEO o il testo del link per la home page, modificali come più ti aggradano.
Inoltre potrai personalizzare anche il tipo di percorso e quindi la tassonomia da mostrare, io l’ho inserita per Categoria ma la puoi inserire anche per Tag o Formato.
Rendere visibili i breadcrumbs di Yoast SEO in tutte le pagine o articoli
Per rendere visibili i breadcrumbs in tutti gli articoli dovremo modificare il file single.php mentre per renderli visibili in tutte le pagine dovremmo modificare il file page.php
Nel seguente esempio vedremo come crearli in tutti gli articoli, ma il procedimento per le pagine rimane pressoché identico.
Puoi trovare questi due file andando su Aspetto > Editor del tema.
Se qui non trovi niente, molto probabilmente stai utilizzando un child theme e quest’ultimo eredita tutte le classi dal tema padre.
In questo caso per non perdere le modifiche quando il tema padre verrà aggiornato ti consiglio di copiare il file single.php all’interno del tema figlio.
Questo è il percorso in cui dovresti trovare il file single.php:
public_html/wp-content/themes/IlTuoTemaPadre/single.php
Copia il file al seguente percorso:
public_html/wp-content/themes/IlTuoTemaChild/single.php
Perfetto, ora ritornando nell’editor del tema dovresti vedere il file.
Ora non devi far altro che aggiungere il seguente codice dove vuoi che appaia il breadcrumb.
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">Sei in: ','</p>' );
}Se non sei esperto di PHP e HTML ti consiglio di utilizzare il seguente codice per vedere la corretta posizione in cui inserire il pezzo di codice qua sopra.
echo 'prova';Questo restituirà un messaggio di testo chiamato prova all’interno di tutti i tuoi articoli che dovrai poi eliminare una volta trovato il giusto spazio in cui collocare il codice di Yoast SEO per il breadcrumb.
Quello che ti consiglio è di collocare il breadcrumb subito sopra il testo dell’articolo.
Assicurati che il codice echo e la funzione di Yoast SEO vengano aggiunti tra “<?php” e “?>” quando li inserisci.
Se hai qualsiasi dubbio non esitare a contattarmi.
Una volta trovata la giusta posizione nel quale inserirlo dovrebbe essere visibile correttamente in tutti i tuoi articoli.
Non dimenticare che hai anche un’altra possibilità e cioè quella di inserire il breadcrumb nel file header.php che contiene il codice per la generazione dell’header.
Rendere visibili i breadcrumbs di Yoast SEO in determinate pagine o articoli
Per mostrare il breadcrumb in una determinata pagina o articolo non dovrai far altro che aggiungere il codice qui sotto sull’articolo o sulla pagina in questione.
Se non sei un gran esperto in linguaggi di programmazione questa potrebbe essere l’opzione migliore anche se dovrai ripeterlo per ogni articolo o pagina.
Rendere i breadcrumbs di Yoast SEO accattivanti e visibili
Una volta aggiunti correttamente i nostri breadcrumbs possiamo renderli ancora più accattivanti personalizzandoli con il CSS.
Questo permetterà di renderli ancora più visibili e far si che un utente prolunghi la sua visita nel nostro sito se i nostri contenuti sono di suo apprezzamento.
La prima cosa che ti consiglio di fare è andare tramite una pagina di navigazione in incognito sul sito e ispezionare il breadcrumb.
Per ispezionare un elemento non devi far altro che passarci sopra con il mouse, fare click destro e cliccare su ispeziona.
Ora si aprirà un pannello con tutto l’HTML e i relativi CSS del sito.
Se hai fatto click destro correttamente sopra il breadcrumb dovresti già trovare l’elemento indicato dalla freccia qui sopra e cioè:
<p id="breadcrumbs">Se non trovi ancora questo HTML seleziona contemporaneamente cmd + f su mac o ctrl + f su pc per effettuare una ricerca.
Ti basterà scrivere breadcrumbs e la ricerca evidenzierà tutte le parti della pagina dove è presente quel determinato carattere o parola.
Questa ricerca ci servirà per capire quale tag andare a modificare tramite il CSS.
Ora sappiamo che il CSS da applicare sarà il seguente:
p#breadcrumbs {
background-color: #fff;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,.12);
color: #B6C5D1;
font-weight: 600;
}Applicando questo CSS il risultato che otterrai sarà quello promesso inizialmente.
Puoi modificare in qualsiasi momento e come più preferisci questo codice senza nessun problema.
Visualizzare le categorie figlio nei breadcrumbs
Alcuni di voi mi hanno segnalato che le categorie figlio non vengono visualizzate correttamente nel breadcrumb.
Nessun problema, la soluzione non è affatto complicata.
Vai nell’articolo in cui ricevi il problema e contrassegna la categoria figlio come categoria principale alla voce Select Primary Term.
Ora dovresti visualizzare correttamente anche la categoria figlio! 😉
Conclusioni
Devi applicare i breadcrumbs a tutti i tuoi articoli o a tutte le tue pagine? L’opzione migliore è sicuramente quella di aggiungere la funzione al file single.php o page.php
Devi aggiungere i breadcrumbs solo a poche pagine o articoli? In questo caso ti converrà seguire lo step dove viene indicato lo shortcode.
Hai avuto qualche problema durante il procedimento? Scrivimi nella chat che trovi in basso a destra gratis!
Ti è piaciuto l’articolo? Lascia un commento qui sotto!
Un abbraccio,
Matteo.
Lascia un commento
Ciao Matteo,
in primis, complimenti, il tuo articolo è il più chiaro di internet (a prescindere dalla lingua in cui è scritto).
Il mio problema è che ho implementato lo shortcode e ho piazzato il breadcrumb nella posizione giusta.
Tuttavia non ho l’ID breadcrumb e non riesco a modificarne il CSS.
Come posso fare?
Grazie 🙂
Fabrizio
Ciao Fabrizio,
se stai utilizzando lo shortcode e non vedi l’ID nessun problema.
Puoi cambiare la forma del tuo CSS ispezionando i breadcrumbs su un qualsiasi browser (ti consiglio Google Chrome).
Dovrai seguire questo procedimento:
1) Vai su una pagina di navigazione in incognito e fai clic destro sui breadcrumbs di un tuo articolo qualsiasi.
2) Clicca la voce “ispeziona”.
3) Si aprirà un pannello con indicato il codice HTML dei tuoi breadcrumbs, clicca il “+” vicino a “:hov” e “.cls” nel pannello che si è appena aperto.
4) Ora aggiungi il tuo codice CSS sotto la voce che è stata appena creata.
5) Copia il codice CSS che è stato creato e posizionalo nel tuo file style.css o in un file CSS apposito per gli articoli del tuo blog.
Per qualsiasi tipo di problema contattami tramite la chat di assistenza in basso a destra! 🙂
Un saluto,
Matteo.
Buon pomeriggio Matteo, ho abilitato i breadcrumbs di Yoast e poi ho inserito il codice [wpseo_breadcrumb] nelle varie pagine e articoli. Negli articoli non mi compare la categoria Figlio. Ti spiego. La struttura corretta è: Home -> Categoria padre -> Categoria figlio -> Articolo. Nella visualizzazione dei breadcrumbs sul web mi omette la Categoria Figlio e passa direttamente all’articolo. Come posso aggiungerla? Grazie mille per le info che mi invierai.
Ciao Steve,
grazie per l’idea, lo aggiungerò nella mia guida il prima possibile! 🙂
Non devi fare altro che aggiungere nel tuo articolo la categoria figlio come “categoria primaria”.
Un abbraccio,
Matteo.