I metatag di Facebook da usare in Blogger per condividere titolo, descrizione e immagine.

Come inserire i markup dei Dati Strutturati nel modello di Blogger per condividere correttamente i post su Facebook mostrando Titolo, Immagine, Descrizione e link al Profilo dell'autore.

I cosiddetti dati strutturati sono da anni un vero rompicapo per tutti gli webmaster e in special modo per chi utilizza la piattaforma Blogger.  Visto che le pagine web sono analizzate dai motori di ricerca tramite i crawler, i dati strutturati servono per rilevare in modo omogeneo e corretto i principali elementi di una pagina web per mostrare nei risultati di ricerca e nelle condivisioni quello che viene chiamato rich snippet ovvero le informazioni su Titolo, Descrizione, Immagine, Autore, ecc.

Per questa ragione qualche anno fa è nato sotto impulso di Google, Yahoo e Bing il progetto Schema.org per creare uno standard valido per tutte le pagine web, per tutti i motori di ricerca e per tutti i social network. Questo progetto prevede che vengano inseriti dei markup all'interno del codice della pagina per consentire ai crawler di ottenere le informazioni in modo semplice e immediato.

I markup non riguardano solo le pagine web ma anche i software, le applicazioni, gli eventi, i film, i libri, i ristoranti, i prodotti, ecc. Google ha messo a disposizione degli utenti il Tool di Assistenza per il Markup per aiutare gli webmaster alla generazione del codice necessario. Limitandoci alle sole pagine web e alla piattaforma Blogger si devono aggiungere nel template dei metatag per motori di ricerca e social network. Ma veniamo alle dolenti note di Blogger. Usando il Test dei Dati Strutturati di Google vengono individuati almeno 7 errori nel codice di markup.

Questi errori nel BlogPosting però non dipendono dall'utente ma dal codice nativo di Blogger. Non vengono riconosciuti per esempio i tag image_url, blogId, postId che sono stati inseriti nel modello dallo stesso Blogger (cioè Google). Credo quindi che per quello che riguarda i metatag di Google di lasciar perdere perché il problema non dipende da noi e prima o poi il team di Blogger dovrà risolvere questa questione. Nel frattempo non credo proprio che Google inteso come motore di ricerca penalizzi i suoi stessi utenti che tra l'altro in molti casi gli portano reddito con la pubblicità.

OPERAZIONI PROPEDEUTICHE IN BLOGGER PER I DATI STRUTTURATI

Per rendere più proficuo l'inserimento dei dati strutturati gli utenti di Blogger devono compiere due importanti operazioni. La prima è quella di apportare una modifica al template in modo da mostrare nelle condivisioni e nei risultati di ricerca il titolo del post prima del nome del blog. Per una ragione che mi è ignota in Blogger, senza questa modifica, sia nei risultati di ricerca che nelle condivisioni si visualizzerebbe prima il nome del blog e poi il titolo del post con un gran danno in termini di CTR.

L'altra personalizzazione riguarda la Metadescrizione nei singoli post. Per attivarla occorre andare su Impostazioni -> Preferenza di ricerca -> Metatag e mettere il Sì per poi aggiungere una Descrizione del blog in 150 caratteri al massimo.  In questo modo verrà attivata anche la Descrizione della Ricerca anche nei singoli post che sarà mostrata nello snippet sotto il titolo.

Opzionalmente possiamo anche inserire la meta descrizione prima dei contenuti del post. Questa soluzione ha anche una sua rilevanza SEO visto che facendo il Test di Google sui Dati Strutturati risulta chiaro come tale Descrizione venga inserita a pieno titolo nel contenuto dell'articolo

METATAG DI FACEBOOK PER I DATI STRUTTURATI

Un discorso analogo vale anche per Facebook. All'inizio bastava inserire pochi tag per condividere correttamente i post su Facebook mentre ora è diventato tutto più complicato. Come si vede nel primo screenshot pubblicato, nel template di Blogger viene inserito il metatag

data:blog.postImageThumbnailUrl

che individua come immagine del post la sua miniatura. Utilizzando questo tag se si va su Facebook Debugger e si incolla l'URL di un post avremo un messaggio di errore riguardo alle dimensioni della immagine troppo piccola essendo una miniatura.  Vediamo come risolvere questa tematica anche se ne rimarranno altre ancora in sospeso.

1) CREARE UNA APPLICAZIONE PER FACEBOOK

Per ogni sito web dobbiamo creare una applicazione Facebook per poi ricavarne l'ID che dovrà servire per inserire il codice SDK e i metatag nel modello.

2) INSERIRE IL JAVASCRIPT NEL TEMPLATE

Si va su Modello -> Modifica HTML e, subito sotto alla riga

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

incollare questo codice

<!-- Facebook SDK Start -->
<div id='fb-root'></div>
<script>
//<![CDATA[
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '116894568356960',
      xfbml      : true,
      version    : 'v2.5'
    });
  };
  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/it_IT/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<!-- Facebook SDK End -->

dove l'ID della applicazione è colorato di rosso e dovrà essere sostituito con quello della applicazione specifica creata per il nostro sito.

3) AGGIUNTA DEI METATAG OPEN GRAPH MARKUP

In Modello -> Modifica HTML si cerca ora la riga </head> e, subito sopra, si incolla il codice

<!-- Metatag Facebook Inizio -->
<meta content='https://www.facebook.com/parsifal32' property='article:author'/>
   <meta content='parsifal32' property='fb:admins'/>
    <meta content='116894568356960' property='fb:app_id'/> 
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <meta content='article' property='og:type'/>
      <meta expr:content='data:blog.title' property='og:site_name'/>
      <meta expr:content='data:blog.pageName' property='og:title'/>     
      <meta expr:content='data:blog.metaDescription' property='og:description'/>     
      <b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta property='og:image:width' content='620'/>
<meta property='og:image:height' content='465'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAkj_n1ViUdE4CyURHj2hZuEFU5yQWU2dt5RxUyrLGB-s9WvwTcaNmxQNR9yB9Jul4Xgm3Hp7c81qwvY7jkj29uw5KH9rhF541J4y0Bgmn0mzQlRPF4BFRsaKfsN6iHv92xztQ1hkeq_k/s640-Ic42/logo800.png' property='og:image'/>
</b:if>
      <b:else/>
      <meta expr:content='data:blog.title' property='og:title'/>
      <meta content='website' property='og:type'/>
    </b:if>
    <meta expr:content='&quot;it_IT&quot;' property='og:locale'/>
    <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<!-- Metatag Facebook Fine -->

che dovrà essere personalizzato da ciascun webmaster. Nella prima riga si inserisce l'URL del Profilo Facebook dell'autore per avere il link nelle condivisioni. Nella seconda riga il nome o l'ID numerico dell'autore. Nella terza riga si incolla invece l'ID della applicazione Facebook del sito.

Un discorso a parte lo merita il tag data:blog.postImageUrl che invece di indicare la miniatura permette ai crawler di rilevare la prima immagine presente nel post. Nelle due righe successive si possono indicare anche le dimensioni (width e height) con cui siamo soliti pubblicare le immagini. I tag condizionali permettono di scegliere la immagine del logo qualora nel post non fossero presenti immagini. L'indirizzo del logo è colorato di viola. L'ultima personalizzazione riguarda la lingua prescelta per il sito in oggetto (it_IT).

Dopo aver salvato il modello potremo ripetere il Debug con Facebook Debugger per vedere se il rich snippet del post viene correttamente visualizzato

In alto vengono mostrati proprietà estranee non rilevate e più valori inseriti per la stessa proprietà. Queste problematiche dipendono in massima parte dallo stesso Blogger che come abbiamo visto nel primo screenshot inserisce dei metatag che non vengono rilevati correttamente. Se qualcuno ha trovato un codice migliore di questo lo può comunicare ai lettori e a me nei commenti.