• Chi sono
  • Blog

TrucchiFacebook

i migliori trucchi, consigli e guide per Facebook

  • Guide
  • Profilo
    • Sicurezza
    • Privacy
  • Pagine
  • Facebook Marketing
    • Facebook Ads
    • Facebook Retargeting
  • Altro
    • Applicazioni
    • Chat
    • Curiosità
    • Gruppi
    • Foto
    • Software
    • Video
Sei qui: Home / Blog / Guide / Come inserire i Tag Open Graph di Facebook su un sito

Come inserire i Tag Open Graph di Facebook su un sito

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.

open graph zuckerberg

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.

open graph

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”).

facebook debug

Dopo che è tutto ok, è possibile subito testare la condivisione dell’URL per capire come vengono visualizzate le varie informazioni fornite.

link-facebook-open-graph

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.

Pubblicato il: 24 Settembre 2014 In: Guide Tag: condivisione link, open graph, Personalizzare Facebook, sito web, social plugin, url


Altri articoli che potrebbero interessarti

  • Come scoprire quanti mi piace ha un sito
  • Come modificare le anteprime dei link su Facebook
  • Come attivare il Tag Autore su Facebook
  • Facebook Ads: raggiungere gli utenti in base al tempo trascorso sul sito web
  • Come aggiungere o aggiornare il Like Box della Pagina Facebook sul Sito Web
  • Come scegliere quali post visualizzare prima su Facebook
Fabrizio Trentacosti Scritto da: Fabrizio Trentacosti

Investitore, Imprenditore, Digital Manager.

In: Guide Tag: condivisione link, open graph, Personalizzare Facebook, sito web, social plugin, url

Comments

  1. Max

    11 Febbraio 2015 alle 09:22

    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

    Rispondi
    • Fabrizio Trentacosti

      12 Febbraio 2015 alle 11:33

      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.

      Rispondi
  2. gianni

    25 Marzo 2015 alle 20:52

    Perdonami, e se volessi caricare l’immagine di anteprima come si fa?

    Rispondi
  3. Christine

    9 Settembre 2015 alle 19:37

    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!

    Rispondi
  4. Graz

    29 Febbraio 2016 alle 14:43

    Ci sono misure standard per l’immagine che sarà visualizzata nell’anteprima?

    Rispondi
    • Fabrizio Trentacosti

      9 Giugno 2016 alle 09:19

      L’immagine di un link ottimizzata ha misure: 1200x628px, o un rapporto 1,91:1.

      Rispondi
  5. Davide

    8 Giugno 2016 alle 20:30

    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

    …

    …

    Rispondi
    • Fabrizio Trentacosti

      9 Giugno 2016 alle 09:18

      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/

      Rispondi
  6. Lillo

    24 Marzo 2017 alle 23:50

    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

    Rispondi
  7. Simone

    18 Maggio 2017 alle 21:44

    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.

    Rispondi
  8. Antonio C.

    26 Febbraio 2018 alle 23:56

    Ciao vorrei sapere se ancora è valida questa funzione cioè questa procedura.
    Complimenti per il blog…

    Rispondi
  9. massimiliano

    15 Marzo 2018 alle 10:34

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

    Rispondi
  10. vittorio

    30 Ottobre 2019 alle 17:52

    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

    Rispondi
  11. Vale

    11 Gennaio 2021 alle 22:45

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

    Rispondi

Lascia un commento Annulla risposta

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Fabrizio Trentacosti

Fabrizio TrentacostiInvestitore, Imprenditore, Digital Manager. → Informazioni

Guida al Retargeting su Facebook

Guida Completa al Facebook Retargeting

Ultimi Post

Come funziona e perché usare Facebook Creative Hub

Come funziona e perché usare Facebook Creative Hub

Come creare, gestire ed eliminare post non pubblicati su Facebook

Come creare, gestire ed eliminare post non pubblicati su Facebook

Come modificare le anteprime dei link su Facebook

Come modificare le anteprime dei link su Facebook

Guida alla pubblicità su Facebook Messenger

Guida alla pubblicità su Facebook Messenger

Trademark Disclaimer

Facebook® is a registered trademark of Facebook Inc. Facebook® è un marchio registrato di Facebook Inc.

This is a blog that covers tips and tricks related to Facebook. It's not in any way affiliated with the actual Facebook site.

TrucchiFacebook.com non è in alcun modo affiliato o sponsorizzato da Facebook Inc.

Termini e Condizioni

  • Consulta i termini e condizioni di utilizzo del sito
  • Consulta la Privacy Policy

Menu

  • Fabrizio Trentacosti
  • Leggi il Blog

© 2009-2018 TrucchiFacebook - Contatti

×

Al fine di rendere efficace la navigazione sul sito web e per garantire di usufruire del servizio che offriamo in piena sicurezza e velocità, il sito web utilizza dei cookie tecnici e di profilazione. Cliccando su OK, scorrendo questa pagina o cliccando un qualunque suo elemento acconsenti all'uso dei cookie. Per l’informativa completa sul trattamento dei dati personali e sensibili e per l’informativa con le indicazioni relative ai cookie tecnici, statistici e di profilazione, nonché per scegliere quali cookie autorizzare o negare, visualizza la privacy policy.

Ok Privacy Policy