Breadcrumbs Yoast SEO Cosa sono e come implementarli

Breadcrumbs Yoast SEO: Cosa sono e come implementarli

Aggiornato il Scritto da Matteo Feduzi Plugin, WordPress 2 commenti

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.

Breadcrumbs di Yoast SEO

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.

Abilitare i breadcrumbs di Yoast SEO

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.

File single.php di WordPress

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.

[wpseo_breadcrumb]

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.

Benvenuto!

Sono Matteo Feduzi, autore di matteofeduzi.com. Ogni giorno aiuto migliaia di imprenditori e neo-imprenditori a sviluppare il proprio business online.

Nuovi tips giornalieri e interessanti su:

Sono presenti 2 commenti

  1. Steve
    #

    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.

    1. Matteo Feduzi
      #

      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.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *