Breadcrumb

Aggiungi un percorso breadcrumb alle tue pagine, controlla dove appare e mantieni allineato il percorso visibile con lo schema breadcrumb.

Panoramica

Breadcrumb aiuta i visitatori a capire dove si trova la pagina corrente nella struttura del sito e offre ai motori di ricerca segnali più chiari sulla gerarchia.

Percorso amministrazione: Airygen SEO -> Impostazioni -> Breadcrumb

Questo modulo è particolarmente utile nei siti con pagine padre, archivi di categoria, risultati di ricerca o percorsi di contenuto profondi che gli utenti dovrebbero poter risalire facilmente.

Metodi di output

Breadcrumb supporta sia il posizionamento manuale sia l’inserimento automatico nel contenuto.

Output manuale

Attiva Abilita output manuale breadcrumb quando vuoi decidere tu dove mostrare il percorso.

Usa Funzione template quando vuoi inserire i breadcrumb direttamente nel template del tema.
Usa Shortcode quando vuoi inserire i breadcrumb nel contenuto del post, in un blocco shortcode o in un’altra area che accetta shortcode.
Usa Blocco quando vuoi posizionare visivamente i breadcrumb nell’editor a blocchi.

Funzione template:

<?php if ( function_exists( 'airygen_the_breadcrumbs' ) ) { airygen_the_breadcrumbs(); } ?>

Shortcode:

[airygen_breadcrumbs]

Blocco:

<!-- wp:airygen/breadcrumb /-->

Inserimento automatico

Attiva Abilita iniezione automatica breadcrumb quando vuoi che Airygen SEO inserisca automaticamente il percorso nell’area principale del contenuto.

Posizione inserimento ti permette di scegliere Prima del contenuto oppure Dopo il contenuto.
L’inserimento automatico è utile quando vuoi mantenere la stessa posizione dei breadcrumb su molti articoli.
L’output manuale è più adatto quando hai bisogno di un controllo preciso sulla posizione in un template o in un layout personalizzato.

Se attivi insieme Abilita output manuale breadcrumb e Abilita iniezione automatica breadcrumb, controlla attentamente il frontend live per evitare che il percorso appaia due volte.

Impostazioni

La pagina include Impostazioni, Layout e Anteprima.

Scheda Impostazioni

Usa questa scheda per decidere come viene renderizzato il percorso e quali elementi devono apparire nella catena breadcrumb.

Controlli di output

Abilita output manuale breadcrumb rende disponibili gli snippet Funzione template, Shortcode e Blocco per visualizzare il percorso.
Abilita iniezione automatica breadcrumb inserisce i breadcrumb nel contenuto del post in base alla posizione scelta.
Posizione inserimento controlla se l’output automatico appare Prima del contenuto oppure Dopo il contenuto.

Gerarchia

Questi controlli definiscono quanta struttura viene mostrata nella catena breadcrumb.

Mostra link home avvia il percorso con l’etichetta e l’URL della homepage.
Mostra link blog negli archivi inserisce la pagina articoli prima degli elementi archivio quando il sito usa una pagina blog statica.
Mostra pagine antenate aggiunge le pagine padre per i tipi di contenuto gerarchici.
Nascondi genitori tassonomia rimuove i termini padre dai percorsi di categoria e tassonomia quando vuoi un tracciato più compatto.
Mostra pagina corrente include la pagina corrente come ultimo elemento del breadcrumb e influisce anche sull’elenco breadcrumb JSON-LD.
Mostra paginazione aggiunge il numero della pagina corrente negli archivi paginati.
Separatore definisce il simbolo mostrato tra gli elementi breadcrumb.
Prefisso aggiunge un testo prima del percorso, ad esempio una breve etichetta come “Sei qui”.

Etichette

Usa questi campi per adattare il testo dei breadcrumb al tono del tuo sito.

Etichetta home cambia il testo usato per il breadcrumb della homepage.
Etichetta archivio cambia il testo usato nelle viste archivio.
Etichetta risultati di ricerca cambia il testo mostrato nella pagina dei risultati di ricerca.
Etichetta 404 cambia il testo mostrato nelle pagine non trovate.

Scheda Layout

Usa questa scheda per stilizzare il contenitore dei breadcrumb e il testo del percorso.

Contenitore

Larghezza bordo modifica lo spessore del bordo del contenitore dei breadcrumb.
Colore bordo modifica il colore del bordo.
Padding modifica lo spazio interno attorno al percorso.
Colore di sfondo del contenitore modifica lo sfondo dietro i breadcrumb.

Traccia

Dimensione carattere modifica la dimensione del testo dei breadcrumb.
Colore testo modifica il colore del testo non cliccabile.
Colore link modifica il colore degli elementi breadcrumb collegati.
Sottolinea link attiva o disattiva la sottolineatura dei link.

Scheda Anteprima

Usa Anteprima per controllare rapidamente come le impostazioni di stile influenzano un percorso di esempio prima di salvare.

Il selettore dispositivo supporta Laptop, Tablet e Cellulare.
L’area di anteprima mostra un esempio semplificato del percorso breadcrumb con le impostazioni correnti.
La schermata include anche Esempio HTML e CSS iniettato per aiutarti a capire la struttura di esempio mostrata.

Come si usa

Apri Airygen SEO -> Impostazioni -> Breadcrumb.
Nella scheda Impostazioni, decidi se vuoi usare Abilita output manuale breadcrumb, Abilita iniezione automatica breadcrumb oppure un solo metodo principale.
Se vuoi inserire i breadcrumb nel tema, attiva Abilita output manuale breadcrumb e copia lo snippet Funzione template nel punto del template in cui deve apparire il percorso.
Se vuoi inserirli dal contenuto o dall’editor, lascia attivo Abilita output manuale breadcrumb e aggiungi Shortcode oppure Blocco nell’area del contenuto in cui il percorso deve comparire.
Se preferisci il posizionamento automatico, attiva Abilita iniezione automatica breadcrumb e scegli in Posizione inserimento se visualizzarlo Prima del contenuto oppure Dopo il contenuto.
Nella sezione Gerarchia, scegli se mostrare il link home, il link blog negli archivi, le pagine antenate, la pagina corrente e i dettagli di paginazione.
Imposta un Separatore leggibile e, se serve, un Prefisso che si adatti al tono del tuo sito.
Nella sezione Etichette, personalizza il testo per home, archivi, risultati di ricerca e pagine 404.
Apri Layout e regola bordo, padding, colori del contenitore e stile del testo per armonizzare i breadcrumb con il tema attivo.
Apri Anteprima, passa tra Laptop, Tablet e Cellulare e controlla il percorso di esempio prima di salvare.
Salva le impostazioni e testa il frontend live su un articolo, una pagina archivio, una pagina di risultati di ricerca e una pagina 404.

Controlla questi elementi dopo il salvataggio:

Il percorso breadcrumb appare una sola volta in ogni posizione prevista.
Il percorso visibile corrisponde alla gerarchia che vuoi mostrare agli utenti.
La pagina corrente appare nel percorso solo quando Mostra pagina corrente è attivo.
Lo stile live resta corretto anche dopo il caricamento del CSS del tema.

Anteprima e output reale

La scheda Anteprima mostra una rappresentazione semplificata del percorso breadcrumb usando le impostazioni di stile correnti.

L’anteprima include il selettore dispositivo Laptop, Tablet e Cellulare.
L’anteprima riflette le impostazioni correnti di bordo, spaziatura, colore e testo.
La schermata mostra anche Esempio HTML e CSS iniettato, così puoi rivedere la struttura di esempio usata nella preview.

Il sito live può comunque apparire diverso dall’anteprima.

Il percorso reale dipende dal tipo di pagina effettivo, dalla struttura delle pagine antenate, dal percorso della tassonomia e dal contesto di ricerca o 404.
L’aspetto finale può ancora essere influenzato dal tema attivo, dal CSS personalizzato e dal layout circostante della pagina.
Se usi insieme output manuale e inserimento automatico, la pagina live può mostrare breadcrumb duplicati anche se l’anteprima appare pulita.

Dopo il salvataggio, controlla un articolo reale, un archivio reale, una pagina di risultati di ricerca e una pagina 404, così puoi confermare sia il percorso visibile sia il comportamento dello schema nel frontend.

Vantaggi SEO

I breadcrumb rendono più facile per i motori di ricerca capire la gerarchia delle pagine e aiutano i visitatori a risalire dai contenuti profondi verso sezioni più ampie senza affidarsi solo al pulsante indietro del browser.

Rendono inoltre più semplici da esplorare le pagine d’ingresso dalla ricerca, soprattutto nei siti con alberi di categorie, viste archivio e percorsi di contenuto multilivello.

Casi d’uso

Editori con strutture tematiche a più livelli

Prima: Un editore ha categorie, sottocategorie e lunghe serie di articoli, ma i lettori non hanno un percorso chiaro per tornare alle sezioni più ampie.

Dopo: Breadcrumb mostra il percorso verso quelle sezioni, così le relazioni tra gli articoli diventano più facili da capire e da seguire.

Siti WooCommerce o cataloghi con raccolte profonde

Prima: Un visitatore arriva da Google su una pagina prodotto o categoria molto profonda e non capisce subito come quella pagina si inserisce nel catalogo.

Dopo: Breadcrumb mantiene visibile il percorso di categoria, così il visitatore può salire verso una raccolta più ampia senza ricominciare da capo.

Agenzie che vogliono standardizzare la struttura tra siti clienti

Prima: Ogni sito gestisce i breadcrumb in modo diverso, rendendo più difficile mantenere coerenti navigazione e schema.

Dopo: Breadcrumb offre un punto unico da cui controllare posizione, etichette e layout, lasciando comunque la possibilità di scegliere tra output manuale e inserimento automatico per ogni sito.

Domande frequenti

Dovrei usare l’output manuale o l’inserimento automatico?

Usa l’output manuale quando hai bisogno di una posizione precisa in un template o in un’area specifica del contenuto. Usa l’inserimento automatico quando vuoi che il percorso venga mostrato in una posizione coerente su molti articoli.

Cosa devo fare se i breadcrumb compaiono due volte?

Controlla se hai attivato Abilita iniezione automatica breadcrumb e hai anche inserito Shortcode, Blocco o Funzione template nella stessa pagina. Mantieni solo il metodo di output che vuoi davvero usare in quella posizione.

Perché l’anteprima non corrisponde esattamente alla pagina live?

L’anteprima è una rappresentazione semplificata delle impostazioni di stile. L’output reale dipende ancora dalla gerarchia effettiva della pagina, dalla query corrente e dal CSS del tuo tema.