Il signore indiscusso dei social network nel nostro paese lo conosciamo tutti, si chiama Facebook. Dato per spacciato un anno si e un anno no il social per antonomasia ha segnato punti decisamente importanti a suo favore negli ultimi anni, ci basti pensare ai soli video in diretta.
La condivisione di un link su Facebook può però essere limitante di default; il bot che visita la pagina linkata infatti estrapola informazioni come ad esempio titolo, descrizione e immagine di anteprima, se disponibile, caricate in automatico dal social network e con pochissima possibilità di personalizzazione. Le stesse poi non sono più valide se non si è a nostra volta condiviso dalla pagina che ha personalizzato ma dal link originale.
Spiego meglio:
Supponiamo di aver condiviso nella nostra pagina Facebook un link al quale abbiamo inserito un immagine personalizzata caricata da noi come anteprima; la stessa apparirà anche nei profili di chi ha condiviso direttamente da noi perché, ovviamente, chi andrà a sua volta a condividere dal sito originale non troverà la foto in questione.
Ma è possibile quindi personalizzare queste informazioni direttamente dal link originale? Assolutamente si, mediante il protocollo Open Graph che trasforma, cito testualmente, 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.
Grazie a questo protocollo è quindi possibile dire a Facebook quale titolo e quale immagine mostrare nella condivisione a prescindere che questo sia presente o no alla fonte oltre ad un’altra miriade di informazioni utili.
Partiamo quindi da quelli obbligatori, si fa per dire, se decidiamo di usufruire di questo strumento:
- og:title – Titolo da assegnare al contenuto.
- og:description – Descrizione da assegnare al contenuto.
- og:type – Tipologia di contenuto per esempio articolo o video.
- og:image – Immagine di anteprima.
- og:url – URL associato alla pagina web.
Esistono anche un’altra serie di opzioni come og:audio e og:video che permettono di associare un file audio/video alla pagina oppure og:locale e og:site_name che permettono di definire la lingua del contenuto e il nome del sito web.
Altre opzioni possono essere sfruttate utilizzando le direttive article:valore che, in caso di articoli per esempio, sono utili per dare ulteriori informazioni al social network.
Vediamo degli esempi di come inserire correttamente gli Open Graph nelle pagine web del nostro sito:
<head>
<title>Simone Baldassin Webdesign</title>
<meta property="og:type" content="article">
<meta property="og:title" content="Inserire i Meta Tag Open Graph di Facebook su un sito">
<meta property="og:description" content="Inserisco una description personalizzata per la condivisione su Fb come faccio col meta description per Google.">
<meta property="og:url" content="https://simonebaldassin.com/titolo-della-pagina">
<meta property="og:site_name" content="Simone Baldassin">
<meta property="article:publisher" content="https://www.facebook.com/pagina">
<meta property="article:author" content="https://www.facebook.com/profilo">
<meta property="og:image" content="https://simonebaldassin.com/Immagini/opengraph.jpg">
</head>Anche Twitter permette una personalizzazione dei post sui suoi profili, vediamo di seguito come possiamo ottimizzare le nostre pagine web anche in funzione di questo social network:
<head>
<meta name="twitter:description" content="Descrizione per la condivisione su Twitter">
<meta name="twitter:title" content="Title per la condivisione su Twitter">
<meta name="twitter:site" content="@nomedellapagina">
<meta name="twitter:image" content="https://simonebaldassin.com/Immagini/opengraph.jpg">
<meta name="twitter:creator" content="@SBaldassin">
</head>Adesso siete pronti a personalizzare le vostre condivisioni.
Simone Baldassin
Sono Full Stack Developer di professione e YouTuber per diletto, specializzato nello sviluppo di temi custom per WordPress e digital marketing. Oltre a realizzare siti web, dal 2010 tengo corsi di Web Design, in aula e in streaming, presso Veneto Formazione.