# Tag Open Graph: la guida completa alle anteprime di condivisione

[Canonical HTML page](https://gradiently.design/it/guide/open-graph-tags)

Ogni link condiviso diventa un piccolo poster della tua pagina, costruito con pochi meta tag. Se sono giusti l’anteprima sembra progettata; se ne manca uno, le piattaforme tirano a indovinare. Ecco l’insieme completo, con il codice da copiare.

## The short version

- I tag Open Graph sono meta tag nell’head di una pagina che dicono a piattaforme social e app di messaggistica quale titolo, descrizione e immagine mostrare quando il link viene condiviso.
- Il protocollo Open Graph considera og:title, og:type, og:image e og:url i tag di base obbligatori, mentre og:description e og:site_name sono fortemente consigliati.
- Un og:image di 1200×630 pixel, indicata con un URL https assoluto, funziona bene su Facebook, LinkedIn, X, Slack, iMessage e la maggior parte delle altre app.
- X legge twitter:card per scegliere il formato dell’anteprima e, se mancano i suoi tag, ripiega sui tag Open Graph per titolo, descrizione e immagine.
- Le piattaforme mettono in cache le anteprime, quindi dopo aver cambiato i tag devi rieseguire la scansione dell’URL con uno strumento di debug come lo Sharing Debugger di Facebook o il Post Inspector di LinkedIn.

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.

```html
<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>
```

Un insieme completo e funzionante. X prenderà titolo, descrizione e immagine dai tag Open Graph qui sopra.

| Tag | Cosa fa | Consigli |
| --- | --- | --- |
| `og:title` | Il titolo in grassetto dell’anteprima | Sotto i 60 caratteri circa; il nome del sito non serve |
| `og:description` | Una o due righe sotto il titolo | Circa 110-160 caratteri; alcune app la nascondono |
| `og:image` | L’immagine dell’anteprima | URL https assoluto, 1200×630 |
| `og:url` | L’indirizzo canonico della pagina | Uguale al tuo link canonical, senza parametri di tracciamento |
| `og:type` | Che cos’è la pagina | `website` per la maggior parte delle pagine, `article` per gli articoli |
| `og:site_name` | Il tuo brand, in piccolo | Tienilo uguale su ogni pagina |
| `og:image:alt` | Una descrizione dell’immagine | Letta ad alta voce dagli screen reader su alcune piattaforme |

I tag che contano in pratica. L’elenco completo è sul sito del protocollo, ogp.me.

## 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](https://gradiently.design/it/guide/open-graph-image-size). Tieni le parole importanti e il logo lontani dai bordi, perché alcune app ritagliano a quadrato o arrotondano gli angoli.

- Open Graph 1200×630: 1200 × 630
- Immagine link LinkedIn 1200×627: 1200 × 627
- Ritaglio quadrato 1200×1200: 1200 × 1200

La forma dell’anteprima grande e il quadrato a cui ritagliano alcune app di chat e la summary card di X. Centra il messaggio perché sopravviva a entrambi.

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](https://gradiently.design/it/guide/png-vs-jpeg) spiega la scelta e [ottimizzare le immagini per il web](https://gradiently.design/it/guide/lighthouse-image-performance) tratta la compressione.

Un’ampia immagine di condivisione 1200 per 630 con il nome di un ristorante, un titolo su un menu di primavera e una riga di prenotazione su una sfumatura morbida

Un’immagine di condivisione pensata per l’anteprima: parole brevi, centrate, abbastanza grandi da leggersi alla dimensione in cui le mostra un feed.

> **L’immagine deve essere raggiungibile** Le piattaforme scaricano `og:image` dai propri server. Un percorso relativo, una pagina dietro login, un firewall che blocca i bot sconosciuti o un URL firmato scaduto ti danno un’anteprima vuota.

## 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 | Valori | Note |
| --- | --- | --- |
| `twitter:card` | `summary_large_image` o `summary` | Immagine grande, o una piccola miniatura quadrata |
| `twitter:site` | `@yourbrand` | L’account del sito |
| `twitter:creator` | `@author` | L’autore di un articolo |
| `twitter:image:alt` | Testo | Usalo quando l’immagine è diversa da quella og |

Aggiungi solo questi e lascia che Open Graph fornisca il resto.

## 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.

```html
<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" />
```

Le date usano ISO 8601. Tieni onesto modified_time: aggiornalo solo quando il contenuto cambia in modo significativo.

## 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.

```ts
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' },
}
```

Controlla la documentazione della versione del tuo framework, perché le API dei metadata cambiano tra le release. Per immagini generate pagina per pagina, vedi [immagini OG dinamiche](https://gradiently.design/it/guide/dynamic-og-images).

## Testare e correggere le anteprime di condivisione

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. **Controlla l’URL dell’immagine** Incolla l’indirizzo di og:image in una finestra privata. Deve caricarsi senza login.
3. **Riesegui la scansione** Passa l’URL nello Sharing Debugger di Facebook e nel [Post Inspector di LinkedIn](https://www.linkedin.com/post-inspector/) per svuotare le loro cache.
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. **Condividila in privato** Manda il link a te stesso su Slack o in un’app di messaggistica per vedere un’anteprima vera.

### Anteprima vuota o sbagliata

- Tag inseriti da JavaScript lato client
- Percorso og:image relativo
- og:url punta a un’altra pagina
- Immagine minuscola o di forma strana
- Tag cambiati, anteprima invariata

### Rimedio

- Genera i tag sul server
- Usa un URL https completo
- Fai coincidere og:url con l’indirizzo canonico
- Esporta a 1200×630
- Riesegui la scansione, o rinomina l’immagine

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](https://gradiently.design/it/guide/social-media-image-sizes).

## FAQ

### Cosa sono i tag Open Graph?

Meta tag nell’head di una pagina, come og:title e og:image, che dicono a piattaforme social e app di messaggistica cosa mostrare quando il link viene condiviso.

### Quali tag Open Graph sono obbligatori?

Il protocollo indica og:title, og:type, og:image e og:url come tag di base. Aggiungi og:description e og:site_name per un’anteprima completa.

### Che dimensione deve avere un og:image?

1200×630 pixel funziona su Facebook, LinkedIn, X e la maggior parte delle app di chat. Usa un URL https assoluto e tieni il contenuto chiave al centro.

### Mi servono i tag Twitter card se ho quelli Open Graph?

Aggiungi `twitter:card`, di solito impostato su `summary_large_image`. X ripiega su Open Graph per titolo, descrizione e immagine.

### Perché l’anteprima del mio link non si aggiorna?

Le piattaforme mettono in cache le anteprime. Riesegui la scansione dell’URL nello Sharing Debugger di Facebook o nel Post Inspector di LinkedIn, o rinomina il file dell’immagine.

### Per i tag og devo usare property o name?

I tag Open Graph usano `property` e quelli Twitter usano `name`. La maggior parte dei parser accetta entrambi, ma seguire la convenzione evita sorprese.