Tag Open Graph: la guida completa alle anteprime di condivisione

I tag Open Graph sono tag <meta> nell’<head> di una pagina che decidono come appare quando viene condivisa: il titolo, la breve descrizione, l’immagine e il link. Il protocollo l’ha creato Facebook, e oggi lo leggono LinkedIn, X, Slack, Discord, WhatsApp, iMessage e la maggior parte delle altre app. Quattro tag formano il nucleo, og:title, og:type, og:image e og:url, e aggiungere una descrizione, una dimensione dell’immagine e un tag Twitter card copre quasi ogni piattaforma.

I tag Open Graph che ogni pagina deve avere

Incolla questo nell’head di una pagina e sostituisci i valori. Ogni tag usa property, non name, e ogni URL è assoluto.

<head>
  <title>Spring menu at Harbour Kitchen</title>
  <meta name="description" content="Twelve new plates for spring, from wild garlic soup to rhubarb tart." />

  <!-- Open Graph -->
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://harbourkitchen.example/spring" />
  <meta property="og:title" content="Spring menu at Harbour Kitchen" />
  <meta property="og:description" content="Twelve new plates for spring, from wild garlic soup to rhubarb tart." />
  <meta property="og:site_name" content="Harbour Kitchen" />
  <meta property="og:locale" content="en_GB" />
  <meta property="og:image" content="https://harbourkitchen.example/og/spring.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="The spring menu title over a soft green gradient" />

  <!-- X (Twitter) -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@harbourkitchen" />
</head>

L’og:image: dimensioni e formato

L’immagine è ciò che le persone notano davvero. Usa 1200×630 pixel, un rapporto di circa 1,91:1, la dimensione che le piattaforme si aspettano per le anteprime grandi e quella indicata in dimensioni dell’immagine Open Graph. Tieni le parole importanti e il logo lontani dai bordi, perché alcune app ritagliano a quadrato o arrotondano gli angoli.

Salvala come PNG quando è soprattutto testo e sfumatura, o come JPEG di alta qualità per le fotografie, e tieni il file leggero, idealmente poche centinaia di kilobyte, perché le piattaforme impongono limiti propri e i file grandi si caricano lentamente nei feed. PNG o JPG spiega la scelta e ottimizzare le immagini per il web tratta la compressione.

I tag Twitter card per X

X usa i propri tag twitter:, scritti con name invece di property. Quello che conta è twitter:card. Quando mancano twitter:title, twitter:description o twitter:image, X ripiega sui tag Open Graph corrispondenti, quindi di rado serve duplicarli.

Tag Open Graph per gli articoli

Post di blog e pagine di notizie possono dire di più su di sé impostando og:type su article e aggiungendo qualche proprietà. Alcune app mostrano la data o l’autore, e aiutano le piattaforme a capire la pagina.

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-10-01T09:00:00Z" />
<meta property="article:modified_time" content="2026-10-03T14:30:00Z" />
<meta property="article:author" content="https://harbourkitchen.example/about/ana" />
<meta property="article:section" content="Menus" />

Impostare i tag Open Graph in un framework

La maggior parte dei framework genera questi tag a partire dai dati. In Next.js esporti un oggetto metadata dalla pagina o dal layout e il framework scrive i tag per te. Imposta una volta metadataBase perché i percorsi relativi delle immagini diventino assoluti.

export const metadata = {
  metadataBase: new URL('https://harbourkitchen.example'),
  title: 'Spring menu at Harbour Kitchen',
  description: 'Twelve new plates for spring, from wild garlic soup to rhubarb tart.',
  openGraph: {
    type: 'website',
    url: '/spring',
    title: 'Spring menu at Harbour Kitchen',
    description: 'Twelve new plates for spring, from wild garlic soup to rhubarb tart.',
    siteName: 'Harbour Kitchen',
    images: [{ url: '/og/spring.png', width: 1200, height: 630, alt: 'The spring menu title over a soft green gradient' }],
  },
  twitter: { card: 'summary_large_image', site: '@harbourkitchen' },
}

Testare e correggere le anteprime di condivisione

1. 1

   Guarda il sorgente

   Apri il sorgente della pagina, non l’ispettore, e conferma che i tag siano nell’HTML del server. Molti crawler non eseguono JavaScript.

2. 2

   Controlla l’URL dell’immagine

   Incolla l’indirizzo di og:image in una finestra privata. Deve caricarsi senza login.

3. 3

   Riesegui la scansione

   Passa l’URL nello Sharing Debugger di Facebook e nel Post Inspector di LinkedIn per svuotare le loro cache.

4. 4

   Versiona l’immagine

   Se resta quella vecchia, cambia il nome del file o aggiungi una query string come ?v=2 e riesegui la scansione.

5. 5

   Condividila in privato

   Manda il link a te stesso su Slack o in un’app di messaggistica per vedere un’anteprima vera.

I tag sono la parte facile; l’immagine è il lavoro di design, e deve leggersi a dimensione di miniatura. In Gradiently l’anteprima del link è uno dei formati integrati a 1200×630, il Mark tiene la sua zona più calma dietro le parole, e il Designer può creare l’immagine di condivisione di una pagina da una frase, poi i formati dei post corrispondenti per ogni piattaforma.