Termine del glossario

Immagine Open Graph

Un'immagine Open Graph è l'immagine di anteprima mostrata quando un URL viene condiviso sui social, nelle app di messaggistica o nei risultati di ricerca. La definisce il meta tag og:image nell'HTML della pagina.

Perché le immagini OG sono importanti

Quando qualcuno condivide un link su Facebook, LinkedIn, X, Slack, iMessage o WhatsApp, la piattaforma recupera la pagina e crea un'anteprima completa di titolo, descrizione e immagine. L'immagine è l'elemento più grande e visibile: può determinare se una persona si ferma a guardare e apre il link.

Le pagine con immagini OG ben progettate ottengono percentuali di clic sensibilmente superiori rispetto a quelle con anteprime mancanti o generiche. In assenza di un'immagine, la piattaforma prova a sceglierne una e spesso recupera un elemento irrilevante, o nessuno. Il link condiviso può così sembrare difettoso o poco professionale.

Per team di marketing, lanci di prodotto, articoli e landing page, l'immagine OG è di fatto un cartellone che compare ogni volta che si condivide l'URL. Una strategia coerente e in linea con il brand fa sì che ogni condivisione rafforzi l'identità visiva e favorisca il coinvolgimento.

Le immagini OG compaiono anche nei risultati dei motori di ricerca, nei gestori di segnalibri e negli aggregatori di link, quindi il loro impatto va oltre le piattaforme social.

Specifiche delle immagini OG

Il protocollo Open Graph, creato in origine da Facebook, definisce una serie di meta tag nella sezione <head> della pagina. Quelli essenziali per le immagini sono:

  • og:image — l'URL dell'immagine. Deve essere assoluto, non relativo. HTTPS è fortemente consigliato.
  • og:image:width e og:image:height — le dimensioni in pixel. Includerle permette alle piattaforme di comporre l'anteprima senza attendere il download dell'intera immagine.
  • og:image:type — il tipo MIME, per esempio image/png o image/jpeg. È facoltativo, ma aiuta le piattaforme che verificano la compatibilità del formato.
  • og:image:alt — il testo alternativo che descrive il contenuto dell'immagine e ne migliora l'accessibilità.

La misura consigliata è 1200x630 pixel, con proporzioni di circa 1,91:1. Funziona bene nelle grandi schede di anteprima su Facebook, LinkedIn e nella maggior parte delle app di messaggistica. X (Twitter) usa proporzioni leggermente diverse, 1200x675 per le schede summary_large_image, ma 1200x630 si adatta in modo accettabile a tutte le principali piattaforme.

Le dimensioni del file devono restare sotto 5 MB per Facebook e sotto 8 MB per la maggior parte delle altre piattaforme. JPEG e PNG sono supportati ovunque; la compatibilità con WebP varia.

Come creare immagini OG efficaci

Un'immagine OG efficace è leggibile, riconoscibile e pertinente alla pagina. I principi fondamentali sono:

  • Inserire testo leggibile. L'immagine deve comunicare l'argomento anche senza il titolo che l'accompagna. Usa un'intestazione o una frase chiave in un carattere grande e chiaro. Evita il testo piccolo, che nelle miniature diventa illeggibile.
  • Mantenere il brand coerente. Inserisci logo e colori del brand in un modello di layout costante. Quando più link del sito compaiono nello stesso feed, la coerenza visiva li rende subito riconoscibili.
  • Progettare tenendo conto del ritaglio. Ogni piattaforma ritaglia l'immagine in modo diverso. Mantieni i contenuti essenziali, come testo e loghi, nell'80% centrale per evitare che vengano tagliati.
  • Automatizzare la generazione. Creare a mano un'immagine per ogni pagina non è sostenibile. Gli strumenti basati su screenshot possono generarle in modo dinamico, eseguendo il rendering di un modello e acquisendolo per ogni pagina.

In un vero flusso di pubblicazione

In un flusso come quello di Shotomatic, conviene trattare le immagini OG come un risultato ripetibile, non come un'attività di design isolata. Quando una voce del glossario, un articolo o una pagina di uno strumento passa in revisione, titolo, sottotitolo e token del brand possono alimentare un modello fisso e generare automaticamente l'anteprima corrispondente. Ogni URL condiviso resta così coerente con il brand senza rallentare la pubblicazione.

Errori comuni

  • Usare un'immagine a bassa risoluzione. Sotto i 600x315 pixel può comparire come piccola miniatura invece che come grande scheda. Usa almeno 1200x630 per una resa ottimale sulle varie piattaforme.
  • Dimenticare gli URL assoluti. I percorsi relativi, come /images/og.png, non funzionano. Il valore di og:image deve essere un URL completo di protocollo e dominio.
  • Non verificare sulle diverse piattaforme. Un'immagine corretta su Facebook può essere ritagliata in modo diverso su LinkedIn o X. Prima di pubblicare, controllala con lo strumento di anteprima di ogni piattaforma.
  • Lasciare in cache immagini obsolete. Le piattaforme memorizzano in cache le immagini OG in modo aggressivo. Dopo una modifica, usa il loro debugger per forzare un nuovo recupero. Cambiare il meta tag potrebbe non aggiornare l'anteprima per ore o giorni.
  • Usare la stessa immagine generica per ogni pagina. Un'immagine predefinita per tutto il sito è meglio di niente, ma quelle specifiche per pagina attirano molti più clic. Genera un'immagine unica che rispecchi il contenuto di ciascuna pagina.

Domande frequenti

Quali dimensioni deve avere un'immagine Open Graph?

La misura più consigliata è 1200x630 pixel. Funziona bene su Facebook, LinkedIn, X (Twitter) e nella maggior parte delle app di messaggistica. Su alcune piattaforme, le immagini più piccole di 600x315 possono apparire come miniature invece che come grandi schede di anteprima.

Cosa succede se una pagina non ha il tag og:image?

Le piattaforme cercano automaticamente un'immagine adatta nella pagina e spesso scelgono la prima abbastanza grande presente nell'HTML. Il risultato è imprevedibile e di frequente sbagliato: nell'anteprima potrebbe comparire un logo, una pubblicità o una foto non pertinente.

Posso usare su Twitter/X un'immagine diversa da quella di Facebook?

Sì. X supporta il proprio meta tag twitter:image, che sostituisce og:image. Se twitter:image è presente, X usa quello; altrimenti ripiega su og:image. Puoi così adattare l'immagine alle proporzioni di ciascuna piattaforma.

Come posso verificare un'immagine Open Graph?

Usa gli strumenti specifici delle piattaforme: Sharing Debugger di Facebook, Card Validator di X e Post Inspector di LinkedIn. Recuperano la pagina e mostrano esattamente l'aspetto dell'anteprima, compresi immagine, titolo e descrizione.

Le immagini Open Graph hanno bisogno di testo alternativo?

Il tag og:image:alt permette di fornire un testo alternativo per l'immagine di anteprima. Anche se non è supportato ovunque, migliora l'accessibilità dei link condivisi per chi usa uno screen reader.

Fonti

Risorse correlate

Che cos'è Immagine Open Graph? | Glossario | Shotomatic