Generatore di immagini OG: creatore di immagini per condivisione social

Un'immagine Open Graph è l'immagine che appare quando un collegamento viene incollato in una chat, un tweet o un canale Slack - e ogni piattaforma che ne esegue il rendering si aspetta una tela di circa 1200×630 pixel, la dimensione su cui sono state progettate le schede og:image di Facebook e summary_large_image di Twitter. Se sbagli la dimensione, l'immagine risulterà ritagliata, sfocata o schiacciata; sbagli il layout e il titolo sembra un frammento illeggibile su una foto occupata. Questo strumento compone l'immagine alla risoluzione target reale utilizzando l'API Canvas 2D, quindi ciò che vedi nell'anteprima è l'esatta griglia di pixel fornita nel PNG.

Scegli uno sfondo: un colore piatto, un gradiente lineare di due stop creato da due colori scelti o una foto caricata che viene ritagliata per riempire l'intero fotogramma 1200×630 nello stesso modo in cui lo farebbe una copertina con dimensioni di sfondo CSS, invece di essere allungata in modo sproporzionato. Digita un titolo e un sottotitolo facoltativo: entrambi vengono misurati carattere per carattere rispetto alle metriche dei caratteri dell'area di disegno, quindi un titolo troppo lungo per adattarsi a una riga si avvolge su una seconda o terza riga al confine di una parola reale anziché fuoriuscire dal bordo o essere troncato in modo invisibile. Scegli l'allineamento al centro o a sinistra, scegli un colore del testo che si legga sullo sfondo e rilascia un logo opzionale nell'angolo con una dimensione fissa e leggibile.

Sotto la tela, quattro piccole schede si avvicinano approssimativamente a come apparirà l'immagine finale una volta che una vera piattaforma la avvolge nelle sue cromature: la scheda di Twitter/X mostra solo il dominio e un titolo in grassetto sotto l'immagine senza riga descrittiva, Facebook aggiunge una striscia di dominio in maiuscolo sopra un blocco titolo e descrizione, LinkedIn inserisce il dominio sotto il titolo senza alcuna descrizione e l'incorporamento di Discord inserisce dominio, titolo e descrizione sopra l'immagine nel proprio tema scuro. Si tratta di approssimazioni di stile a scopo di pianificazione - chiaramente etichettate come illustrative, con una riga di dominio digitata tu stesso - non un recupero in tempo reale o uno screenshot delle piattaforme effettive, poiché condividere un collegamento e consentire al crawler di ciascuna piattaforma di leggere i meta tag og:image e og:title reali della tua pagina è ciò che effettivamente produce la scheda live.

Tutto viene visualizzato 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 canvas.toBlob() pulito contenente solo ciò che hai composto: nessun bordo mockup, barre del browser false o loghi della piattaforma vengono inseriti nell'immagine scaricata. Se in seguito è necessario ridimensionare o convertire il PNG esportato, gli strumenti di ridimensionamento e conversione delle immagini di questo sito riprendono esattamente da dove si era interrotto.