Quando si condivide un link su Facebook (o su altri social network) un bot va a visitare la pagina web per estrapolare delle informazioni: il titolo, la descrizione, l’immagine di anteprima, ad esempio. Alcune di queste informazioni possono essere modificate dall’utente, ad esempio il titolo e la descrizione o l’immagine di anteprima se il link viene condiviso da una pagina, altre informazioni non possono essere modificate; ne avevamo parlato sulla guida per personalizzare i link su Facebook.
Il problema di questa personalizzazione è che funziona solo a livello della singola condivisione: il link condiviso e personalizzato potrà andare in giro per Facebook in quel modo solo se viene condiviso dalla pagina/profilo che lo ha personalizzato. Di per se il link non ha però subito alcuna modifica, e le condivisioni effettuate “manualmente” (copiando e incollando l’URL su Facebook) o attraverso i plugin sociali (tasti mi piace/condividi) verranno visualizzate con titolo, descrizione e immagine di anteprima caricate in automatico da Facebook.
Come fare allora a personalizzare un URL alla base, in modo che venga condiviso personalizzato come vogliamo noi? La risposta è una sola e si chiama open graph. Su questa guida vi spiego come integrare queste informazioni sul vostro sito web.
Facebook e gli Open Graph
Il protocollo open graph (i dettagli su ogp.me) trasforma qualsiasi pagina web in un oggetto del grafico sociale, con delle informazioni che lo caratterizzano e che permettono a siti come Facebook di personalizzarne la sua visualizzazione quando, ad esempio, viene diffuso sul sito.
Attraverso la configurazione dei “nodi” dell’open graph è possibile ad esempio dire a Facebook qual è il titolo di una pagina web, qual è la descrizione, l’immagine da associare alla pagina, il tipo di contenuto visualizzato, ecc.
L’esempio classico è l’inserimento dei dati per la condivisione di un articolo di un blog.
Meta tag di base e obbligatori
I tag di base sono i seguenti:
- og:title – il titolo che si vuole assegnare al contenuto.
- og:description – la descrizione del contenuto.
- og:type – il tipo di contenuto, ad esempio un articolo, o un video.
- og:image – l’immagine da utilizzare come miniatura dell’URL per la condivisione
- og:url – l’URL da usare come ID permanente associato alla pagina web.
Meta tag facoltativi
Ci sono inoltre una serie di tag facoltativi, che è possibile aggiungere per specificare ulteriormente alcune proprietà del contenuto. Esempi:
- og:audio – l’indirizzo ad un file audio associato con l’oggetto.
- og:locale – la lingua del contenuto, esempio it_IT.
- og:site_name – il nome del sito web.
- og:video – l’indirizzo ad un file video associato con la pagina.
Come inserire gli open graph
I tag vanno inseriti all’interno del tag <head></head> di una pagina web. Ecco un esempio di inserimento all’interno del codice HTML di una pagina web:
<html prefix="og: http://ogp.me/ns#">
<head>
<title>Come inserire gli open graph</title>
<meta property="og:title" content="Inserire gli open graph" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://trucchifacebook.com" />
<meta property="og:image" content="https://trucchifacebook.com/trucchifacebook.png" />
...
</head>
...
</html>Una volta inseriti è opportuno testare l’URL per eventuali errori, e per capire quali informazioni vedrà il bot di Facebook, utilizzando lo strumento di debug (click sul tasto debug -> “fetch new scrape information”).
Dopo che è tutto ok, è possibile subito testare la condivisione dell’URL per capire come vengono visualizzate le varie informazioni fornite.
Ulteriori tag utili per Facebook
Oltre ai meta tag già segnalati eccone alcuni specifici per ottimizzare al meglio la condivisione dei contenuti su Facebook:
- article:publisher – per specificare le informazioni sull’autore di un contenuto (URL di un profilo o di una pagina Facebook).
- fb:admins – per segnalare l’amministratore/amministratori (ID utenti) del contenuto.
Buona personalizzazione dei contenuti a tutti.
Altri articoli che potrebbero interessarti
Scritto da: Investitore, Imprenditore, Digital Manager.
Ciao Fabrizio, grazie dell’articolo, l’unico che ho trovato davvero molto utile.
Ho un problema però, non so se riesci tu a trovare una soluzione per questo.
Ho inserito l’open graph come consigliato sulla tua pagina e fin qui è tutto facile.
Però l’open graph è inserito in una pagina che fa parte di un funnel e vorrei che rimanesse privata perché viene visualizzata dagli iscritti a una newsletter. Allora ho pensato di creare una pagina simile dedicata a tutti gli utenti e ho cercato di far puntare l’open graph a quella pagina anziché a quella di provenienza. Niente. Facebook non la riconosce e riporta il grafo non personalizzato.
Quindi:
sono nella pagina A
nella metadescription inserisco il grafo (og url:) alla pagina B
il debug mi dice che prenderà le info dalla pagina B ma le sbaglia, non le riconosce.
Che fare? Esiste una soluzione?
Grazie dei consigli che vorrai darmi.
Max
Ciao Max, grazie.
Strano, a volte lo strumento non funziona bene. Nonostante carichi le info dalla pagina A, hai provato a condividere il link per capire se viene comunque puntato alla B?
Riprova comunque, potrebbe essere un problema momentaneo.
Perdonami, e se volessi caricare l’immagine di anteprima come si fa?
Molto interessante, grazie, però avrei una domanda, su quello che specificatamente mi occorre. Ho un sito di condivisione video (inseriti da Youtube) e quando vado a condividere su Facebook, nell’anteprima non mi compare il tasto play, o click-to-play. Ho provato in tutti i modi ma nulla, sul debug non mi compare mai, sai per caso se esiste un plugin che assegna all’Open Graph la sovrapposizione di due immagini (thumb e icona play), oppure devo servirmi di qualche codice in particolare? Ho il Novavideo premium come tema, uso Yoast SEO e per l’estrapolazione dell’anteprima da Youtube uso il plugin Video Thumbnails. Il sito è kabyria.com, se mi dessi un suggerimento ti sarei eternamente grata!
Ci sono misure standard per l’immagine che sarà visualizzata nell’anteprima?
L’immagine di un link ottimizzata ha misure: 1200x628px, o un rapporto 1,91:1.
ciao,
ho provato ad inserire il tuo codice per fare in modo di personalizzare le informazioni (titolo, immagine e url) del mio sito quando si clicca sul tasto condividi di Facebook.
Ho messo questo codice ovviamente personalizzato con i miei indirizzi, ma E’ SBAGLIATO.
Potresti inserire quello corretto?
Sono 4 ore che oggi pomeriggio cerco come personalizzare le info di condivisione.
Sto impazzendo!
Ti prego di aiutarmi.
Grazie
Come inserire gli open graph
…
…
Ciao, il codice presente nell’articolo è corretto, puoi verificarlo visitando la sorgente del codice di questa pagina.
In ogni caso ricorda sempre di fare il debug dell’URL che vuoi personalizzare, e dopo che hai personalizzato i meta, di “svuotare la cache di Facebook” cliccando sul tasto “scrape again”: https://developers.facebook.com/tools/debug/
Ciao,
ho notato che in alcuni content condivisi (siano foto, post o video) è presente di fianco al nome della pagina facebook il pollice del like alla pagina stessa. Visto che non a tutti i post condivisi è presente, qual è la discriminante che decide la presenza di questo like alla pagina e quando no?
Ci sto perdendo la testa :D
Ciao,
interessante. Per modificare un singolo articolo di un magazine con tanti articoli come si potrebbe fare? – Su WordPress – io vorrei mettere il video youtube nel post del magazine su facebook.
Ciao vorrei sapere se ancora è valida questa funzione cioè questa procedura.
Complimenti per il blog…
Ciao io sto usando gli op-graph ma ho dei problemi.
Quando clicco su condividi non mi da i dati che ho inserito negli op-graph ma sembra che prenda i dati dalla pagina che sta leggendo perchè?
Ciao, io nn riesco a risolvere, nel senso che qualsiasi articolo del mio sito joomla metta su FB escono tutti con descrizione e titolo della HOME e non prende quello dell’articolo. E’ una cosa che accade da poco, una volta funzionava, ma non riesco a risolvere. Nel file INDEX indica i valori di OG: URL e OG: DESCRIPTION solo della HOME del mio sito http://www.vovinamlano.it, coe possono i vari articoli e categorie a modificarlo?
Grazie
Confermo. Effettivamente ho provato ad inserire anche io i dati manualmente sotto il tag head, poi li ho modificati ma alla fine…. il debugger mi tiene “in memnoria” ancora quelli vecchi, ed è come se quelli nuovi stessero più in alto come tag, quelli vecchi più in basso sotto di essi, ma vengono letti questi ultimi e non i primi!!!
Se vado a vedere il codice sorgente html sia da blogger (ho blog) sia come sorgente tramite un browser, risultano solo i miei tag ultimi(modificati), ma non risultano i primi, che invece vengono presi ancora in considerazione dal debugger, pur non esistendo più fisicamente!!!!
Roba da pazzi…..