FeatureFrame Scarica

Immagini Open Graph per il sito della sua app

Aggiornato il 30 ottobre 2026

Un’immagine Open Graph è la figura che compare quando qualcuno condivide un link al suo sito su X, LinkedIn, Facebook, Slack, iMessage e quasi tutte le altre app. La prepari a 1200 × 630 pixel (1,91:1), la imposti con il tag og:image, aggiunga twitter:card con valore summary_large_image perché X la mostri grande, tenga il testo lontano dai bordi e la provi prima di condividere il link.

Cos’è un’immagine Open Graph

Open Graph è un insieme di meta tag, nato da Facebook, che indica alle altre app come mostrare un link alla sua pagina: titolo, descrizione, URL e immagine. Quando incolla un link in un post o in una chat, l’app scarica la pagina, legge questi tag e crea una scheda di anteprima.

Senza un tag immagine, l’app tira a indovinare. Potrebbe scegliere il suo logo, un’immagine qualsiasi della pagina o niente del tutto. Per il sito di un’app, quella scheda è spesso la prima cosa che le persone vedono del prodotto, quindi conviene controllarla.

Le dimensioni: 1200 × 630

Il protocollo Open Graph in sé non fissa una dimensione in pixel. In pratica, 1200 × 630, un rapporto 1,91:1, compare come scheda a tutta larghezza su quasi tutte le piattaforme, e il formato 1200 × 627 di LinkedIn è abbastanza vicino perché la stessa immagine funzioni anche lì. Usi questa dimensione ed esporti in JPEG o PNG sotto pochi megabyte, così si carica in fretta quando l’app la scarica.

Mantenga un’area sicura

Le app ritagliano l’immagine in modi leggermente diversi, e alcune la mostrano più piccola, come miniatura. Per mantenerla leggibile ovunque:

I tag da aggiungere

Li inserisca nell’<head> di ogni pagina. Il protocollo Open Graph indica come obbligatori og:title, og:type, og:image e og:url, e chiede og:image:alt ogni volta che imposta un’immagine.

TagValore di esempio
og:titleLaSuaApp – Tieni traccia delle abitudini
og:descriptionUna frase su cosa fa l’app.
og:typewebsite
og:urlhttps://lasuaapp.com/
og:imagehttps://lasuaapp.com/og.jpg (un URL completo, non un percorso relativo)
og:image:width / og:image:height1200 / 630
og:image:altLa schermata principale dell’app su un iPhone, su sfondo blu.
twitter:cardsummary_large_image

In HTML appare così:

X legge i tag Open Graph per titolo, descrizione e immagine quando mancano le sue versioni twitter:, quindi di solito twitter:card è l’unico tag specifico per X di cui ha bisogno. Senza di esso, X potrebbe mostrare una scheda piccola o nessuna scheda.

Un’immagine per pagina

La home page riceve l’immagine principale. Le altre pagine possono averne una propria:

Un’immagine specifica per la pagina fa sembrare un link condiviso fatto apposta per quella conversazione, e ottiene più clic della stessa scheda con il logo su ogni pagina.

Provi l’anteprima

Le app memorizzano le anteprime nella cache, a volte per giorni, quindi provi prima di condividere ampiamente un link.

Se continua a comparire una vecchia immagine, cambi il nome del file dell’immagine (per esempio og-2.jpg) e aggiorni il tag. Un nuovo URL aggira la maggior parte delle cache.

Errori comuni

Crearne una con un dispositivo incorniciato

Per un’app, l’immagine Open Graph più efficace è di solito l’app stessa: la sua schermata migliore nella cornice di un dispositivo, sul colore del suo brand, con un titolo breve. Poiché l’1,91:1 è largo, un telefono al centro lascia molto spazio. Lo usi per un titolo accanto al telefono, oppure mostri due o tre schermate in fila.

FeatureFrame ha una tela predefinita 1,91:1. Su un Mac:

  1. Trascini il suo screenshot. FeatureFrame riconosce l’iPhone o l’iPad dalle dimensioni e lo incornicia in un modello 3D di quel dispositivo.
  2. Scelga la tela 1,91:1 e, come sfondo, una tinta unita, una sfumatura o un’immagine sua.
  3. Inclini leggermente il dispositivo, oppure aggiunga fino a tre screenshot con la disposizione Riga.
  4. Esporti a 720p in JPEG. Una tela 1,91:1 risulta di 1376 × 720, la stessa forma di 1200 × 630 e un po’ più nitida. La usi così com’è o la ridimensioni alla misura esatta.

Se le serve un titolo, lo lasci a uno strumento di design o al modello del suo sito; il dispositivo incorniciato è la parte difficile da fare a mano.

Usi la stessa immagine come immagine principale dei post di lancio: veda la checklist delle immagini di lancio. Per le altre dimensioni che le serviranno, veda dimensioni delle immagini per condividere screenshot di app e, per le singole cornici, la libreria delle cornici dei dispositivi.

Altre guide