Immagini Open Graph: formati, suggerimenti ed esempi
Le immagini Open Graph determinano cosa appare quando qualcuno condivide la tua pagina su Facebook, Twitter o LinkedIn. Un'immagine errata o assente riduce drasticamente i clic prima che i visitatori arrivino al sito.
Questa guida spiega dimensioni ottimali, principi di design, implementazione HTML e strumenti di test — tutto il necessario per creare anteprime social perfette su ogni piattaforma.
Indice
Cosa sono le immagini Open Graph e perché sono importanti
Open Graph è un protocollo creato da Facebook che consente di controllare l'aspetto delle tue pagine web quando vengono condivise sui social. Il meta tag og:image indica quale immagine usare come anteprima.
Quando un link viene condiviso su Facebook, Twitter o LinkedIn, la piattaforma recupera i metadati Open Graph e crea una scheda di anteprima. Questa scheda — con immagine, titolo e descrizione — è spesso l'unica cosa che si vede prima di cliccare.
Un'immagine Open Graph ben realizzata aumenta significativamente i clic. Un'immagine mancante o con dimensioni errate genera anteprime rotte, miniature tagliate o segnaposto generici poco professionali.
Tasso di clic
Le pagine con immagini OG di dimensioni corrette e alto contrasto ottengono sempre più clic rispetto a quelle senza immagine o con immagini di bassa qualità.
Più clic da ogni condivisione
Riconoscibilità del marchio
Un'identità visiva coerente in ogni link condiviso crea familiarità e fiducia nel pubblico prima che arrivi sulla pagina.
Coerenza tra le reti
Segnale SEO
L'engagement social generato da anteprime efficaci crea backlink e segnali di traffico che rafforzano nel tempo il posizionamento organico.
Beneficio indiretto sul posizionamento
Requisiti immagine specifici per piattaforma
Ogni piattaforma social ha dimensioni, proporzioni e limiti di peso consigliati. Rispettarli evita ritagli, distorsioni e segnaposto di riserva.
| Piattaforma | Dimensione consigliata | Rapporto d'aspetto | Dimensione massima file | Formato |
|---|---|---|---|---|
| 1200 × 630 px | 1.91 : 1 | 8 MB | JPG, PNG | |
| Twitter / X | 1200 × 675 px | 16 : 9 | 5 MB | JPG, PNG, WebP, GIF |
| 1200 × 627 px | 1.91 : 1 | 5 MB | JPG, PNG | |
| 1200 × 630 px | 1.91 : 1 | 300 KB | JPG, PNG | |
| Slack | 1200 × 630 px | 1.91 : 1 | 1 MB | JPG, PNG |
Dimensione universale sicura: 1200 × 630 pixel
Un'immagine 1200 × 630 px con rapporto 1,91:1 funziona su Facebook, LinkedIn, WhatsApp, Slack e molte altre piattaforme. Su Twitter si usa un ritaglio 16:9, quindi tieni i contenuti importanti al centro per evitare tagli.
Principi di design per immagini Open Graph efficaci
L'immagine appare in dimensioni ridotte nei feed social. Progetta prima per la miniatura, non per la versione a grandezza naturale.
Mantieni l'elemento visivo più importante — logo, titolo forte o illustrazione chiave — nel 80% centrale dell'immagine. Le piattaforme spesso tagliano i bordi, quindi evita contenuti ai margini.
Alto contrasto
Usa un forte contrasto tra testo, elementi in primo piano e sfondo. Le immagini a basso contrasto si perdono nei feed affollati accanto a post vivaci della concorrenza.
Leggibile a qualsiasi dimensione
Chiarezza tipografica
Se l'immagine contiene testo, usa caratteri grandi e in grassetto — almeno equivalenti a 36px — e non superare due righe. Testi più piccoli diventano illeggibili in miniatura.
Mantieni leggibile in piccolo
Coerenza del marchio
Inserisci logo o palette colori del marchio in ogni immagine OG. Ogni condivisione è un'impressione del brand, anche senza clic.
Ogni condivisione = punto di contatto del brand
Scegliere il formato immagine giusto
Usa JPEG per foto e PNG per grafiche con testo, loghi o trasparenze. WebP è sempre più supportato ma non ancora universale tra i crawler social.
| Formato | Ideale per | Supporto social | Dimensione file tipica | Raccomandazione |
|---|---|---|---|---|
| JPEG | Foto, gradienti | Universale | 60 – 150 KB | Predefinito per foto |
| PNG | Testo, loghi, trasparenze | Universale | 100 – 300 KB | Predefinito per grafiche |
| WebP | Entrambi, file più piccoli | Twitter, Slack (non tutti) | 40 – 120 KB | Solo supplementare |
Punta a 100–200 KB per l'immagine OG. Meno è meglio, ma evita compressioni eccessive che rendono l'immagine pixelata nei feed. WhatsApp impone un limite di 300 KB — se condividi su WhatsApp, mantieni le immagini sotto questa soglia.
Per approfondire i compromessi tra formati immagine, consulta la guida all'ottimizzazione delle immagini per il web . Per convertire immagini esistenti, la guida da JPG a WebP spiega il flusso di lavoro quotidiano.
Implementazione HTML e meta tag
Inserisci i meta tag Open Graph all'interno dell'elemento <head> del tuo HTML. Il tag og:image deve usare un URL assoluto — i percorsi relativi non sono supportati dai crawler social.
I tag minimi richiesti sono og:title, og:description, og:image e og:url. Il tag twitter:card abilita il formato scheda immagine grande su Twitter.
<meta property="og:type" content="article">
<meta property="og:title" content="Your Article Title">
<meta property="og:description" content="Compelling description under 160 characters">
<meta property="og:image" content="https://yourdomain.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://yourdomain.com/article">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://yourdomain.com/og-image.jpg">Specifica sempre og:image:width e og:image:height. Senza questi, le piattaforme devono scaricare e analizzare l'immagine prima di mostrare l'anteprima, rallentando il caricamento e aumentando il rischio di segnaposto.
Se usi Blazor, il componente Blazor SEO metadata gestisce automaticamente tutti i tag Open Graph con URL adattati alla cultura.
Test e debug delle immagini Open Graph
Le piattaforme social memorizzano in cache i metadati Open Graph in modo aggressivo. Dopo aver aggiornato tag o immagini, usa gli strumenti ufficiali di debug per forzare una nuova scansione e verificare l'anteprima prima di condividere.
Facebook Sharing Debugger
Inserisci il tuo URL su developers.facebook.com/tools/debug per ottenere metadati aggiornati, vedere quale immagine ha scelto Facebook e risolvere eventuali errori o avvisi.
Forza aggiornamento cache
Twitter Card Validator
Usa cards-dev.twitter.com/validator per vedere esattamente come apparirà la tua scheda Twitter. Clicca su 'Preview card' per visualizzare miniatura, titolo e descrizione nel formato scheda.
Anteprima prima della pubblicazione
LinkedIn Post Inspector
Il post inspector di LinkedIn su linkedin.com/post-inspector aggiorna la cache per il tuo URL e mostra come apparirà l'anteprima del post con i metadati attuali.
Aggiorna cache LinkedIn
Errori comuni e come risolverli
La maggior parte dei problemi con le immagini Open Graph deriva da pochi errori ricorrenti. Sapere cosa controllare fa risparmiare tempo nel debug.
- URL relativi. I crawler social non risolvono i percorsi relativi. Il valore og:image deve essere un URL assoluto completo di protocollo e dominio (https://tuodominio.com/percorso/immagine.jpg).
- Mancanza dei tag di larghezza e altezza. Senza og:image:width e og:image:height, le piattaforme devono scaricare e analizzare l'immagine prima di generare l'anteprima. Aggiungi entrambi per evitare questo passaggio extra.
- Immagini protette da autenticazione. I crawler non possono accedere a immagini che richiedono login o sono bloccate da robots.txt. L'immagine OG deve essere accessibile pubblicamente senza autenticazione.
- Rapporto d'aspetto errato. Un'immagine con rapporto diverso da 1,91:1 verrà ritagliata o mostrata con bande nere fastidiose. Testa sempre il rapporto prima di pubblicare.
- Cache piattaforma obsoleta. Aggiornare il file immagine senza cambiare nome o aggiungere query string fa sì che le piattaforme mostrino la versione cache vecchia. Cambia nome o usa il debugger per forzare l'aggiornamento.
Automazione della generazione delle immagini Open Graph
Per siti piccoli e blog, un'immagine OG statica per pagina è la soluzione più semplice e affidabile. Per pubblicazioni grandi o app con anteprime uniche per pagina, la generazione dinamica è più pratica.
La generazione dinamica crea un'immagine unica al momento della richiesta o della compilazione, basata su titolo, descrizione o contenuti della pagina. Il risultato è un'anteprima unica e coerente per ogni pagina senza creare immagini manualmente.
Quando automatizzare
Automatizza se hai molte pagine con immagini uniche, contenuti che cambiano spesso o se la creazione manuale non è scalabile.
Contenuti ad alto volume o dinamici
Quando usare immagini statiche
Per la maggior parte delle pagine — landing page, guide e articoli evergreen — un'immagine statica ben curata supera in qualità e coerenza di brand una generata.
Approccio orientato alla qualità
Strumenti popolari per la generazione dinamica includono Cloudinary (trasformazioni via URL), Vercel OG (render React/HTML in immagine al edge) e pipeline screenshot basate su Puppeteer o Playwright per qualsiasi stack tecnologico.