Generatore di immagini OG
Digita un titolo e un sottotitolo, scegli uno sfondo a tinta unita o sfumato e un URL del logo facoltativo, visualizza in anteprima dal vivo la card social 1200x630 e scaricala come PNG.
Generatore di immagini OG — Crea l'immagine Open Graph 1200x630 che compare quando la tua pagina viene condivisa su Facebook, X/Twitter, LinkedIn o Slack. Inserisci un titolo e un sottotitolo, scegli uno sfondo a tinta unita o una sfumatura a due colori, imposta il colore e l'allineamento del testo e, se vuoi, indica l'URL di un logo. Un'anteprima dal vivo si ridisegna mentre digiti e puoi scaricare la card finita come PNG. L'immagine viene disegnata interamente su un canvas nel tuo browser, quindi il tuo testo e i tuoi colori non lasciano mai il tuo dispositivo.
Cos'è Generatore di immagini OG?
Il Generatore di Immagini OG è uno strumento gratuito nel browser per creare card di condivisione social (immagini Open Graph / Twitter Card) nella dimensione standard di 1200x630 pixel. Marketer, blogger, sviluppatori indipendenti e chiunque pubblichi una landing page lo usano per ottenere una miniatura di anteprima pulita senza aprire un'app di design. Digiti il titolo e un sottotitolo facoltativo, scegli un colore a tinta unita o una sfumatura diagonale, imposti il colore del testo e l'allineamento a sinistra o centrato, e incolli l'URL di un logo se vuoi un marchio nell'angolo. Il canvas si ridisegna dal vivo per perfezionare testo e colori, poi esporti un PNG pronto da usare nel tuo meta tag og:image.
Come usare Generatore di immagini OG
- Digita il tuo titolo nel campo Titolo; viene disegnato grande e in grassetto e va a capo su un massimo di tre righe.
- Aggiungi un sottotitolo facoltativo sotto il titolo, oppure lascialo vuoto per mostrare solo il titolo.
- Apri le Impostazioni per scegliere uno sfondo a tinta unita o sfumato, impostare i colori dello sfondo e del testo e scegliere l'allineamento a sinistra o centrato.
- Facoltativamente incolla l'URL di un'immagine logo (un'immagine con CORS abilitato) per posizionare un logo sopra il testo.
- Osserva l'anteprima 1200x630 aggiornarsi dal vivo, fai clic su di essa per ingrandirla, poi scarica la card come PNG.
Esempi
Card di condivisione per un articolo del blog
Digita il titolo dell'articolo come titolo e l'autore o il nome del sito come sottotitolo, scegli una sfumatura in linea con il tuo brand e scarica un PNG 1200x630 da usare come og:image del post.
Banner di lancio prodotto
Usa un colore di brand a tinta unita, allineamento centrato, il tuo slogan come titolo e un URL del logo nell'angolo per produrre una card di lancio coerente su ogni canale social.
Domande frequenti
- Qual è la dimensione dell'immagine generata?
- Sempre 1200x630 pixel, il rapporto standard di Open Graph e di Twitter summary-large-image (circa 1,91:1). Questa dimensione viene mostrata nitida nelle anteprime dei link di Facebook, X/Twitter, LinkedIn, Slack e Discord.
- Come aggiungo il mio logo?
- Incolla un URL diretto a un'immagine logo nel campo URL del logo. L'immagine viene recuperata da quell'URL e disegnata sopra il testo a un'altezza fissa mantenendone le proporzioni. La sorgente deve consentire l'uso cross-origin (CORS), altrimenti il browser bloccherà il suo disegno sul canvas.
- Posso controllare i colori e il layout?
- Sì. Nelle Impostazioni puoi passare tra uno sfondo a tinta unita e una sfumatura diagonale a due colori, impostare il colore o i colori dello sfondo e il colore del testo, e scegliere l'allineamento a sinistra o centrato. Il titolo e il sottotitolo vanno a capo automaticamente e il testo lungo viene troncato con i puntini di sospensione.
- Il mio testo o la mia immagine vengono caricati da qualche parte?
- No. La card viene disegnata interamente su un canvas HTML nel tuo browser ed esportata in PNG localmente. Il tuo titolo, sottotitolo e colori non vengono mai inviati a un server. Viene recuperato solo un URL del logo che fornisci tu, e quella richiesta va direttamente dal tuo browser all'host che hai scelto.
Strumenti correlati
Codice in immagine
Trasforma uno snippet di codice in un'immagine con evidenziazione della sintassi nel tuo browser, con oltre 20 linguaggi, temi e sfondi personalizzati, numeri di riga ed esportazione PNG o SVG.
Verificatore di contrasto dei colori
Controlla il contrasto WCAG 2.1 e il punteggio APCA Lc tra testo e sfondo, vedi i badge AA, AAA e 3:1 e applica il colore conforme più vicino.
Miscelatore di colori
Mescola due colori HEX nel rapporto scelto, nello spazio RGB o Lab, e ottieni il colore intermedio come campione e valore HEX copiabile.
Generatore di sfumature di colore
Trasforma un colore HEX di base in una scala OKLCH, HSL o RGB con livelli regolabili, suggerimenti di contrasto WCAG per livello ed esportazione in CSS, Tailwind e JSON.