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

  

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

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

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.

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

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.