# Dimensioni dell’immagine OG: anteprime 1200×630 che funzionano ovunque
[Canonical HTML page](https://gradiently.design/it/guide/open-graph-image-size)
Ogni volta che qualcuno incolla il tuo link, una piccola immagine decide se qualcuno ci cliccherà. Ecco dimensione, tag e layout che fanno funzionare quell’immagine.
## The short version
- La dimensione dell’immagine Open Graph che funziona su quasi tutte le piattaforme è 1200×630 pixel, un rapporto di circa 1,91 a 1.
- Quando un link viene condiviso, le piattaforme leggono il tag og:image dall’HTML della pagina e poi memorizzano l’immagine, quindi le modifiche possono non comparire finché l’anteprima non viene aggiornata.
- L’indirizzo di og:image deve essere un URL https completo che si carica senza accesso, e i tag devono stare nell’HTML inviato dal server, non aggiunti dopo da JavaScript.
- Le anteprime dei link vengono spesso mostrate in piccolo, quindi un’immagine OG ha bisogno di un titolo breve a caratteri grandi, centrato, con margini generosi.
- Alcune app di messaggistica ritagliano le anteprime in un quadrato, quindi le parole più importanti vanno al centro dell’immagine.
La **dimensione dell’immagine OG** che funziona quasi ovunque è **1200×630 pixel**, un formato orizzontale con rapporto di circa 1,91 a 1. Facebook, LinkedIn, X, Slack, Discord e la maggior parte delle app di messaggistica costruiscono le anteprime dei link a partire da quest’unica immagine, dichiarata nel tag `og:image` della pagina. LinkedIn indica la sua immagine per i link come 1200×627, abbastanza vicina da permettere a un solo file 1200×630 di servire entrambe.
- Open Graph 1200×630: 1200 × 630
- Immagine link LinkedIn 1200×627: 1200 × 627
- Quadrato centrale 630×630: 630 × 630
L’anteprima standard del link, l’immagine link quasi identica di LinkedIn e il quadrato centrale che sopravvive quando un’app ritaglia l’anteprima.
## Cos’è un’immagine Open Graph e come vengono lette le anteprime
Open Graph è un insieme di tag `meta` nell’`head` di una pagina web. Quando qualcuno incolla il tuo link in un post o in una chat, la piattaforma manda un crawler sulla pagina, legge quei tag, scarica l’immagine e disegna la scheda di anteprima. Lo fa una volta e poi memorizza il risultato, a volte per giorni.
Tre dettagli colgono in fallo quasi tutti. L’indirizzo dell’immagine deve essere un **URL completo**, che inizia con `https://`, non un percorso relativo. Deve caricarsi per chiunque, senza un accesso o un banner dei cookie in mezzo. E i tag devono stare nell’HTML inviato dal server, perché la maggior parte dei crawler non esegue JavaScript, quindi i tag aggiunti da uno script dopo il caricamento della pagina non vengono mai visti.
```html
```
I tag di cui ha bisogno un’anteprima del link. X legge i tag Open Graph quando mancano i suoi, ma `twitter:card` impostato su `summary_large_image` chiede l’anteprima grande.
> **Larghezza e altezza aiutano** Dichiarare `og:image:width` e `og:image:height` permette ad alcune piattaforme di disegnare l’anteprima già alla prima condivisione, invece di aspettare di aver scaricato e misurato l’immagine.
## Progettare un’immagine OG che si legge in miniatura
Un’immagine 1200×630 raramente viene vista a 1200 pixel. In un feed su un telefono si riduce a una striscia larga quanto lo schermo, e in una chat può essere ancora più piccola. Progetta per la versione piccola: un titolo breve, testo grande, contrasto forte e niente di importante negli angoli.
- **Da tre a sette parole.** Il titolo della pagina ridotto al suo punto, non il titolo completo.
- **Testo grande.** Sulla tela da 1200×630, un titolo alto circa da 64 a 96 pixel resta leggibile quando l’anteprima si riduce.
- **Margini di circa 60 pixel** o più, così niente tocca un bordo che una piattaforma potrebbe arrotondare o ritagliare.
- **Una piccola firma del brand**, come un logotipo o il nome del sito, sempre nello stesso punto in ogni immagine.
- **Uno sfondo coerente**, così le persone riconoscono i tuoi link prima di leggerli.
Un’anteprima del link da 1200 per 630 con la scritta Come progettare un post di lancio su uno sfondo sfumato
Un’anteprima del link costruita per la versione piccola: una riga breve, grande e centrata, con una piccola firma sopra.
### Da evitare
- Il titolo completo della pagina in piccolo
- Uno screenshot della pagina stessa
- Parole negli angoli, dove i ritagli quadrati le tagliano
- Testo su una foto carica senza un’area calma
### Da fare
- Un titolo accorciato che si legge a colpo d’occhio
- Una scheda progettata con un’idea sola
- Le parole chiave nel quadrato centrale
- Uno sfondo calmo con un contrasto alto dietro il testo
Alle dimensioni piccole il contrasto conta di più, non di meno. Verifica che il titolo rispetti i rapporti del [contrasto dei colori](https://gradiently.design/it/guide/color-contrast-accessibility), e se lo sfondo è un gradiente, misura il contrasto dove stanno davvero le parole. [Il testo su un gradiente](https://gradiently.design/it/guide/text-on-gradient) mostra come trovare la zona calma.
## Un’immagine OG per tutto il sito, o una per pagina
Ogni sito ha bisogno di un’immagine predefinita per le pagine che non hanno di meglio. Ma un’immagine predefinita su ogni pagina rende identico ogni link condiviso, e dall’anteprima nessuno capisce di quale pagina si tratti. Le pagine più condivise meritano la loro.
| Tipo di pagina | Cosa deve dire l’immagine | Come crearla |
| --- | --- | --- |
| Home page | Il tuo nome e una promessa di una riga | Progettata una volta, a mano |
| Articolo o guida | Il titolo breve dell’articolo | Generata dal titolo |
| Pagina prodotto | Nome del prodotto, con il prodotto in vista | Generata, con l’immagine del prodotto |
| Pagina evento | Nome e data dell’evento | Progettata con lo stile dell’evento |
| Tutto il resto | Il tuo nome e lo sfondo distintivo | L’immagine predefinita del sito |
Dove un’immagine OG per pagina si guadagna il suo posto, e dove basta quella predefinita.
Creare a mano un’immagine separata per ogni articolo non regge sui grandi numeri. La maggior parte dei framework moderni può generare un’immagine OG da un template quando la pagina viene costruita o richiesta per la prima volta; [le immagini OG dinamiche](https://gradiently.design/it/guide/dynamic-og-images) spiega l’approccio.
- Guide: viola profondo: `linear-gradient(135deg, #140c2e 0%, #3b1f7a 55%, #7c4dff 100%)`
- Prodotto: petrolio scuro: `linear-gradient(135deg, #07201f 0%, #0e4d4a 55%, #2dd4bf 100%)`
- Eventi: brace: `linear-gradient(135deg, #2a0f0a 0%, #7a2a14 55%, #ff8a4c 100%)`
Una famiglia, tre sezioni: la stessa struttura dallo scuro al luminoso e la stessa angolazione, con una tinta diversa per sezione, così le anteprime sono coerenti ma dicono comunque dove porta un link.
## Come verificare le anteprime dei link
1. **Controlla i tag** Apri la pagina, guarda il sorgente e cerca `og:image`. Se non è nel sorgente, i crawler non lo vedranno.
2. **Apri l’indirizzo dell’immagine** Incolla l’URL di `og:image` in una finestra privata del browser. Deve caricarsi direttamente, in https, senza accesso.
3. **Usa lo strumento di verifica della piattaforma** Il [Post Inspector di LinkedIn](https://www.linkedin.com/post-inspector/) mostra come LinkedIn vede un URL e ne aggiorna la cache. Facebook ha un Sharing Debugger simile.
4. **Mandalo a te stesso** Incolla il link in un’app di chat e in una bozza di post. Guarda l’anteprima su un telefono, dove è più piccola.
5. **Svuota la cache dopo le modifiche** Se continua a comparire una vecchia immagine, dai alla nuova un nuovo indirizzo, per esempio aggiungendo `?v=2` al suo URL, poi verifica di nuovo.
## Formato e peso del file
Usa **PNG** per le schede progettate con testo e colori piatti, e **JPEG** per le immagini fotografiche. Evita l’SVG, che la maggior parte dei crawler non accetta per le anteprime, e fai attenzione ai formati più recenti che alcune piattaforme potrebbero non leggere. Tieni il file leggero, così il crawler lo scarica in fretta; una scheda progettata raramente deve essere pesante. Un tocco di grana evita il banding del gradiente quando una piattaforma lo ricomprime.
In Gradiently, **Anteprima link 1200×630** è una delle dimensioni predefinite, quindi puoi impaginare di nuovo un post come anteprima con **copia nei formati** e mantenere un solo look tra post e link. Per un lancio, l’immagine OG è una voce di una lista più lunga; [le grafiche per il lancio](https://gradiently.design/it/guide/launch-day-graphics) ha la checklist completa.
## FAQ
### Qual è la dimensione migliore per un’immagine OG?
1200×630 pixel, con un rapporto di circa 1,91 a 1. Funziona per Facebook, LinkedIn, X, Slack e la maggior parte delle app di messaggistica.
### Perché la mia anteprima del link mostra una vecchia immagine?
Le piattaforme memorizzano le anteprime. Aggiorna la pagina nello strumento di verifica della piattaforma, come il Post Inspector di LinkedIn, oppure dai alla nuova immagine un nuovo URL perché venga scaricata di nuovo.
### Perché la mia immagine OG non compare affatto?
Di solito l’URL di og:image è relativo, bloccato da un accesso o aggiunto da JavaScript dopo il caricamento della pagina. Usa un URL https completo nell’HTML reso dal server.
### X usa le immagini Open Graph?
Sì. X ricorre ai tag Open Graph quando mancano i suoi. Aggiungi un tag twitter:card impostato su summary_large_image per ottenere l’anteprima grande.
### Ogni pagina deve avere la sua immagine OG?
Le pagine condivise spesso, come articoli, prodotti ed eventi, ne traggono vantaggio. Tutto il resto può usare un’immagine predefinita del sito ben progettata.