Breadcrumbs Yoast SEO: Cosa sono e come implementarli

Implementare i breadcrumbs con Yoast SEO

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.

Ecco i punti affrontati:

Questo è il risultato finale che otterrai, ovviamente è già stato modificato con il 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 di conseguenza un miglior posizionamento nei motori di ricerca.

Il motivo è molto semplice: maggiore è il tempo che un utente trascorre sul nostro sito e maggiore sarà la rilevanza che i motori di ricerca attribuiranno al medesimo.


Attivare i breadcrumbs

Attiva i breadcrumbs andando su Yoast SEO > Aspetto della ricerca > Breadcrumbs.

Abilitare i breadcrumbs di YoastSEO

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.

Qui sotto riportato il percorso in cui dovresti trovare il file single.php

public_html/wp-content/themes/IlTuoTemaPadre/single.php

Copia poi 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 breadcrumbs.

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 nominato 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.

Inoltre considera che il codice echo e la funzione di Yoast SEO devono essere aggiunti tra <?php e ?> come puoi vedere anche nell’immagine sopra.

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 anche un altra possibilità e cioè quello 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.

Home » Wordpress » Breadcrumbs Yoast SEO: Cosa sono e come implementarli

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.

Ti consiglio proprio per questo di seguire il punto precedente.


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.

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 e fare click destro.

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 un normale 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.

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 invece aggiungere i breadcrumbs solo a poche pagine o articoli? In questo caso ti converrà seguire l’ultimo step.

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.

Ancora nessun commento, aggiungine uno per primo!


Aggiungi un commento

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