Pubblicato il 19/09/16 - aggiornato il  | 11 commenti :

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.

dati-strutturati-blogger

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

metadescrizione-blogger






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

condivisione-facebook

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.


11 commenti :

  1. Perché non mi viene il titolo del post su fb debugger ma solo la scritta title ?
    Anche se poi prima di postarlo sulla pagina fb mi da la possibilità di modificare sia titolo che descrizione.

    RispondiElimina
    Risposte
    1. Il tuo blog è questo?
      http://ciakmovieworld.blogspot.it/2016/09/alla-ricerca-di-dory-estate-addosso-trafficanti-film.html
      Se è questo la condivisione su FB funziona. Lascia stare il debugger che perfetto non lo è mai
      @#

      Elimina
  2. Perché, nonostante io voglia condividere un articolo di Blogger con più immagini, FB me le fa comparire ma mi genera un'anteprima solo con la prima?

    RispondiElimina
    Risposte
    1. È un problema comune. Solo incollando l'URL nel modulo di Facebook A cosa stai pensando ...? in taluni casi si riesce a scegliere la foto dell'anteprima (tra due)
      @#

      Elimina
  3. Ciao, ho seguito alla lettera i tuoi suggerimenti, ma quando pubblico su facebook non si vede la foto del mio post ma quella del mio logo. Se cambio foto perde il link di collegamento perche' fa vedere la foto ingrandita. Hai per caso un suggerimento da darmi.
    Ti ringrazio
    Ciao.

    RispondiElimina
    Risposte
    1. Probabilmente dipende dal fatto che la foto non l'hai inserita come intestazione del blog ma compare sotto un testo, oltre che sotto il menù, ma questo non sarebbe un problema. Facebook quindi la rileva come prima foto del post e la usa come miniatura (ipotesi)
      @#

      Elimina
  4. Perfetto ora funziona avevo inserito la foto del logo come immagine come pensavi tu.
    Grazie mille.

    RispondiElimina
  5. Ciao Ernesto! :-) Una cosa curiosa: ho fatto un sacco di prove possibili, e con facebook tuto a posto. Whatsapp pero' in pratica.... non legge i tag condizionali :-o
    per uno strano mistero (quei tag che blogger "crea" in automatico) , gli articoli (post) di blogger vengono visti come si deve nelle anteprime, ma per l'homa page non c è verso. La home vuol per forza non un "data:blog.postImageUrl" ma invece vuole per forza un indirizzo di immagine preciso. Pur se messo in tag condizionali B... b if .... else... non legge niente.
    Sai qualcosa? Quanta roba!
    Grazie sempre per tutto il tuo lavoro! :-)

    RispondiElimina
    Risposte
    1. Non ti so dire nulla perché non ho mai provato a condividere la Home in WhatsApp. I metatag sono pensati soprattutto per condividere le singole pagine e non tutto il sito
      @#

      Elimina
  6. Salve a tutti !
    Ho bisogno di una risposta da un esperto: è possibile dalla pagine sorgente di Facebook capire con una buona certezza cosa ha fatto un utente? mi spiego: nella pagine sorgente di un utente che non è tra i miei amici ho trovato il link della mia pagina girato a una terza persona. Non ne ho la certezza perchè non sono un programmatore. Qualcuno mi puo' aiutare? si puo' affermare con una alta percentuale anche 80% che è avvenuto questo passaggio?
    Grazie mille! Aspetto una risposta.
    Saluti
    Sabrina

    RispondiElimina
    Risposte
    1. Passare un link a un'altra persona è cosa semplicissima. Ci si clicca sopra con il destro del mouse e si va su Copia indirizzo link per poi inviarlo a chi ci pare. Non si può fare nulla per evitarlo. Anzi questa è proprio una delle ragioni del successo di Facebook in cui si possono condividere post delle altre persone.
      @#

      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