Open Graph: tag e funzioni

Facebook ha pubblicato Open Graph nel 2010 per poter mappare ancora meglio i siti esterni sulla propria piattaforma. A tal fine gli sviluppatori del social network hanno sviluppato una tecnica interessante: Open Graph, o Open Graph Protocol (OGP), che trasforma i siti web in oggetti facilitando agli utenti della piattaforma la condivisione nella rete di contenuti provenienti da fonti esterne. Potrebbe essere una soluzione estremamente interessante per molti operatori di siti web, considerando che la maggior parte di loro vuole accrescere la propria visibilità online.

Dopo Facebook anche altre piattaforme social come Twitter, LinkedIn o Xing hanno seguito questa linea, implementando Open Graph e facendo del protocollo un importante strumento del web design.

Il website builder di IONOS

MyWebsite è la soluzione perfetta per la tua presenza online professionale e include un consulente personale! 

Certificato SSL
Dominio gratis
Supporto 24/7

Come funziona Open Graph di Facebook?

Quando un utente condivide un sito web sui social media questo deve in qualche modo essere visualizzato sulla piattaforma. L'immagine di anteprima e il testo di accompagnamento dovrebbero rispecchiare il mood del sito web nel miglior modo possibile e incoraggiare altri utenti a visitarlo. I web designer utilizzano Open Graph per assicurarsi che non vengano mostrati contenuti casuali nell'anteprima del sito web.

Questi esperti possono inserire tag Open Graph nel codice sorgente del sito web e influenzare così l'aspetto dell'anteprima sui social network. Ciò rende Open Graph interessante anche per il marketing online. Il protocollo offre ai proprietari dei contenuti un maggiore controllo sulla presentazione dei contenuti condivisi e ottimizza le informazioni da trasmettere agli utenti.

I tag corrispondenti sono posizionati nell'intestazione del documento HTML sotto forma di meta property:

<meta property="og:title" content="Titolo del sito web che deve apparire su Facebook."/>

Viene, quindi, definito innanzitutto il tipo di tag, per poi assegnargli un valore o contenuto.

Fatto

Twitter ha introdotto i propri tag. Se il bot Twitter, tuttavia, non riesce a individuarli durante la navigazione sulla pagina, ricorre anch'esso a Open Graph.

Prima di iniziare a inserire le diverse meta property, è necessario definire il vocabolario in un prefisso.

<html prefix="og: http://ogp.me/ns#">

Solo allora seguirà l'intestazione del documento.

I principali tag Open Graph

Esistono molti tag Open Graph che possono essere posizionati in un sito web. Le informazioni più importanti, tuttavia, sono le seguenti e dovrebbero essere integrate in tutti i siti web che devono essere condivisi sui social network.

Title

Quale titolo deve essere visualizzato nei social network quando il sito web corrispondente viene condiviso? Il tag title consente di specificare un nome. Su Facebook la lunghezza non deve superare i 95 caratteri. Dopo circa 50 caratteri segue un'interruzione di riga, un fattore importante che influisce sul modo in cui gli utenti reagiscono alla visualizzazione.

<meta property="og:title" content="Titolo del sito web"/>

Ogni documento web dispone comunque di un tag title, importante, ad esempio, per la visualizzazione nel browser o nei motori di ricerca. In linea di principio è possibile riprenderlo nel tag Open Graph, ma il protocollo Facebook permette agli operatori di siti web di definire anche un'alternativa adattata ai social media. Si potrebbe, ad esempio, sfruttare meglio la lunghezza prestabilita da Facebook scegliendo un'alternativa adeguata invece del tag standard che si utilizza nei motori di ricerca. Con un tag title alternativo è inoltre possibile adattare il titolo in modo più preciso al target dei social media.

Description

Anche il tag description è parte integrante di ogni documento HTML. Con un simile tag Open Graph i web designer adattano la descrizione del contenuto ai social network. Facebook prevede una lunghezza di circa 300 caratteri. A seconda del titolo o dell'URL, lo spazio può anche essere più breve, motivo per cui è buona norma limitarsi a un massimo di 200 caratteri.

<meta property="og:description" content="Descrizione del sito web"/>
Consiglio

A differenza della description HTML, la variante Open Graph non è rilevante per il SEO. Le keyword non sono importanti.

Image

Oltre al titolo e al testo descrittivo, può essere inclusa anche un’immagine nell'anteprima del sito web. Con il tag Open Graph gli operatori di siti web impediscono a Facebook e ad altre piattaforme di social media di scegliere un'immagine più o meno casuale della rispettiva pagina, evitando errori grossolani come quando, ad esempio, viene selezionata l'immagine di un banner pubblicitario al posto dell'immagine dell'articolo vero e proprio.

<meta property="og:image" content="http://www.example.org/images/anteprima.jpeg" />

La cosa migliore è creare appositamente un'immagine per l'anteprima per incrementare il numero di clic. Dovete prestare attenzione sia al contenuto dell'immagine, sia al suo formato. Una combinazione valida è quella immagine-testo, con il testo posizionato in modo centrale, dato che Facebook potrebbe tagliare il bordo dell'immagine. Il formato ottimale è 1200 x 627 pixel. Se selezionate queste impostazioni di dimensione, Facebook visualizzerà l'immagine sopra il title e la description. Se scegliete un formato più piccolo, l'immagine potrebbe scivolare come thumbnail accanto al testo.

Al tag image è possibile aggiungere altre informazioni per garantire una visualizzazione perfetta:

<meta property="og:image" content=" http://www.example.org/images/anteprima.jpeg" />
<meta property="og:image:secure_url" content="https://www.example.org/images/anteprima.jpeg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="627" />
<meta property="og:image:alt" content="Cascata tropicale" />
  • secure_url: fornisce un'alternativa valida se il sito web richiede il protocollo HTTPS.
  • type: il tipo di media di un'immagine è sempre "image", ma questa riga indica anche il formato utilizzato. (IANA ha creato una lista di tutti i tipi di media utilizzabili.)
  • width: questo record indica all'altro sito web quanto è larga l'immagine in pixel.
  • height: questo record indica all'altro sito web quanto è alta l'immagine in pixel.
  • alt: il testo alt viene visualizzato come descrizione del contenuto dell'immagine, come anche nel caso dell'HTML, se l'immagine di anteprima non può essere visualizzata.

URL

Il tag URL definisce l'indirizzo web del sito condiviso. Può apparire ridondante perché l'URL è comunque noto. Alcuni operatori di siti web hanno, tuttavia, diversi URL per lo stesso contenuto, una strategia utilizzata, ad esempio, per garantire una migliore rintracciabilità. Il tag Open Graph assicura che il collegamento rimandi sempre al sito web corretto.

<meta property="og:url" content="http://www.example.org/articles/id3498/" />
N.B.

Facebook non mostra l'URL completo nell'anteprima, ma solo il dominio.

Type

Il tipo indica la natura concreta del contenuto. La maggior parte dei siti web rientra nei tipi website, blog o article, ma ce ne sono anche altri:

  • website
  • article
  • blog
  • profile
  • book
  • video
    • video.movie
    • video.episode
    • video.tv_show
    • video.other
  • music
    • music.song
    • music.album
    • music.playlist
    • music.radio_station
N.B.

Per utilizzare correttamente il tipo music, Facebook deve prima attivare l'operatore del sito web corrispondente. La whitelist include principalmente grandi aziende come Spotify.

Oltre a quelli elencati ve ne sono di ulteriori tipi, per cui si fa riferimento a un elenco su schema.org. I tipi presentati in questo articolo sono tutti specificati sul sito ufficiale di Open Graph.

Fatto

Molti tipi consentono ulteriori specificazioni elencate come meta property separate dopo la definizione del tipo. In questo esempio specifichiamo più dettagliatamente un articolo. Per gli altri tipi potete trovare ulteriori specificazioni sulla homepage di Open Graph.

<meta property="og:type" content="article">
<meta property="article:published_time" content="2019-04-25">
<meta property="article:section" content="Multimedia">

Il codice in questo esempio indica ai social network non solo che l'oggetto è un articolo, ma anche quando è stato pubblicato e in quale categoria appare.

Panoramica dei tag Open Graph

Oltre ai più importanti tag Open Graph presentati sopra, ce ne sono altri che possono essere inseriti nel codice sorgente di un sito web per adattare ancora di più i contenuti ai social network.

Ogni tag Open Graph definisce un contenuto che deve essere inserito nel posto giusto sul social network e, per fare questo, deve essere fornito nel formato giusto. Per esempio, il tag og:title richiede una o più parole, cioè una stringa. Ma sono possibili anche i valori seguenti:

  • Boolean: valori di tipo vero o falso (true, false, 1, 0)
  • DateTime: indicazione temporale nel formato aaaa-mm-ggThh:mm:ss
  • Enum: set di specifiche predefinite (es. male, female)
  • Float: valore numerico decimale a 64 bit
  • Integer: valore numerico intero a 32 bit
  • String: sequenza di caratteri Unicode
  • URL: URL funzionante che utilizza i protocolli HTTP o HTTPS
  • Array: insieme di valori
Tag Descrizione Contenuto
og:title Titolo del sito web String
og:determiner Articolo grammaticale prima del titolo Enum
og:description Descrizione del sito web String
og:site_name Nome del sito web String
og:url URL canonico URL
og:locale Indicazioni su paese e lingua String (language_TERRITORY)
og:locale:alternate Indicazione di paese alternativo Array
og:type Tipo di contenuto String
og:image Fonte di un'immagine URL
og:image:secure_url URL alternativo e sicuro (HTTPS) URL
og:image:type Tipo di media dell'immagine String
og:image:width Larghezza in pixel Integer
og:image:height Altezza in pixel Integer
og:image:alt Testo alternativo dell'immagine String
og:audio Fonte per un file audio URL
og:audio:secure_url URL alternativo e sicuro (HTTPS) URL
og:audio:type Tipo di media del file audio String
og:audio:alt Testo alternativo del file audio String
og:video Fonte di un video URL
og:video:secure_url URL alternativo e sicuro (HTTPS) URL
og:video:type Tipo di media del video String
og:video:width Larghezza del video in pixel Integer
og:video:height Altezza del video in pixel Integer

Tag Open Graph per diversi tipi di oggetti:

Tag Descrizione Contenuto
music:duration Durata della canzone in secondi Integer (>=1)
music:album Album della canzone Array (music.album)
music:album:disc Disco (CD, LP) della canzone Integer (>=1)
music:album:track Numero della canzone nell'album Integer (>=1)
music:musician Nome dei musicisti Array (profile)
music:song Canzone sull'album String (music.song)
music:song:disc Disco (CD, LP) della canzone Integer (>=1)
music:song:track Numero della canzone nell'album Integer (>=1)
music:release_date Data di uscita dell'album DateTime
music:creator Creatore della playlist o della stazione radio Array (profile)
video:actor Attori nel video Array (profile)
video:actor:role Ruolo di un attore String
video:director Registi del video Array (profile)
video:writer Sceneggiatori del video Array (profile)
video:duration Durata del video in secondi Integer (>=1)
video:release_date Data di uscita del video DateTime
video:tag Parole chiave del video Array (String)
video:series Serie a cui appartiene l'episodio String (video.tv_show)
article:published_time Data di pubblicazione dell'articolo DateTime
article:modified_time Ultima modifica dell'articolo DateTime
article:expiration_time Data di scadenza dell'articolo DateTime
article:author Autori dell'articolo Array (profile)
article:section Categoria dell'articolo String
article:tag Parole chiave dell'articolo Array (String)
book:author Autori del libro Array (profile)
book:isbn ISBN del libro String
book:release_date Data di pubblicazione del libro DateTime
book:tag Parole chiave del libro Array (String)
profile:first_name Nome della persona String
profile:last_name Cognome della persona String
profile:username Pseudonimo della persona String
profile:gender Sesso della persona Enum

Come utilizzare Open Graph: esempio di codice

L'esempio seguente mostra un documento HTML molto semplice che è stato preparato utilizzando i tag Open Graph per i social network:

<!DOCTYPE html>
<html>
<html prefix="og: http://ogp.me/ns#">
<head>
<title>First Article</title>
<meta property="og:type" content="article">
<meta property="og:title" content="My first article">
<meta property="og:description" content="This is a very cool article.">
<meta property="og:site_name" content="Our Website">
<meta property="og:url" content="http://www.example.org/ogp_test.html">
<meta property="og:image" content="http://www.example.org/teddy.png">
<meta property="og:image:type" content="image/jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="627" />
<meta property="og:image:alt" content="A teddy bear" />
<meta property="article:published_time" content="2019-04-25">
<meta property="article:author" content="Carl">
</head>
<body>
<h1>My First Article</h1>
<p>This is a test.</p>
</body>
</html>

Nei tag Open Graph si specifica che il documento è un articolo, si definisce il titolo, la descrizione e l'URL e si seleziona un'immagine rappresentativa. Vengono fornite, inoltre, ulteriori informazioni sia sull'articolo stesso che sull'immagine.

Per verificare se il codice viene compreso correttamente da Facebook non è necessario attendere che qualcuno condivida il contenuto: con il debugger di condivisione, Facebook offre uno strumento per controllare che il codice sorgente non contenga errori e venga visualizzato correttamente. Con questo strumento potete inoltre vedere come l'anteprima apparirà su Facebook.

Per utilizzare il debugger è sufficiente un account Facebook. Il sito web da controllare deve, tuttavia, essere già disponibile online.

Per offrirti una migliore esperienza di navigazione online questo sito web usa dei cookie, propri e di terze parti. Continuando a navigare sul sito acconsenti all’utilizzo dei cookie. Scopri di più sull’uso dei cookie e sulla possibilità di modificarne le impostazioni o negare il consenso.