Pubblicato il 26/07/14 - aggiornato il  | 47 commenti :

Condivisione del post su Facebook con miniatura giusta e snippet personalizzato.

Come personalizzare la miniatura e il testo visibile nella condivisione di una pagina su Facebook.
Ci sono vari modi per condividere un post su Facebook usando oggetti interni alla pagina che si sta visualizzando come i bottoni Mi Piace o Consiglia oppure esterni al post come estensioni del browser tipo Shareaholic che è disponibile per Chrome e per Firefox. Facebook ha reso disponibili per gli webmaster dei metatag per arricchire la condivisione oltre che con il titolo della pagina anche con lo snippet e una miniatura delle immagini che sono state rilevate.

Consideriamo il caso particolare di un post in cui non ci siano immagini o che queste non vengano rilevate da Facebook. Quando proviamo a fare la condivisione nell'Anteprima si visualizzerà come miniatura l'Intestazione del blog o addirittura una icona presente nel modello

anteprima-condivisione-facebook

Nello screenshot precedente si vede per esempio una anteprima di condivisione che come miniatura ha selezionato l'avatar del Profilo su Blogger senza altre possibilità di scelta. In questi casi particolari si può risolvere senza modificare il modello ma operando semplicemente nell'HTML del post. Conviene soprassedere provvisoriamente alla condivisione, andare su Bacheca > Post > Modifica e quindi selezionare HTML invece di Scrivi come nel seguente screenshot

modifica-post-blogger

Incolliamo questo semplice codice subito prima quello dei contenuti del post

<link href="URL_IMMAGINE" rel="image_src"></link>

dove al posto di URL_IMMAGINE sarà inserito l'indirizzo della immagine che vogliamo visualizzare nella condivisione. Successivamente si va su Aggiorna per rendere la modifica effettiva. L'articolo non varierà per nulla il suo aspetto. Apriamo adesso il tool Facebook Debugger che serve per azzerare i dati precedenti e per rilevare quelli nuovi dopo che si è fatto l'aggiornamento. Si incolla l'URL della pagina e si clicca su Debug 

Facebook-debugger

Il tool mostrerà i metatag rilevati da Facebook. Particolarmente interessante è la Share Preview

share-preview-facebook

che è l'anteprima della condivisione. Tra le miniature presenti sarà stata aggiunta anche quella della foto cha abbiamo inserito nel post e che potrà essere selezionata in fase di condivisione.

scegliere-miniatura-facebook

Questo metodo può essere usato tutte le volte che durante la condivisione su Facebook non possiamo scegliere tra nessuna miniatura che ci convince. Potremo aggiornare il post con il codice che indica a Facebook quale miniatura rilevare, usare il Facebook Debugger per controllare la correttezza della rilevazione quindi procedere nuovamente alla condivisione del post su Facebook

COME VISUALIZZARE UN PARTICOLARE SNIPPET


Se non visualizzate l'incipit del post o una descrizione dello stesso e si tratta di un post di Blogger significa che non avete abilitato le Preferenze di Ricerca. Andate quindi su Impostazioni > Preferenze di ricerca > Metatag > Descrizione > Modifica e attivate questa opzione

preferenze-di-ricerca

A questi punto quando aprite l'Editor del post, sulla sua sinistra, sarà visibile la sezione Descrizione della ricerca per inserire un riassunto di quello che è l'argomento dell'articolo

snippet-facebook-condivisuione

Si va su Completato e si Aggiorna il post. Non resta che andare su Facebook Debugger per incollare l'URL del post e effettuare il debug della pagina. Controllate adesso la Share Preview 

share-preview-facebook[4]

Oltre al titolo e alla miniatura sarà visibile anche lo snippet che avete inserito in Descrizione della ricerca. Nella condivisione su Facebook saranno quindi mostrasti la miniatura e il testo che avete scelti per rendere il link più attrattivo per gli amici che lo leggeranno.


47 commenti :

  1. Per lo snippet di sicuro, per l'immagine può darsi ;-)

    RispondiElimina
  2. A me non mi viene la descrizione della ricerca sotto la miniatura del post editor ma solo la descrizione metatag generica.

    RispondiElimina
    Risposte
    1. Nel senso la descrizione del blog e non del post? Forse hai inserito dei metatag nel modello nel modo sbagliato. Prova a leggere qui
      http://www.ideepercomputeredinternet.com/2013/03/open-graph-facebook.html

      @#

      Elimina
    2. Ok , grazie. Sempre utili i tuoi consigli. :)

      Elimina
  3. Ciao, non ho problemi a far apparire l'anteprima che voglio quando pubblico qualcosa sul mio diario. Ad esempio incollo il link della pagina Internet sullo spazio per scrivere, poi Facebook mi propone una prima immagine, io clicco sulla freccetta e scorro le immagini fino a scegliere la terza.
    Però se lo stesso link lo incollo sullo spazio per i commenti, mi sembra che l'anteprima non si possa scegliere, e cioè sei obbligato ad accettare l'immagine n. 1, e se non la vuoi l'unica alternativa è quella di rimuovere l'anteprima (quindi niente immagine). Sai se c'è una soluzione a questo? Cioè c'è il modo di scegliere un'anteprima anche quando si commenta? Grazie.

    RispondiElimina
    Risposte
    1. Facebook solo da poco tempo permette di inserire link nei commenti e probabilmente la possibilità di scegliere la miniatura ancora non è stata introdotta
      @#

      Elimina
  4. A me proprio non vuol comparire. Né la descrizione sotto il titolo né la miniatura. Solo il titolo del post e un'immagine bianca.
    Ho inserito il codice nell'html del post e poi il link in Debugger, e mi da' questo errore:Error parsing input URL, no data was cached, or no data was scraped.
    Sono sempre più convinto che dipenda dal template gratuito che ho scelto. xD

    RispondiElimina
    Risposte
    1. I modelli ufficiali di Blogger sono tutti gratuiti. Quelli degli web designer presenti in molti siti possono anche essere vecchi di 5 o 6 anni e in quel caso non sono ovviamente abilitati a queste funzionalità che invece sono state introdotte molto più recentemente.
      @#

      Elimina
  5. Eccomi qui di nuovo. Cattive notizie :-( Mi devo rimangiare quello che ho detto mesi fa in un commento a questo post, e cioè "non ho problemi a far apparire l'anteprima che voglio quando pubblico qualcosa sul mio diario".
    Oggi nell'aggiornamento di stato di Facebook ho incollato il link di un articolo del mio blog, e fra le immagini proposte non c'era quella che volevo.
    Allora ho seguito la procedura che hai suggerito, e cioè ho modificato il post: in modalità HTML ho incollato all'inizio la stringa da te indicata sostituendo a ULR_IMMAGINE il link dell'immagine che vorrei nell'anteprima (link ricavato visualizzando l'immagine dell'articolo stesso e poi cliccandovi su col tasto destro e scegliendo "copia link immagine").
    Ho aggiornato l'articolo, ne ho copiato il link e l'ho incollato nell'aggiornamento di stato di FB, ma... niente da fare, quell'immagine non la vuole proporre come anteprima!
    (NB: quando ho sostituito URL_IMMAGINE ho lasciato le virgolette, visto che non le avevi scritte in rosso. Ho fatto bene, vero?)

    RispondiElimina
    Risposte
    1. Le virgolette andavano ovviamente lasciate. Il tuo problema è comune a molti, anche a questo sito, ed è di difficile soluzione perché in qualche misura dipende dai server di Facebook che non sempre sono perfetti
      @#

      Elimina
  6. ho seguito la procedura ma l'immagine non compare. chiedo: è normale che il codice inserito e salvato comunque non si memorizza nell'HTML del post? Grazie ad ogni modo molto ben fatto il tuo post

    RispondiElimina
    Risposte
    1. Il risultato di questa operazione non dipende solo da noi ma anche dai server di Facebook. Anche al sottoscritto capita spessissimo di non poter scegliere l'immagine giusta quando condivido un post. Il codice dovrebbe rimanere nel post. Basta andare su Modifica e scegliere HTML e non Scrivi
      @#

      Elimina
  7. ho trovato soluzione all'ostico problema, e spero possa essere utile per implementare questo ottimo post di cui ti ringrazio.
    lo indico qui:
    https://drive.google.com/open?id=0B2cfozpgv5JCdzhfVC0xTDlMY0E&authuser=0

    RispondiElimina
  8. In pratica i passaggi devono essere tre:
    1- rendere la foto con la risoluzione più ampia di tutte quelle inserite nel post (larghezza superiore ai 1625 pixel cmq)
    2- inserire nell'HTML la foto con il codice da te proposto
    3- eseguire il debug del link del post e se conserva le anteprime precedenti, eseguire il debug sulle URL "scrappate" nel primo debug

    RispondiElimina
    Risposte
    1. Grazie della condivisione. Praticamente il problema più imporgante è quello della risoluzione delle foto
      @#

      Elimina
    2. fondamentalmente sì. però se uno ha problemi di vecchi post dove il debug di fb sembra fallire, facendo lo scraping una volta inserito il codice da te suggerito viene ripristinato tutto come si desidera

      Elimina
    3. Ho trovato una soluzione efficacissima e relativamente semplice su questo link (che spero non sia cliccabile altrimenti mi sarà cancellato il commento) WWW. addthis.com/academy/how-to-add-open-graph-tags-using-blogger/

      Elimina
    4. Dopo aver eseguito la procedura sull'HTML dell'header del vostro blog su Blogger (istruizioni sopra) occorre inserire nell'HTML del post il metatag dell'immagine che si desidera come anteprima inserendoci il link corrispondente. Il codice è questo:
      < meta property="og:image" content="LINK FOTO" />

      Ovviamente poi si deve aggiornare il post, e fare il debug su FB. Funziona immediatamente. Buona procedura a tutti (PS BriAn ero io ;)

      Elimina
  9. Questo commento è stato eliminato dall'autore.

    RispondiElimina
    Risposte
    1. parlando di post di blogger linkati su fb, mi pare di aver visto che hanno priorità prima quelle del post e poi quelle di altre testate del blog (sidebar copertine etc)
      Riguardo la grandezza/risoluzione, mi pare che sia esclusivamente la grandezza a vincolare (ho trovato che fb antecede quelle supueriori a 1625xYYY -non ricordo l'altezza suggerita ma si trova in rete) Non ho mai trovato indicazioni e suggerimenti riferite alle risoluzioni delle foto onestamente

      Elimina
    2. azz ho fatto casino tra grandezza e risoluzione...portate pazienza Spero cmq ci siamo capiti

      Elimina
    3. Non mi pare che esista la regola che abbiano priorità prima quelle del post e poi sidebar e copertine. Infatti io tempo fa ho inviato su Facebook un aggiornamento di stato con un mio articolo di un blog fatto con Blogger, e indovina cosa mi veniva come scelta? La testata o la figura in sidebar!! E la figura del post veniva ignorata. E siccome è accaduto più volte (non sempre), ho tolto una figura dalla sidebar, così Facebook per farmi scegliere qualche altra cosa oltre alla testata metteva come scelta la figura del post. Ecco che non ho problemi. Del resto la figura nella sidebar non era importantissima. Però avrebbe potuto esserlo, e lì sarebbe stato un problema.
      Ho detto prima che accadeva più volte ma non sempre. Forse dipendeva dal fatto che alcune volte l'immagine del post era troppo piccola.
      Hai detto "Ci siamo capiti", ma non ho capito cosa volevi correggere. (purtroppo questo sistema di commenti non ci permette la modifica mi pare di capire, vero?)

      Elimina
  10. Secondo la mia esperienza ho visto che trovare delle regole valide per tutti i siti per quello che riguarda la condivisione su Facebook è praticamente impossibile. In certi casi conta la risoluzione ma in altri no. Ho l'impressione che i server di FB facciano un po' come gli pare
    @#

    RispondiElimina
  11. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  12. buon giorno.
    domandone su come visualizzare l'incipit del post.
    io abilitatole Preferenze di Ricerca attivando l'opzione in pref di ricerca, metatag descr e modifica e correttamente quando condivido un post su facebook vedo effettivamente quello che ho inserito nella casella della descrizione della ricerca. se invece io volessi nell'anteprima su facebbok le prime righe del post che voglio condividere ??
    esiste un modo per farlo ?
    grazie

    RispondiElimina
    Risposte
    1. Me lo sono spesso chiesto anche io ma al momento non ho trovato soluzione. In alcune condivisioni si vede l'incipit e in altre la metadescrizione
      @#

      Elimina
    2. Puoi fare così: quello che vuoi che compaia nell'anteprima di FB inseriscilo provvisoriamente nel campo della descrizione della ricerca. Poi, una volta eseguita la condivisione, lo cambi. No?

      Elimina
    3. @Alemig Un po' lunga ma interessante soluzione :)
      @#

      Elimina
  13. Ciao, ma come faccio ad inserire il link se la foto é mia?

    RispondiElimina
  14. Clicca con il destro del mouse sulla foto quindi scegli Copia indirizzo immagine è incollalo nel codice al posto di URL_IMMAGINE. Ho però pubblicato altri post su come condividere correttamente le immagini su Facebook più recenti di questo.
    @#

    RispondiElimina
  15. Ciao Ernesto. Ti invito a modificare l'articolo, se hai tempo, perché... lo scenario che hai mostrato riguardo al debug non è più lo stesso!
    Fra l'altro ho appena fatto una prova di debugging, e non funziona: una volta che Facebook sa che l'immagine di anteprima del tuo post è quella, anche se modifichi l'articolo e l'immagine e fai il debug aspettando anche mezz'ora, FB rimane dell'idea che l'immagine di anteprima sia la prima che avevi messo. Risulta?

    RispondiElimina
    Risposte
    1. È difficile stare dietro a tutte le modifiche che Facebook introduce di continuo :)
      Questo è il metodo più evoluto
      http://www.ideepercomputeredinternet.com/2016/09/markup-dati-strutturati-facebook-blogger.html
      Quando si condivide su Facebook si può scegliere tra le miniature delle immagini presenti nel post anche se non sempre e solo le immagini sono delle dimensioni che piacciono a Facebook
      @#

      Elimina
  16. Ciao, ho creato una pagina Facebook per il mio blog e ho iniziato a condividere i post.
    Il primo post è andato bene (titolo e immagine giusta), i successivi no (dava una immagine presa da un altro widget del blog ma non quella del post).
    Ho provato con tutte le risoluzioni, dalle più piccole a quelle gigantesche, ma non è servito a nulla. E il debug su FB non mi pare un sistema molto pratico se devo rifarlo per ogni post che condivido.
    Non esiste una soluzione universale?

    RispondiElimina
    Risposte
    1. Il sistema più accreditato che sono riuscito a trovare è spiegato in questo post
      http://www.ideepercomputeredinternet.com/2016/09/markup-dati-strutturati-facebook-blogger.html
      ma comunque qualche problema potrebbe rimanere comunque
      @#

      Elimina
  17. Non mi si vede più la foto di anteprima quando condivido l'articolo su Facebook. cosa posso avere toccato in html per avere tale problema? mi sai dire fabrizio

    RispondiElimina
    Risposte
    1. Non lo posso sapere. Apri questa pagina
      https://developers.facebook.com/tools/debug/
      incolla l'URL del post in cui non si vede la miniautra e poi vai su Debug. Delle volte risolve e comunque ti dice quelli che sono gli errori presenti nella pagina relativi alla condivisione su Facebook
      P.S. Non mi chiamo Fabrizio :)
      @#

      Elimina
  18. Provo a fare come hai detto sperando che funzioni. Mi scusi per l'errore del nome Ernesto

    RispondiElimina
  19. Buongiorno Ernesto,
    utilizzando il tool di Facebook Debugger e inserendo il link del post da analizzare esce " Impossibile eseguire lo scraping dell'URL perché è stato bloccato" + 2 avvisi... A cosa è dovuto questo blocco?
    Grazie per l'attenzione

    RispondiElimina
    Risposte
    1. Questo URL va bene
      librielibrai.blogspot.com/2020/09/recensione-sulle-note-di-noi-due-di.html
      Gli avvisi riguardano delle proprietà mancanti. Nessuno ha tutte le proprietà, neppure io ce le ho, anche a me ne mancano due
      @#

      Elimina
    2. Grazie, ho provato con l'ultimo articolo di ieri ed esce " Impossibile eseguire lo scraping dell'URL perché è stato bloccato" è normale? Grazie ancora

      Elimina
  20. ciao Ernesto buon nuovo anno e scusa di nuovo l'invasione. Anche io Ho una domanda relativa a questo tema: volevo capire xchè su FB linkando il mio blog come anteprima , invece di darmi il banner col titolo in alto generale del blog, mi dà quella del vecchio ultimo post del 2011 (pur avendo io aggiornato con un neo post al dicembre 2020).
    Questione di cash, del fatto che devo aspettare la neo indicizzazione del blog con indirizzo cambiato dopo 10anni, o roba html?
    grazie

    RispondiElimina
    Risposte
    1. Non lo so. Però ti consiglio, prima di condividere un post su Facebook o dopo averlo fatto, di testarlo su Facebook Debugger a questo indirizzo
      https://developers.facebook.com/tools/debug/
      incollandone l'URL e andando su Debug per verificare che sia tutto OK o che ci sia qualcosa che non va.
      @#

      Elimina
    2. scusa rispondo dopo 10giorni: ho debaggato e mi dà questo avviso,

      Proprietà dedotta
      La proprietà "og:image" dovrebbe essere fornita in modo esplicito, anche se è possibile dedurre un valore da altri tag.
      Proprietà mancanti
      Mancano le seguenti proprietà necessarie: og:type, og:image, fb:app_id

      secondo te è una cosa aggiustabile via html o come mi han detto altri potrebbe dipendere dal tempo che ci vuole per indicizzare il blog?
      grazie

      Elimina
    3. Probabilmente dipende dal fatto che non hai implementato il codice SDK creato con l'applicazione specifica per il sito
      https://www.ideepercomputeredinternet.com/2016/03/facebook-metatag-open-graph-markup-blogger-template.html
      @#

      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