Pubblicato il 07/11/16 - aggiornato il  | 7 commenti :

Come aggiungere i Dati Strutturati BreadCrumbs a Blogger

Come aggiungere a Blogger i BreadCrumbs dei Dati Strutturati per poi testarli nello strumento di Google e mostrarli ai lettori come link di navigazione.
Nel post precedente abbiamo visto come risolvere, in blog su piattaforma Blogger, quando con il Test dei Dati Strutturati di Google fossero emersi degli Errori in quelli BlogPosting. In questo articolo vedremo come aggiungere i Dati Strutturati BreadCrumbs (Briciole di Pane o Pan Grattato) che contrariamente a quelli HATOM o BlogPosting risultano anche visibili nel layout del sito.

Hanno quindi la doppia funzione di mostrare ai motori di ricerca e ai crawler dei social network i dati della pagina seguendo un vocabolario condiviso e ai lettori quello che si può definire il Percorso o il Path della pagina che si è aperta. I BreadCrumbs verranno rilevati anche dal Test dei Dati Strutturati di Blogger che ne mostreranno eventuali errori di inserimento.

Il percorso in un semplice post sarà dato dalla Home, dalla Etichetta di riferimento e dal Titolo del post che si è aperto. In questo modo anche il lettore di Blogger avrà a disposizione dei link di navigazione. Come vedremo si può decidere di mostrare solo una etichetta oppure tutte le etichette. Nel primo caso i BreadCrumbs avranno questo aspetto

breadcrumbs  

con il percorso dell'articolo posizionato sopra alla data. Con più etichette diventerà così

breadcrumbs-etichette-multiple

Il lettore cliccando su Home andrà alla Homepage mentre cliccando su una etichetta aprirà la pagina corrispondente che come certo saprete ha questo URL generico

http://nomeblog.blogspot.com/search/label/etichetta

Dopo aver salvato il template si va su Modello -> Modifica HTML e si cerca la riga

<div class='blog-posts hfeed'>

quindi, subito sotto a questa, si incolla quest'altra riga

<b:include data='posts' name='breadcrumb'/>


Premetto che ci sono due righe colorate di blu come la precedente. La riga colorata di rosso va inserita sotto quella della sezione desktop che è la seconda e che si trova qualche riga sotto alla sezione che inizia con <b:includable id='main' var='top'> mentre quella per il mobile si trova in quella che inizia con <b:includable id='mobile-main' var='top'>.

sezione-desktop-blogger

Va da sé che se volete aggiungere i BreadCrumbs anche nella sezione mobile dovete ripetere il procedimento anche per questa seconda riga. Scorrendo il codice verso l'alto si troverà la riga

<b:includable id='main' var='top'>    (Leggi aggiornamento a fondo pagina)

che dovrebbe essere unica. Subito sopra a questa riga si incolla il seguente codice

<!-- BreadCrumbs Inizio Codice -->
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb per il post -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
» <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>
</b:if>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb etichette, archivi e ricerca -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archivio per <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Tutti i post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Post con etichetta <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>             
<!-- BreadCrumbs Fine Codice -->

Adesso non resta che creare un CSS per l'aspetto del BreadCrumbs. Si cerca la sezione <b:skin> quindi si clicca sulla freccetta nera posta alla sua sinistra e si cerca la riga ]]></b:skin> quindi, subito sopra a questa, si incolla quest'altro codice

/* BreadCrumbs Inizio */
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:90%;
line-height: 1.5em;
}
/* BreadCrumbs Fine */

Si salva il modello.






PERSONALIZZAZIONI DEI BREADCRUMBS


Per mostrare tutte le etichette vanno cancellate le due righe evidenziate di giallo. Le espressioni colorate di blu possono essere personalizzate così come il simbolo che separa gli elementi del percorso ( » ). I CSS sono veramente minimi e possono essere integrati da stile del bordo, colori di testo o di sfondo. I 4 valori del padding determinano le distanze interne a partire dall'alto per poi andare in senso orario mentre i 4 valori del margin determinano le distanze esterne con la stessa modalità. Il font-size serve per la dimensione dei caratteri in percentuale e line-height è l'altezza della interlinea.

breadcrumbs-etichetta-archivio

I BreadCrumbs per le Pagine Statiche, di Etichetta, di Archivio o di Ricerca sono più semplici. Quando si fa il Test sui Dati Strutturati saranno visibili i BreadCrumbs senza errori

breadcrumbs-test

Cliccando su BreadCrumbs nel Test appena fatto si visualizzerà quello della Homepage e quelli di tutte le etichette presenti con Indirizzo e nome della etichetta. Non è ancora chiaro se sia o meno utile dal punto di vista SEO inserire questi Dati Strutturati anche nella versione mobile. In questo caso dovremo aggiungere un nuovo CSS per il mobile con classe .mobile .breadcrumbs { ... }.

Aggiornamento: Invece di posizionare il secondo codice sopra la riga indicata è più opportuno incollarlo sopra a quest'altra riga <b:includable id='comment-form' var='post'> .

Aggiornamento importante: I markup data-vocabulary.org sono stati deprecati a partire dal 21 Gennaio 2020. Per aggiornarli o per inserire quelli schema.org seguite questo tutorial


7 commenti :

  1. è accertato che inserire tutti i tag visibili nei breadcrumbs (e quindi non solo l'ultimo) sia dannoso per quanto riguarda l'indicizzazione dell'articolo? Ci sono siti importanti non appartenenti a Blogger che lo fanno e Google gli mostra due breadcrumb nei risultati di ricerca, mentre gli altri non appaiono. Più o meno questo è un esempio di come si vedrebbe:
    https://www.nomesito.com › ... › primo breadcrumb › secondo breadcrumb

    E infine mi chiedo, ma non era meglio mostrare la keyword nell'url (sui risultati di ricerca Google) invece di mostrare i breadcrumb che spesso con la keyword principale hanno ben poco?

    RispondiElimina
    Risposte
    1. Ovviamente non so come interpreta i breadcrumbs l'algoritmo di Google. Il concetto delle "briciole di pane" è quello di conoscere la posizione della pagina nel contesto globale del sito. Su Wordpress ci sono le categorie madri e quelle figlie. Si possono quindi creare dei breadcrumbs del tipo sport -> motori -> auto -> Formula 1. L'insieme dei post con le categorie figlie è contenuto nell'insieme dei post della categoria madre gerarchicamente più in alto. Su Blogger se mettiamo due o più etichette non c'è rapporto tra gli insiemi dei post e quindi il breadcrumbs non ha senso. P.e. in questo post ci sono le etichette blogger , google , modello , seo con raccolte di post assolutamente indipendenti tra di loro. Penso quindi che la scelta di una sola etichetta sia quella logicamente più giusta per Blogger perché i tag sono senza gerarchia. Personalmente cerco di usare al massimo 2 label e di inserire la etichetta più pertinente come ultima in ordine alfabetico ma non sempre mi riesce. Naturalmente non solo l'oracolo di Delfi e si tratta solo della mia opinione.
      @#

      Elimina
  2. Per il tema "Emporio" c'è modo di inserirli?

    RispondiElimina
    Risposte
    1. Non lo so perché i temi responsive hanno un codice diverso da quello dei modelli precedenti. Effettua una analisi con lo strumento di test. Potrebbero già esserci. Non mi sono più occupato di questi modelli perché ciascuno ha un codice diverso e quindi bisognerebbe scrivere post per ciascuno di essi
      @#

      Elimina
    2. Con lo strumento di analisi effettivamente non ci sono, grazie comunque per la disponibilità

      Elimina
  3. Complimenti per l'articolo.
    Ho notato che l'ordinamento è alfabetico e non segue una gerarchia, come si potrebbe modificare il codice perchè segua una gerarchia specifica tipo Home>>Giardino>>Alberi ?
    Grazie

    RispondiElimina
    Risposte
    1. Non si può fare. In Blogger le etichette sono equipollenti e ciascuna vale quanto l'altra. In Wordpress ci sono le categorie madri e figlie e si possono creare gerarchie, in Blogger non è possibile
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy