• 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
Ti trovi 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 Archiviato in:Guide Contrassegnato con: 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.

Commenti

  1. Max dice

    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 dice

      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 dice

    25 Marzo 2015 alle 20:52

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

    Rispondi
  3. Christine dice

    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 dice

    29 Febbraio 2016 alle 14:43

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

    Rispondi
    • Fabrizio Trentacosti dice

      9 Giugno 2016 alle 09:19

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

      Rispondi
  5. Davide dice

    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 dice

      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 dice

    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 dice

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

    26 Febbraio 2018 alle 23:56

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

    Rispondi
  9. massimiliano dice

    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 dice

    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 dice

    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

Facebook Retargeting

Ultimi Post

Come funziona e perché usare Facebook Creative Hub

Come creare, gestire ed eliminare post non pubblicati su Facebook

Come modificare le anteprime dei link su Facebook

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.

Privacy

  • Consulta la Privacy Policy
  • Gestione Cookie

Menu

  • Fabrizio Trentacosti
  • Leggi il Blog

© 2009-2018 TrucchiFacebook

Noi e terze parti selezionate utilizziamo cookie o tecnologie simili per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy.
Puoi liberamente prestare, rifiutare o revocare il tuo consenso, in qualsiasi momento.
Puoi acconsentire all’utilizzo di tali tecnologie utilizzando il pulsante “Accetta”.
PersonalizzaAccetta
Gestione Cookie

Le tue preferenze relative al consenso

Il seguente pannello ti consente di esprimere le tue preferenze di consenso alle tecnologie di tracciamento che adottiamo per offrire le funzionalità e svolgere le attività sotto descritte. Per ottenere ulteriori informazioni in merito all'utilità e al funzionamento di tali strumenti di tracciamento, fai riferimento alla cookie policy. Puoi rivedere e modificare le tue scelte in qualsiasi momento.
Strettamente necessari
Sempre abilitato
Questi strumenti di tracciamento sono strettamente necessari per garantire il funzionamento e la fornitura del servizio che ci hai richiesto e, pertanto, non richiedono il tuo consenso.
CookieDurataDescrizione
cookielawinfo-checkbox-advertisement1 yearSet by the GDPR Cookie Consent plugin, this cookie is used to record the user consent for the cookies in the "Advertisement" category .
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by CookieYes and is used to remember the consent of the users for the use of cookies categorized as 'Other'.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
CookieLawInfoConsent1 yearRecords the default button state of the corresponding category & the status of CCPA. It works only in coordination with the primary cookie.
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Miglioramento dell’esperienza
Questi strumenti di tracciamento ci permettono di offrire una user experience personalizzata migliorando la gestione delle impostazioni e consentendo l'interazione con network e piattaforme esterne.
Misurazione
Questi strumenti di tracciamento ci permettono di misurare il traffico e analizzare il tuo comportamento con l'obiettivo di migliorare il nostro servizio.
CookieDurataDescrizione
SERVERIDsessionThis cookie is set by Slideshare's HAProxy load balancer to assign the visitor to a specific server.
Interazioni e funzionalità semplici
Questi strumenti di tracciamento abilitano semplici interazioni e funzionalità che ti permettono di accedere a determinate risorse del nostro servizio e ti consentono di comunicare più facilmente con noi.
CookieDurataDescrizione
__gads1 year 24 daysThe __gads cookie, set by Google, is stored under DoubleClick domain and tracks the number of times users see an advert, measures the success of the campaign and calculates its revenue. This cookie can only be read from the domain they are set on and will not track any data while browsing through other sites.
CONSENT2 yearsYouTube sets this cookie via embedded youtube-videos and registers anonymous statistical data.
Targeting e Pubblicità
Questi strumenti di tracciamento ci consentono di fornirti contenuti commerciali personalizzati in base al tuo comportamento e di gestire, fornire e tracciare gli annunci pubblicitari.
CookieDurataDescrizione
IDE1 year 24 daysGoogle DoubleClick IDE cookies are used to store information about how the user uses the website to present them with relevant ads and according to the user profile.
test_cookie15 minutesThe test_cookie is set by doubleclick.net and is used to determine if the user's browser supports cookies.
VISITOR_INFO1_LIVE5 months 27 daysA cookie set by YouTube to measure bandwidth that determines whether the user gets the new or old player interface.
YSCsessionYSC cookie is set by Youtube and is used to track the views of embedded videos on Youtube pages.
yt-remote-connected-devicesneverYouTube sets this cookie to store the video preferences of the user using embedded YouTube video.
yt-remote-device-idneverYouTube sets this cookie to store the video preferences of the user using embedded YouTube video.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
CookieDurataDescrizione
GoogleAdServingTestsessionNo description
ACCETTA E SALVA
Powered by CookieYes Logo