Come inserire i microdati Blogposting nel modello di Blogger.

Come aggiornare il template di Blogger inserendo i Microdati BlogPosting di Schema.org per avere snippet più ricchi nei risultati delle ricerche di Google.

Nell'articolo sull'Evidenziatore di dati degli Strumenti per Webmaster ho accennato ai Rich Snippet e ai Dati Strutturati introdotti da Google per arricchire i risultati di ricerca. Gli snippet sono formati da poche righe visualizzate sotto alle ricerche con lo scopo di dare agli utenti delle informazioni aggiuntive e del motivo per cui tali link risultano pertinenti rispetto alla query ricercata. Bisogna fare in modo che Google comprenda i contenuti delle nostre pagine in modo da creare dei rich snippet che possano invogliare gli utenti a cliccare sul nostro risultato di ricerca piuttosto che su un altro.

In fatto di Dati Strutturati, Google supporta i Microdati, i Microformati e gli RDFa ma solo i Microdati sono consigliati. I microdati HTML5 servono appunto per descrivere un tipo specifico di informazioni come per esempio recensioni o notizie su persone o eventi. I microdati utilizzano degli attributi nei tag, <div> o <span> quasi sempre, per assegnare nomi brevi a elementi o a proprietà. Le proprietà sono dei tag di un particolare elemento. Per esempio un Elemento Evento ha come Proprietà il Luogo, l'Ora di Inizio, la Data e la Categoria. Si utilizzano i Microdati inserendo dei tag nel codice sorgente.

Se si mette dentro un <div> il tag itemscope si indica a Google che il contenuto racchiuso tra <div> e </div> è un Elemento. L'altro tag itemprop="name" denota un nome; itemtype="http://data-vocabulary.org/Person indica invece che quel dato elemento è una persona. Vengono usate a tale scopo le proprietà della sezione BlogPosting di Schema.org per arricchire il codice con questi microdati in modo che Google possa rilevare più facilmente gli snippet pertinenti.

COME INSERIRE I MICRODATI SU BLOGGER

I microdati del tipo BlogPosting sono stati già inseriti nei modelli di Blogger più recenti. Quindi se utilizzate un template ufficiale di Blogger solo da qualche settimana avrete questi tag già nel codice del modello. Evidentemente ci sono però utenti di Blogger che usano un modello di uno o due anni fa, che hanno modificato con pazienza e che non hanno questi microdati. Senza considerare i template scaricati da internet che oltre a non avere i microdati sono spesso mancanti di molte altre cose.

Si può fare una comparazione tra il codice del nostro template e quello magari di un blog di prova creato proprio oggi per rilevare i tag mancanti in modo da aggiungerli. Il nuovo Editor HTML di Blogger in un certo senso aiuta perché suddivide le aree del codice in sezioni in modo da rendere questa operazione meno difficoltosa. Ho fatto questo lavoro per il modello Simple (o Semplice) e non escludo che le modifiche dei tag possano andar bene anche per altri modelli.

Cosa fondamentale è quella di salvare il template prima di procedere a ogni modifica. Dopo essere andati su Modello > Modifica HTML si clicca su Vai al widget > Blog1. Si clicca sulla freccetta nera sulla sinistra per collassare il codice del widget Blog1 e si apre con la solita freccetta la sezione

<b:includable id='post' var='post'>   in questo modo

In sostanza bisogna trovare i tag dei microdati nel nuovo template per aggiungerli a quello vecchio. Il primo blocco che viene trovato è il seguente

<div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting' >   

dove le stringhe da aggiungere sono state colorate di rosso. Successivamente si aggiungono anche le parti in rosso alle seguenti righe:

<h3 class='post-title entry-title' itemprop='name'>

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>

Si va quindi nella sezione

<b:includable id='mobile-post' var='post'>

e si procede nello stesso modo con i seguenti blocchi di codice

<div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>  
       
<h3 class='post-title entry-title' itemprop='name'>

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>

<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                      <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>                      <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                        <span itemprop='name'><data:post.author/></span>
                      </a>
                    </span>
                  <b:else/>
                    <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                      <span itemprop='name'><data:post.author/></span>
                    </span>
                  </b:if>
                </b:if>
              </span>

<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'>

Infine si clicca sulla sezione

<b:includable id='mobile-index-post' var='post'>

e si apporta la seguente modifica

<h3 class='mobile-index-title entry-title' itemprop='name'>

Si salva il template. Dopo un po' potrete andare sugli Strumenti per Webmaster per verificare su Aspetto nella ricerca > Dati strutturati se sono stati rilevati i markup BlogPosting da Schema.org 

Una verifica immediata può però essere fatta usando lo Strumento dei dati strutturati e incollando l'URL del vostro dominio o di una qualsiasi pagina del sito per poi cliccare su Anteprima

Scorrete la pagina fino a trovare type: schema.org/blogposting per verificare il corretto funzionamento del codice che è stato appena inserito.

MARKUP BLOGPOSTING PER ALTRI MODELLI DI BLOGGER

Se avete un template ufficiale di Blogger un po' datato, vale a dire che abbia almeno sei mesi, e che non sia il Modello Semplice potete ugualmente controllare se abbia o meno i Microdati BlogPosting e nel caso provvedere a inserirli. Dopo aver salvato il template, create un blog di prova con un modello che sia lo stesso di quello che state usando. Parlo come modello di partenza e non occorre che abbia ovviamente tutti i widget e le personalizzazioni che avete inserito nel frattempo.

Andate su Modello > Modifica HTML del blog di prova e, con l'ausilio di Ctrl+F, cercate tutte le occorrenze di itemprop, itemscope e itemtype. Estraete i blocchi di codice in cui sono inserite quindi andate su Modello > Modifica HTML del vostro blog e controllate tali blocchi nel template.

Se il modello è di qualche mese o qualche anno fa non saranno presenti i tag di markup di BlogPosting che quindi dovranno essere incollati nella stessa posizione del blog di prova. Si salva il modello e si controlla con il Tool per i Dati Strutturati che non si siano fatti errori denotati da messaggi in rosso dopo aver cliccato su Anteprima.