Immagine Open Graph

Un'immagine Open Graph è l'immagine di anteprima che i social network, le app di messaggistica e gli strumenti di collaborazione mostrano quando qualcuno condivide un link. La pagina la dichiara con il meta tag og:image del protocollo Open Graph, introdotto da Facebook nel 2010.

Il valore del tag è un URL assoluto dell'immagine. Tag facoltativi indicano larghezza, altezza, tipo MIME e testo alternativo: og:image:width, og:image:height, og:image:type e og:image:alt. X, precedentemente Twitter, legge i propri tag twitter:image e usa i tag Open Graph quando mancano.

I servizi scaricano e memorizzano in cache l'immagine quando il link viene condiviso per la prima volta, quindi le modifiche potrebbero non comparire finché la cache non viene aggiornata.

Perché le immagini OG sono importanti

Un link con un'immagine di anteprima chiara occupa più spazio in un feed o in una chat di un URL nudo, e mostra ai lettori di cosa tratta la pagina prima che facciano clic. Senza og:image, i servizi scelgono un'immagine dalla pagina oppure non mostrano alcuna immagine.

Specifiche delle immagini OG

Proprietà	Pratica comune
Dimensione	1200×630 pixel
Rapporto di aspetto	Circa 1.91:1
Formato	PNG o JPG
URL	Assoluto, raggiungibile pubblicamente in HTTPS
Testo	Tenuto lontano dai bordi, che alcuni servizi ritagliano

Ogni piattaforma pubblica le proprie linee guida e le cambia nel tempo. Consulta la documentazione attuale delle piattaforme che ti interessano.

Come creare immagini OG efficaci

1. Parti da una tela 1200×630.
2. Aggiungi un titolo breve in caratteri grandi e uno screenshot o un elemento visivo di prodotto chiaro.
3. Mantieni i contenuti importanti nell'area centrale.
4. Esporta in PNG per progetti con molto testo o in JPG per le foto, e mantieni il file piccolo.
5. Verifica il link nello strumento di anteprima o di debug di ogni piattaforma.

In un flusso di pubblicazione reale

I team spesso generano immagini OG da un template per ogni post del blog o pagina di documentazione. Uno screenshot del prodotto dentro il template mostra l'interfaccia reale. Catturalo a una dimensione più grande dello spazio disponibile, poi riducilo per ottenere testo nitido.

Errori comuni

• Usare un URL relativo in og:image.
• Collocare il testo vicino ai bordi, dove alcune piattaforme ritagliano.
• Dimenticare la cache dopo aver aggiornato l'immagine.
• Usare uno screenshot alto che viene ritagliato in una striscia illeggibile.

Hai un'immagine da correggere adesso?

Crea un'anteprima 1200×630 da uno screenshot con Social Image Composer, e verifica il rapporto con Aspect Ratio Calculator.

Domande frequenti

L'immagine OG è uguale al favicon?

No. Il favicon è una piccola icona del sito. L'immagine OG è un'anteprima grande per i link condivisi.

Posso usare SVG per og:image?

Molti servizi non mostrano anteprime SVG. Usa PNG o JPG.

Fonti

• The Open Graph protocol

Risorse correlate

• Favicon: la piccola icona mostrata nelle schede del browser.
• Image Compressor: mantiene piccolo il file di anteprima.