Generatore di immagini OG — Creatore di immagini per la condivisione social

Un'immagine Open Graph è l'immagine che appare quando un link viene incollato in una chat, un tweet o un canale Slack — e ogni piattaforma che la riproduce si aspetta una tela di circa 1200×630 pixel, la dimensione per cui sono state progettate le schede og:image di Facebook e summary_large_image di Twitter. Se sbagli la dimensione, l'immagine risulta ritagliata, sfocata o schiacciata; se sbagli il layout, il titolo appare come un frammento illeggibile su una foto affollata. Questo strumento compone l'immagine alla risoluzione reale usando l'API Canvas 2D, quindi ciò che vedi nell'anteprima è l'esatta griglia di pixel che verrà salvata nel PNG.

Scegli uno sfondo — un colore piatto, un gradiente lineare a due tappe creato con due colori a tua scelta, o una foto caricata che viene ritagliata per riempire l'intero fotogramma 1200×630 nello stesso modo in cui farebbe background-size: cover in CSS, senza essere stirata fuori proporzione. Inserisci un titolo e un sottotitolo opzionale: entrambi vengono misurati carattere per carattere usando le metriche dei font del canvas, così un titolo troppo lungo per stare su una riga va a capo su una seconda o terza riga in corrispondenza di un reale confine di parola, invece di fuoriuscire dal bordo o essere troncato invisibilmente. Scegli l'allineamento centrato o a sinistra, seleziona un colore del testo che sia leggibile sul tuo sfondo e inserisci un logo opzionale nell'angolo con una dimensione fissa e leggibile.

Sotto il canvas, quattro piccole schede approssimano l'aspetto dell'immagine finale una volta che una piattaforma reale la racchiude nella propria cornice: la scheda di Twitter/X mostra solo il dominio e un titolo in grassetto sotto l'immagine senza riga di descrizione, Facebook aggiunge una striscia con il dominio in maiuscolo sopra un blocco titolo-descrizione, LinkedIn posiziona il dominio sotto il titolo senza alcuna descrizione, e l'incorporamento di Discord mette il dominio, il titolo e la descrizione sopra l'immagine nel suo tema scuro. Si tratta di approssimazioni stilizzate a scopo di pianificazione — chiaramente etichettate come illustrative, con un dominio che inserisci tu — e non di un recupero dal vivo o di uno screenshot delle piattaforme reali, poiché è la condivisione di un link e il crawling dei veri tag meta og:image e og:title della tua pagina da parte di ciascuna piattaforma a produrre la scheda reale.

Tutto viene renderizzato localmente su un elemento canvas HTML nel tuo browser: il titolo, il sottotitolo, lo sfondo caricato e il logo non lasciano mai il tuo dispositivo, e il file esportato è un PNG pulito generato con canvas.toBlob() che contiene solo ciò che hai composto — nessun bordo dell'anteprima, finta barra del browser o logo della piattaforma viene incluso nell'immagine scaricata. Se in seguito avessi bisogno di ridimensionare o convertire il PNG esportato, gli strumenti di ridimensionamento e conversione immagini di questo sito riprendono esattamente da dove questo si ferma.