ansorweb, l'ultima spiaggia

Sei in: Home >>Tutorials

Open Graph: i meta tag per Facebook


di Antonella Sorbini, ultimo aggiornamento 26 giugno 2019

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 è

<meta property="NOME PROPRIETA'" content="VALORE">
 

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:

<meta property="og:type" content="website">
<meta property="og:url" content="http://www......"> <!--inserire l'indirizzo della pagina web da condividere-->
<meta property="og:title" content="titolo della risorsa web">
<meta property="og:image" content="http://www...indirizzo assoluto immagine.jpg"> <!--inserire l'indirizzo dell'immagine da far comparire nel box di condivisione su facebook-->
<meta property="og:description" content="descrizione chiara di almeno due frasi del sito ">
<meta property="og:locale" content="it_IT">

Open Graph per un articolo o post di un blog

<meta property="og:type" content="article">
<meta property="og:url" content="http://indirizzo pagina dell'articolo">
<meta property="og:title" content="titolo dell'articolo">
<meta property="og:image" content="http://www...indirizzo assoluto immagine della pagina.jpg">
<meta property="og:description" content="descrizione chiara di almeno due frasi dell'articolo">
<meta property="og:locale" content="it_IT">
<meta property="og:site_name" content="nome del sito">
<!-- TAG SPECIFICI PER ARTICOLO -->
<meta property="article:published_time" content="data di pubblicazione dell'articolo in formato AAAA-MM-GG">
<meta property="article:author" content="nome dell'autore">
<meta property="article:section" content="sezione del sito in cui si trova l'articolo">
<meta property="article:tag" content="tag1 da inserire">
<meta property="article:tag" content="tag2 da inserire">
<meta property="article:tag" content="tag3 da inserire">
<meta property="article:tag" content="tag4 da inserire">

Open Graph per una pagina web che contiene un video

<meta property="og:type" content="video.other">
<meta property="og:url" content="indirizzo web della pagina web">
<meta property="og:title" content="titolo del video">
<meta property="og:image" content="immagine rappresentativa del video">
<meta property="og:description" content="descrizione del contenuto del video">
<meta property="og:locale" content="it_IT">
<meta property="og:site_name" content="nome del sito">
<meta property="og:video" content="indirizzo del video">
<!-- ALCUNI TAG STRUTTURATI -->
<meta property="og:video:type" content="video/mp4">
<meta property="og:video:width" content="1200"> <!-- risoluzione -->
<meta property="og:video:height" content="680"> <!-- risoluzione -->
<!-- TAG SPECIFICI PER VIDEO -->
<meta property="video:release_date" content="data di pubblicazione dell'articolo in formato AAAA-MM-GG">
<meta property="video:duration" content="300">
<meta property="video:tag" content="tag1 da inserire">
<meta property="video:tag" content="tag2 da inserire">
<meta property="video:tag" content="tag3 da inserire">
<meta property="video:tag" content="tag4 da inserire">

 

 

 

 

Siti partners: Chiocciolina Creativa--- TuCrei.com--- LazioMedica--- TartinaFelice--- ScemoShop--- TagliaSpesa--- Anto page
powered by
Creativilab