Open Graph: i meta tag per Facebook

open graph, elenco dei meta tag utili per integrare al meglio le pagine web in facebook quando vengono condivise dagli utenti

Per fare in modo che la pagine web si presentino in modo corretto quando vengono condivise dagli utenti su Facebook, è bene seguire delle regole per fare in modo che le informazioni e le immagini caricate siano quelle corrette: succede altrimenti di vedere immagini e informazioni che non sono quelle che noi riteniamo le principali e che invece il crewler automatico di facebook interpreta erroneamante come tali mandando a monte i nostri sforzi per farci conoscere in modo adeguato!

Dunque Facebook ha creato il protocollo Open Graph stilando una serie di regole per dar modo di passare informazioni corrette all'atto della condivisione e per farlo usa dei meta tag che vanno inseriti nell'head della pagina che interessa condividere, alcuni meta tag sono un'infinità prevedendo tutti i possibili casi. Quattro sono obbligatori, altri facoltativi ma consigliati.

L' utilizzo è aperto anche ad altri social e siti web: Linkedin, Twitter, Google+ ecc, quindi è meglio implementarli sulle proprie pagine

La sintassi base è

Come si vede, si tratta di meta tag, quindi vanno inseriti nell'head della nostra pagina web

Obbligatori:

• og:type sito web, articolo, video, brano musicale, ecc
• og:url URL canonica della specifica risorsa web che viene condivisa
• og:title titolo della pagina o risorsa web che viene condivisa (non oltre gli 88 caratteri)
• og:image URL assoluta dell'immagine che rappresenta la risorsa da condividere (preferire 1200 x 630 pixel, dimensione minima 600 x 315 pixel, immagini inferiori saranno visibili ma moooolto piccole)

Array di valori

quando si hanno più valori possibili, si può usare un array, cosa utilissima per i tag associati al contenuto pubblicato, visto che se ne usano sempre parecchi

Documentazione ufficiale: The Open Graph protocol

Applicazioni pratiche:

per Home page di un sito web, inserire questi meta tag personalizzandoli:

Open Graph per un articolo o post di un blog

Open Graph per una pagina web che contiene un video