Come mostrare la meta descrizione di Blogger prima del contenuto dell'articolo.

Come mostrare la metadescrizione della ricerca nel contenuto dei post di Blogger subito sotto al titolo nella versione desktop e/o mobile.

Una delle più importanti funzionalità a livello di SEO aggiunte da Blogger è stata indubbiamente quella organizzata nella sezione delle Preferenze di Ricerca che si trova in Bacheca -> Impostazioni. Si possono personalizzare le pagine non trovate, modificare il file robots.txt e creare dei reindirizzamenti 301 all'interno dello stesso blog.

La funzione più importante a mio parere è però quella della metadescrizione che può essere inserita in ciascun post che si pubblica o che si è già pubblicato. In questo modo i motori di ricerca ma anche i social network potranno rilevare tale descrizione e inserirla come snippet sotto il titolo del post nei risultati di ricerca o nelle condivisioni via Facebook. 

COME ABILITARE LA METADESCRIZIONE

Se ancora non avete abilitato questa importante opzione andate su Bacheca -> Impostazioni -> Preferenze di Ricerca -> Metatag -> Descrizione -> Modifica

Si mette la spunta sul Sì quindi si digita una descrizione degli argomenti trattati sul sito fino a un massimo di 150 caratteri quindi si va su Salva Modifiche. Tale descrizione è relativa a tutto il blog e non a un singolo articolo. Infatti in Blogger ci sono ben tre tipologie di Descrizione. Attivando tale opzione verrà mostrato nell'Editor sotto Impostazioni Post la Descrizione della Ricerca

In tale campo potremo digitare il sommario del tema trattato nel post in oggetto. Si va su Completato quando si è terminato di digitare. La Descrizione delle Ricerca può anche essere modificata cliccandoci sopra. È consigliabile digitare non più di 150 caratteri visto che quelli eccedenti non saranno mostrati da Google nei risultati di ricerca.

COME MOSTRARE LA DESCRIZONE DI RICERCA NEI POST

Tale descrizione non sarà visibile dal lettore che apre l'articolo ma sarà presente solo nel codice sorgente. Utilizzando i Tag dei dati per il layout di Blogger si può mostrare tale descrizione anche all'interno del post magari come riassunto del post stesso in una posizione simile a quella che ha il Cappello nel layout dei quotidiani cartacei. In sostanza vogliamo ottenere questo risultato

Le metadescrizioni verranno aggiunte automaticamente con una semplice modifica del modello. Dopo aver salvato il template si va su Modello -> Modifica HTML e si cerca la sezione <b:skin>. Si clicca sulla freccetta nera posta a sinistra per visualizzare tutto il codice della sezione quindi con Ctrl+F si cerca la riga ]]></b:skin> e, subito sopra a questa, si incolla questo codice

/* Snippet Descrizione */
.ipcei-snippet {
clear: both;
float: none;
margin: 10px;
padding: 5px;
text-align:center;
border: dotted 2px #F95B5B;
background: #e1fbf8;
border-radius:8px;
}
span.ipcei-summary {
color: #393939;
font: italic 14px Georgia;
}

Successivamente si cerca la riga

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

che indica l'inizio della versione desktop del blog. Si scorre il codice verso il basso fino a che non si trova la riga   <data:post.body/> che è il tag del contenuto del post. Se si vuole mostrare la metadescrizione sopra al contenuto del post si incolla subito sopra a tale riga questo codice

 <b:if cond='data:blog.pageType == "item"'>
 <b:if cond='data:blog.metaDescription'>
<div class='ipcei-snippet'>
<span class='ipcei-summary' itemprop='description'>
<data:blog.metaDescription/>
</span></div>
</b:if>
</b:if>

Si salva il modello. Se avete un blog da molti anni è possibile che alcuni articoli non abbiano la metadescrizione e i due tag condizionali evidenziati di giallo servono proprio per non mostrare nulla nei post senza metadescrizione che altrimenti avrebbero questo aspetto

che comunque non è neppure tanto male. Chi preferisce tale aspetto nei post senza metadescrizione può togliere i due tag evidenziati di giallo. I due tag evidenziati di verde servono invece per mostrare la metadescrizione solo nei post e non nella homepage o pagine di etichette. La riga evidenziata di beige è invece il tag che rappresenta la meta descrizione mostrandola prima del contenuto.  

PERSONALIZZAZIONE DELLA METADESCRIZIONE

Ho colorato di rosso i parametri più importanti da personalizzare per adattare l'aspetto e i colori della metadescrizione a quelli del nostro sito. Lo stile del bordo è punteggiato dello spessore di 2 pixel mentre il contenitore ha un arrotondamento di 8 pixel con sfondo di colore #e1fbf8;. Questo come gli altri codici dei colori possono essere modificati a piacere. Il testo della metadescrizione è centrato (tag center), in corsivo (tag italic) e con Georgia come famiglia di font da 14 pixel di dimensione. Ricordo anche che clear: both; serve per non avere altri elementi né a destra né a sinistra della metadescrizione e che i parametri margin e padding determinano rispettivamente le distanze esterne e interne del contenitore.

MOSTRARE LA METADESCRIZIONE ANCHE NELLA VERSIONE MOBILE DEI POST

Se si volesse mostrare la metadescrizione anche nella versione mobile si cerca nel modello la riga

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

e si scorre il codice verso il basso fino a che si trova il tag <data:post.body/> che indica il posizionamento del contenuto del post. Per mostrare la metadescrizione sopra al contenuto si incolla il secondo codice anche subito sopra a tale riga quindi si salva il modello.  

Naturalmente si può mostrare la metadescrizione solo nei dispositivi mobili e non in quelli desktop incollando il secondo codice solo nella sezione per il mobile. I più bravi possono creare anche dei CSS diversi (p.e ipcei-snippet, ipcei-snippet-m, ipcei-summary, ipcei-summary-m) per creare due codici distinti per mostrare la metadescrizione di aspetto diverso da desktop e mobile.

Aggiornamento: Ho aggiunto il tag itemprop='description' per attivare lo Schema.org.