Come inserire i meta tag Open Graph di Facebook e fare il debug delle singole pagine per migliorare la loro condivisione con la corretta immagine e la giusta descrizione.
La corretta condivisione di URL, immagini e contenuti su Facebook è un tema molte sentito da chi ha un blog su Blogger e non riesce a far acquisire perfettamente la descrizione o la giusta immagine nella finestra popup che si apre quando si clicca su un bottone Facebook prima di postare nel nostro stream. A seguito di un commento su un post relativo a una barra per bottoni sociali e alla discussione che ne è derivata mi sono riproposto di fare un po' di chiarezza su questo argomento.
Facebook ha introdotto Open Graph Protocol per permettere agli webmaster di integrare nelle proprie pagine dei particolari tag per facilitarne la condivisione. Mi sono già occupato di come inserire i tag Open Graph su Blogger. Oltre a questi è anche possibile incollare una volta per tutte il file javascript per non doverlo fare tutte le volte che si installa il bottone del Mi Piace, il Like Box o qualche altro gadget collegato a Facebook. Ricordo che è anche opportuno creare una applicazione per poi poterne inserire l'ID nel modello. All'atto pratico occorre andare su Modello > Modifica HTML > Procedi e cercare la riga </head> quindi, subito sopra, incollare questo codice
<!-- Facebook Open Graph Start -->
<meta content='parsifal32' property='fb:admins'/>
<meta content='362600930477422' property='fb:app_id'/>
<b:if cond='data:blog.pageType == "item"'>
<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'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMmSrT_AUyUHphx3YpDaMBRUjRBdwx40arwG3UesMwloeUFdcVtSOdRSSRLxOvVnTIFNRye5M4bp1w8gdPle9zbFw328YeGa8Yv0_KpnjZyPfu4CLfeNAFxx18BMp86zB1dSnIy2ixnsM/s160/logo-ipcei.jpg' 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='"it_IT"' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<!-- Facebook Open Graph End -->
<meta content='parsifal32' property='fb:admins'/>
<meta content='362600930477422' property='fb:app_id'/>
<b:if cond='data:blog.pageType == "item"'>
<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'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMmSrT_AUyUHphx3YpDaMBRUjRBdwx40arwG3UesMwloeUFdcVtSOdRSSRLxOvVnTIFNRye5M4bp1w8gdPle9zbFw328YeGa8Yv0_KpnjZyPfu4CLfeNAFxx18BMp86zB1dSnIy2ixnsM/s160/logo-ipcei.jpg' 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='"it_IT"' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<!-- Facebook Open Graph End -->
Ho lasciato i dati del mio modello proprio per rendere più semplice la loro personalizzazione. In sostanza basta sostituire i dati in rosso con il nostro nome utente su Facebook, che si può desumere dall'URL del nostro Profilo, con l'ID della applicazione che deve essere diversa per ciascun sito che amministriamo e con il logo del nostro blog che sarà l'immagine che compare di default quando non ce ne sono altre. Se vogliamo inserire una volta per tutte anche lo script va incollato subito sotto la riga
<body expr:class='"loading" + data:blog.mobileClass'>
anche quest'altro codice con le stesse avvertenze di prima (nuovi modelli nei vecchi la riga è <body>). Ricordo però che questa seconda operazione è opzionale al fine della corretta acquisizione dell'anteprima
<!-- Facebook Open Graph Start -->
<div id='fb-root'/>
<script>
//<![CDATA[
(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/all.js#xfbml=1&appId=362600930477422";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<!-- Facebook Open Graph End -->
<div id='fb-root'/>
<script>
//<![CDATA[
(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/all.js#xfbml=1&appId=362600930477422";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<!-- Facebook Open Graph End -->
Chi usa la lingua inglese per il suo blog può sostituire it_IT con en_US. Nonostante questa modifica può capitare che Facebook non acquisisca correttamente contenuti e immagini del nostro sito. Ecco che allora proprio Facebook ci offre uno strumento che è molto simile a quello di Google denominato Strumento di test per i dati strutturati. Si tratta del Facebook Debugger che fino a poco fa veniva chiamato Facebook URL Linter e di cui avevo già parlato nel post appena linkato.
COME FUNZIONA FACEBOOK DEBUGGER
E' lo stesso Facebook che ci dà le informazioni su come utilizzare Facebook Debugger e che si possono esemplificare nel modo seguente. Quando si fa click su un pulsante per condividere una pagina, i server di Facebook cercano di recuperare i meta tag Open Graph che vi sono stati inseriti. Si tratta del titolo del post, della immagine o di un video che poi vengono presentati nell'anteprima per la conferma della condivisione. Se si sono inseriti questi tag Open Graph per la prima volta, Facebook può darsi che non li rilevi perché memorizza nella cache del browser i risultati di questa scansione per un lungo periodo di tempo. Accedendo a Facebook Debugger, incollando l'URL di una nostra pagina e cliccando su Debug otteniamo due risultati. Il primo sarà quello di andare a recuperare i tag Open Graph di questa pagina sostituendo quello che era presente nella cache mentre il secondo sarà costituito da delle avvertenze per gli webmaster sulla correttezza sintattica dei tag ivi inseriti
Ci possono essere anche delle avvertenze per ottimizzare la condivisione della pagina di cui è stato fatto il debug. Nella pagina il cui URL ho inserito come test mi è stato detto che le immagini sono troppo piccole e non debbono mai essere inferiori a 200 pixel in entrambe le dimensioni e preferibilmente debbano essere di 1500 pixel ma non superiori ai 5MB. Francamente non mi pare possibile ottemperare a questo consiglio. Non è che adesso dobbiate inserire i meta tag Open Graph e fare il debug di tutti i post del vostro sito. Basterà eliminare la cache del vostro browser per avere un miglioramento della condivisione. Concludo ricordando che Facebook qualche volta non riconosce l'ID utente se inserito come numero. E' quindi sempre meglio usare il VanityURL o impostarlo se non lo abbiamo ancora fatto. I meta tag Open Graph di Facebook vengono rilevati anche da Google e quindi possono aiutare il motore di ricerca a migliorare gli snippet dei nostri post.
Quando si condividerà un post di Blogger dopo aver inserito questi meta tag, si aprirà una finestra popup di anteprima con la miniatura della prima immagine presente e avente come descrizione quella inserita nella colonna di destra dell'Editor di Blogger quando si siano attivate le Preferenze di Ricerca.
Quando si condividerà un post di Blogger dopo aver inserito questi meta tag, si aprirà una finestra popup di anteprima con la miniatura della prima immagine presente e avente come descrizione quella inserita nella colonna di destra dell'Editor di Blogger quando si siano attivate le Preferenze di Ricerca.
Ciao, grazie agli articoli di questo sito, sto costruendo, la grafica su blogger, proprio come la desidero io, senza dover ricorrere a pagare un grafico. Vorrei chiederti solo una cosa, e scusami se non è pertinente all'articolo. Vorrei uno sfondo completamente bianco, ma essendo partita da un template preimpostato, mi trovo a non riuscire a togliere la linea/ombreggiatura che racchiude post e widget. Come posso fare? Ti ringrazio in anticipo.
RispondiElimina@# Non hai inserito l'URL del tuo sito ma dal tipo di problematica che poni ritengo che ci siano delle immagini di sfondo nel template che sia difficile eliminare. Forse ti conveniva partire da un modello ufficiale di Blogger
EliminaSi, sono partita proprio da un modello ufficiale, e sto via via cambiando le cose che mi interessano con l'aiuto dei tuoi articoli. Nonostante modifichi i colori in "personalizza", resta l'ombreggiatura http://postitletterario.blogspot.it/ Ti lascio il link. Ho provato a sostituire il codice #eeeeee con quello bianca, ma il problema persiste. Grazie della risposta e buona domenica :)
Elimina@# Prova con questo ma serve solo per le immagini dei post ma ti può essere utilie per operare nel codice
Eliminahttp://www.ideepercomputeredinternet.com/2012/07/eliminare-bordi-immagini-blogger.html
ma nel tuo caso dovevi partire da un modello senza ombreggiature. Puoi scegliere bordi e immagini trasparenti da Modello > Personalizza però prima salva il template perché andandoo lì si possono perdere tutte le personalizzazioni
'https://lh4.googleusercontent.com/-0L2P_yUFj3Q/T-lsE2iPfYI/AAAAAAAAY0I/RanQBNOCSig/s160/logo-ipcei.jpg. Non capisco cosa mettere al posto di questo meta. Grazie.
EliminaC'è una virgoletta di troppo. Se incolli questo URL nel browser
Eliminahttps://lh4.googleusercontent.com/-0L2P_yUFj3Q/T-lsE2iPfYI/AAAAAAAAY0I/RanQBNOCSig/s160/logo-ipcei.jpg
vedrai l'immagine del logo di questo blog. Quello che devi fare è creare un marchio per il tuo sito di almeno 200x200 pixel, caricarlo su Picasa e ottenerne il link diretto che poi inserirai al posto del logo di questo blog che ho incollato come esempio
@#
Ciao Ernesto, mi sta succedendo una cosa molto strana.
RispondiEliminaHo fatto una modifica al css giustificando il titolo del post (andata a buon fine).
Ora sto cercando di modificare altre cose ma dal design di blogger non mi fa modificare nulla: ne caratteri, ne altro, nulla di nulla...applico modifica ma non me la fa vedere in anteprima e nè me la fa veramente.
Mi domando se possa aver influito la modifica che ho fatto su css o cosa stia succedendo....
Ti ringrazio anticipatamente della risposta, mio blog http://dino-freezone.blogspot.it/
@# Non c'entra nulla comunque puoi sempre togliere quella riga se hai dei dubbi
EliminaHo provato a togliere...il titolo post mi rimane giustificato e mi sta bene...ma il blog continua a non voler apportare altre modifiche da designer....cosa puo essere?
RispondiEliminaGrazie
@# Non ho doti divinatorie ahimè! Prova a cambiare browser. Se non va elimina la cache e eventualmente anche i cookie
EliminaEh lo so...ma grazie lo stesso. Ho provato gia a cambiare browser...sto leggendo in vari forum e più di una persona ha trovato questo blocco....
RispondiEliminaProvo a eliminare cache e cookie e speriamo che vada...
C'è chi ha risolto cambiando modello e iniziando daccapo ma spero di non doverlo fare.
ciao Ernesto! innanzitutto grazie per il lavoro che fai, complimenti per le spiegazioni chiarissime, ho già usato un paio di tuoi tutorial per il blog che sto allestendo, http://progressismosintetico.blogspot.it.
RispondiEliminavengo alla domanda.. quando premo "condividi su facebook" per un post, il layout dell'elemento da condividere è un casino, non esce il titolo del post, non esce la favicon (che pensavo andasse a sostituire l'imm di anteprima qualora il post non avesse immagini) etc.
allora ho provato a ricorrere a questo tutorial, ma andando a ritroso e provando a creare l'applicazione, non trovo le stesse schermate indicate da te su facebook, evidentemente devono aver modificato tutto di recente. sapresti spiegarmi come devo fare?
ho anche un altro problema: avrei voluto inserire alla fine di ogni articolo una bio dell'autore (blog multiautore), ma quando vado a cercare nel codice il tag di chiusura del footer post, non lo trovo! sto usando un modello predefinito di blogger (modello simple) modificato da me aggiungendo qualche gadget. grazie mille in anticipo!!
@# Se non riesci a creare una applicazione Facebook è forse perché non hai verificato il tuo account con il numero telefonico. Invece non riesci a trovare il codice perché probabilmente non hai messo la spunta a Espandi i modelli widget
RispondiElimina@# Puoi comunque provare a usare l'ID della applicazione che ho creato io e che è nel codice di questo post.
EliminaHa funzionato parzialmente lasciando l'ID della tua applicazione, adesso legge il titolo del post e le immagini, ma la descrizione no. beh, è decisamente già qualcosa! è vero comunque, non ho verificato l'account con il numero di telefono, sarà per quello.
Eliminaadesso riprovo anche ad espandere i modelli widget, in effetti può darsi che ieri abbia dimenticato di mettere la spunta.
grazie mille davvero! :)
@# Mia,
EliminaPer la descrizione leggi le ultime righe del post e l'articolo che vi è linkato
Incollando il primo [ uscito questo errore>
RispondiEliminaErrore di analisi XML, riga 718, colonna 118: Element type "meta" must be followed by either attribute specifications, ">" or "/>".
@# Dal tipo di messaggio sembra che in qualche riga con < meta non ci sia il tag > alla fine. Nel codice del post mi sembra ci siano tutti
EliminaIo ho inserito i tag Open Graph, ma quando pubblico un nuovo post devo ricorrere sempre a Debugger di Facebook per generare l'anteprima.
RispondiEliminaInoltre su Google Plus la prima immagine non è mai quella del post, ma quella dei social della sidebar...mi sapresti aiutare?
@# Forse dovresti usare le Preferenze di ricerca per migliorare la situazione
Eliminahttp://www.ideepercomputeredinternet.com/2012/03/come-personalizzare-le-preferenze-di.html
http://www.ideepercomputeredinternet.com/2012/03/la-descrizione-nelle-preferenze-di.html
che servono anche per Facebook dopo aver eliminato la cache
caro ernesto, io mi sto ancora dibattendo con il solito problema, cioè: una miniatura adatta quando la gente condivide i miei post su facebook. su molti siti non si parla di open graph, ma soltanto di inserire questo codice:
RispondiEliminalink rel=”image_src” href=url_completo_immagine” (qualcosa del genere)
nel tag "head".
infatti io vorrei che ogni post avesse sempre la stessa immagine (il logo del blog).
quindi come si fa? modello=>modifica html e poi? sopra o sotto "head"? e poi di "head" ce ne sono due!
grazie e scusa sono abbastanza impedito...
@# Li ho letti anche io quei codici ma si riferiscono a mesi fa se non anno fa. Ora per la condivisione delle immagini si usa Open Graph. Se vuoi mostrare sempre la stessa immagine, la devi caricare sul web e deve avere una dimensione superiore ai 1500 pixel come scritto anche nel post. Puoi provare a inserire oltre alle prime tre righe del codice solo quest'altra
Elimina< meta content='URL della immagine' property='og:image'/ >
dove ho aggiunto gli spazi per farmi accettare il codice dal commento
Ciao Ernesto, il mio ID lo posso prendere anche da http://graph.facebook.com/username? Perchè dalle foto risulta sempre diverso
RispondiElimina@# Sì è corretto prenderlo dall'URL del nostro profilo se abbiamo optato per quello che si chiama VanityURL come è nel tuo caso
EliminaCiao Ernesto. Da quando ho eliminato il top slide menu che avevo installato qualche tempo fa ho un problema per quanto riguarda la descrizione dei post che condivido su facebook: la descrizione non compare più. Ho provato ad usare facebook debugger e, rispetto ai tuoi post, ho notato che nei miei non compare l'og:description. Considerando che non mastico troppo il codice, come potrei fare per ripristinare il vecchio funzionamento del pulsantino di condivisione che si trova su blogger?
RispondiEliminaL'og:description viene ricavato dalla Descrizione di Google che va abilitata con le Preferenze di Ricerca
Eliminahttp://www.ideepercomputeredinternet.com/2012/03/come-personalizzare-le-preferenze-di.html
http://www.ideepercomputeredinternet.com/2012/03/le-preferenze-di-ricerca-di-blogger.html
E se invece non volessi inserirlo, come potrei fare per ottenere in automatico la descrizione del post quando lo condivido su facebook, magari utilizzando le prime righe del post stesso?
EliminaNon capisco. Non vuoi aumentare i visitatori? Applicare le regole SEO di Google è essenziale @#
RispondiEliminaSi, quello sì. Però vorrei comunque poter condividere su facebook avendo a disposizione come descrizione del post il testo del post stesso. Il tutto se possibile in automatico come accadeva prima...
EliminaProva questo sistema
Eliminahttp://www.ideepercomputeredinternet.com/2010/10/come-inserire-la-descrizione-del-blog.html
però è vecchio
Niente, non va... anche provando ad inserire una "descrizione della ricerca" nel post comunque quando vado a condividere tramite facebook non compare alcuna descrizione
EliminaBuonasera Ernesto, ti ringrazio per il lavoro che fai e devo dire che seguendo i tuoi consigli sono riuscita a costruire il mio blog come volevo. Da un paio di mesi però quando condivido su facebook, non mi appare più la foto del post ma sempre quella dell' header. Ho seguito la tua procedura ed ho inserito gli Open Graph, ma niente, rimane sempre la foto dell'header senza possibilità di scegliere l'anteprima su facebook. Ho fatto anche il debugger e mi dice questo: Object at URL 'http://www.ass-cult-irumoridellanima.com/' of type 'website' is invalid because the given value '' for property 'og:image:url' could not be parsed as type 'url'. Ma non so proprio che cosa voglia dire. Mi puoi aiutare per favore? Approfitto di questo commento e aggiungo, come se nn bastasse, che oggi ho trovato un avviso che googlebot nn riesce ad accedere al mio blog. Io nn ho toccato niente, nn so nemmeno cosa siano questi file robots.txt. Nn so più cosa fare.
RispondiEliminaQuesto è il post giusto. Se non ti funziona non saprei cosa dirti. Riguardo a Googlebot potrebbe essere un falso positivo e risolversi da solo ma è meglio controllare. Leggi questo post
Eliminahttp://www.ideepercomputeredinternet.com/2012/06/come-inserire-le-sitemap-nel-file.html
Poi vai su Impostazioni > Preferenze di ricerca > Crawler e indicizzazione e disabilita il file robots.txt personalizzato o riportalo alla situazione di default. Questo problema potrebbe anche essere alla causa della scorretta anteprima di Facebook
@#
Le visite sono crollate o sono rimaste stabili? Nel secondo caso si tratta probabilmente di un bug o di un falso positivo mentre nel primo caso non saprei proprio cosa dirti
Elimina@#
buonasera Ernesto
RispondiEliminaun anno fa avevo messo tutto a posto e ha funzionato tutto per un anno.
da due giorni Facebook è di nuovo al punto di allora, ovvero condivide l'immagine che decide lui e senza alcuna descrizione del post.
Inutile dire che non ho cambiato assolutamente nulla nel html dei miei blog.
hai suggerimenti?
grazie, Paola
@# Sono diversi giorni che anche io ho il tuo identico problema che potrebbe essere collegato a questo bug di Blogger
Eliminahttp://www.ideepercomputeredinternet.com/2014/05/widget-degli-articoli-casuali-blogger-miniature.html?showComment=1415798862927#c4517832148400337257
Vedremo i prossimi giorni
Grazie Ernesto
RispondiEliminaho provato anche ad eliminare tutti i widget e la s finale delle immagini. nessun cambiamento
aspetto il tuo post.
Ciao Ernesto... ho problemi con l'open graph.
RispondiEliminaQuesto è il mio blog: www.aressandoro.com
Ho usato il codice che hai messo su ma sembra non funzioni. Potresti dare un'occhiata e magari dirmi cos'è che non va? ^_^
Grazie anticipatamente!
Ho guardato il codice sorgente del tuo sito e non ho trovato nessun tag dell'Open Graph né della prima parte con i metatag né della seconda parte con lo script
Elimina@#
Ciao Ernesto, ho inserito URL dei post che non vengono condivisi in modo corretto in fb (parlo delle immagini) in ophen graf. Non riesco a risolvere nulla :( Ho cambiato anche l'html come avevi suggerito in un altro post, aveva funzionato ma poi ha smesso.
RispondiEliminaCosa devo controllare che mi stà sfuggendo? Stà capitando con sempre maggiori post, quindi ho sicuramente fatto qualche pasticcio :( il mio sito: www.lauralauincucinaconleamiche.it
Ringraziandoti per il tuo prezioso aiuto e per il tuo grande lavoro attendo tue notizie.
Grazie. Buona giornata!
Anche a me capita molto spesso di non riuscire a condividere la miniatura giusta. Oltre agli accorgimenti di questo post non è che si può fare molto altro :((
Elimina@#
Ciao Ernesto, ho provato la guida punto per punto ed ho inserito il primo codice nel mio blog http://infoutili.blogspot.it/ cambiando solo parsifal32 con il mio nome facebook ma non funziona nulla.Mi rileva la foto principale della home page e la descrizione generale. Come risolvo? Grazie anticipate
RispondiEliminaNon può funzionare nulla. Devi anche creare una applicazione Facebook e sostituire il suo ID al numero 362600930477422 che invece è l'ID di questo sito. Però se il problema è quello di condividere un post su Facebook visualizzando immagine e snippet allora devi abilitare le Preferenze di Ricerca
Eliminahttp://www.ideepercomputeredinternet.com/2015/09/seo-post-google-blogger-guida.html
@#
Ok Ernesto avevo già abilitato la ricerca. È l'applicazione Facebook per sostituire l'ID del sito come la.creo. poi non è chiaro anche la stringa di codice che posti sotto. Mi puoi spiegare meglio? Sei essenziale ormai......
EliminaIl secondo codice è lo script che va incollato una volta senza doverlo più fare sempre quando si aggiungono plugin di Facebook. Per creare una applicazione segui la parte di questo post
Eliminahttp://www.ideepercomputeredinternet.com/2015/08/facebook-modulo-commenti-blogger-moderazione.html
nella sezione: COME INSTALLARE IL MODULO DEI COMMENTI DI FACEBOOK CON MODERAZIONE
@#
Ciao,
RispondiEliminanel tuo modello compare il meta:
content='http://lh4.ggpht.com/-jfEg91Ul0I8/UTHGChN03WI/AAAAAAAAgo8/sPjH-cyCMro/s72-c/facebook-url-debugger%25255B4%25255D.jpg?imgmax=800' property='og:image'/
Avrei bisogno di sapere qual è il codice da inserire per ottenere in automatico la prima immagine del post a dimensioni naturali.
Grazie.
Il tag per la prima immagine è quello della riga con
Eliminadata:blog.postImageThumbnailUrl
che cattura la miniatura della prima immagine
@#
Sì, ma la miniatura non è adatta per la condivisione su facebook.
EliminaMi servirebbe la dimensione naturale, ho provato ad utilizzare data:post.firstImageUrl ma stranamente sembra non funzionare.
Sul tuo sito il problema è risolto dal parametro aggiuntivo imgmax=800 aggiunto a fine url immagine ma come posso inserirlo?
Grazie.
Il parametro imgmax=800 viene inserito automaticamente quando si carica una immagine su Picasa e se ne ricava il link diretto
Elimina@#
Grazie per l'info ma non mi sembra una soluzione percorribile inserire centinaia di righe di codice nel modello.
EliminaTu inserisci manualmente i link diretti articolo per articolo nel meta og image?
Non ti ho detto quello. Caricando le immagini su Picasa e utilizzando il tag
Eliminab:if cond='data:blog.postImageThumbnailUrl
viene rilevata la prima immagine con l'aggiunta di imgmax=800
Alternativamente prova con una riga di metatag come questa
b:if cond='media:thumbnail'
per vedere se ti funziona
@#
Purtroppo a me il parametro non compare neanche acquisendo il link diretto, però effettivamente non è un grosso problema inserirlo sulla prima immagine in fase di editing.
RispondiEliminaSembra funzionare abbastanza bene, a parte il fatto che il debugger facebook trova il meta og image ma inserisce cmq il warning di tag non definito (anche per immagini superiori a 200x200 e anche dopo aggiornamento delle informazioni).
Solo una questione di tempo o altro? Sarebbe interessante sapere se la stessa cosa accade anche ad altri.
Grazie mille per l'aiuto.
Uno warning su Facebook Debugger ce l'ho fisso anche io ma per questa ragione
Elimina"The 'og:description' property should be explicitly provided, even if a value can be inferred from other tags."
che francamente mi sfugge
@#
Credo dipenda dal fatto che nel tuo sorgente (così come nel codice fornito ad inizio articolo) non compare esplicitamente l'og description ma il debugger lo ricava altrove (da name='description' o da name='twitter:description' della twitter card)
EliminaNon credo. La metadescrizione su Blogger si inserisce dall'Editor singolarmente per ciascun post. Forse è questa particolarità che Facebook non riesce a rilevare in modo ottimale. In ogni caso scorrendo il Facebook Debugger poi la metadescrizione compare
Elimina@#
io ho risolto così:
Eliminainvece di
meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/
sostituito con
meta expr:content='data:blog.postImageUrl' property='og:image'/
URL Immagine invece di quello della miniatura. Potrebbe essere utile anche per la condivisione su social come Twitter in cui le immagini vengono mostrate a grandezza naturale
Elimina@#
Ciao Ernesto, grazie mille per tuoi preziosi consigli che consulto molto spesso ^_^
RispondiEliminaCome raccomandato, ho inserito tutti i parametri OpenGraph nel template del mio blog. Ma se imposto og:title col nome del blog, ogni volta che condivido un post mi compare il nome del blog e non il titolo del post. Ovviamente questo non accade se non specifico alcun og.:title.
Come posso salvare capra e cavoli? Cioè specificare giustamente og:title ma avere il titolo del post giusto nella condivisione?
Stessa cosa per quanto riguarda la descrizione. Nelle condivsioni dei post compare sempre la descrizione del blog e non quella impostata per il singolo post (il che può anche andar bene, questo è un problema minore).
Grazie mille per il tuo aiuto!
Probabilmente non hai fatto la modifica del template per mostrare prima il titolo del post rispetto al nome del blog
Eliminahttp://www.ideepercomputeredinternet.com/2015/10/blogger-titolo-post-nome-blog-modello.html
@#
ciao. quando vado a condividere i miei articoli su facebook spunta il tuo nome, come se li avessi scritti tu. ho cambiato il nome utente,id e l'indirizzo del logo ma niente. che devo fare? grazie
RispondiEliminaLe cose che non hai cambiato quindi sono questa riga nel primo codice
Eliminameta content='362600930477422' property='fb:app_id'
e quest'altra stringa
appId=362600930477422
nel secondo codice? Se è così stai usando l'ID della mia applicazione e quindi probabilmente è quello il problema. Per risolvere segui questi post in successione che sono più aggiornati
http://www.ideepercomputeredinternet.com/2016/03/facebook-app.html
http://www.ideepercomputeredinternet.com/2016/03/facebook-metatag-open-graph-markup-blogger-template.html
Fammi sapere.
@#
Controlla anche di non avere due codici simili dove in uno sia rimasto il mio nome. È già successo a un altro lettore
Elimina@#
Ho provato a rifare tutta la proceduta perché ho il nuovo modello di blogger ma non funziona. Puoò essere dovuto proprio al modello?
RispondiEliminaNon ho mai testato la condivisione su Facebook con i nuovi modelli. Mi risulta però che in linea di massima funziona senza ulteriori aggiunte di metatag
Elimina@#
Infatti io non avevo avvertito la mancanza finché non ho notato che non compare più il nome ma mettendo solo la stringa dell'autore non succede nulla.
EliminaIl problema del nome dipende da Facebook. Leggiti questa discussione
Eliminahttp://www.ideepercomputeredinternet.com/2016/03/facebook-metatag-open-graph-markup-blogger-template.html?showComment=1511716057816#c6936987303515651803
a partire dal primo commento fino all'ultimo e eventualmente trova altre info sul Forum di Blogger. Su Facebook non si può contare in quanto a aiuto
@#