OG Image Generator

Crea immagini Open Graph per social media preview del tuo sito.

Configurazione

Template

Contenuto

Colori

Anteprima 1200x630

Dimensione reale: 1200x630px. Il canvas viene scalato per la visualizzazione.

Meta Tags HTML

<meta property="og:title" content="Il Tuo Titolo Principale">
<meta property="og:description" content="Sottotitolo o descrizione breve del contenuto">
<meta property="og:image" content="https://yourdomain.com/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://yourdomain.com/og-image.png">
Tutti gli strumenti

Come utilizzare OG Image Generator

Scegli un template

Seleziona uno dei 4 template predefiniti (Blog Post, Product Launch, Event, GitHub Repo) per impostare rapidamente colori e stile coerenti col contesto.

Personalizza contenuto e colori

Inserisci titolo, sottotitolo, autore e sigla del logo; regola i colori di sfondo, testo e accento con i color picker o inserendo i valori esadecimali.

Controlla l'anteprima

Il canvas 1200x630px si aggiorna in tempo reale a ogni modifica, mostrando esattamente come apparirà l'immagine sui social.

Scarica il PNG e copia i meta tag

Clicca "Scarica PNG" per ottenere il file pronto all'uso, poi "Copia tag" per incollare i meta tag Open Graph/Twitter Card nell'head della pagina.

Suggerimenti

  • Mantieni il titolo entro 2 righe: il wrap automatico troncherà con "…" il testo che supera lo spazio disponibile.
  • Usa colori ad alto contrasto tra testo e sfondo per garantire leggibilità anche nelle anteprime ridotte su mobile.
  • Testa sempre l'anteprima reale con il Facebook Sharing Debugger o il Twitter Card Validator dopo la pubblicazione.

Domande frequenti

Che dimensioni ha l'immagine generata?

L'immagine è generata a 1200x630 pixel, la dimensione standard raccomandata da Facebook, LinkedIn e Twitter/X per le anteprime Open Graph. Il canvas nella pagina è scalato solo visivamente: il PNG scaricato mantiene sempre la risoluzione reale.

I miei dati (titolo, testo, colori) vengono inviati a un server?

No. La generazione avviene interamente nel browser tramite Canvas API: nessun testo o colore inserito viene trasmesso a server esterni.

Posso usare font diversi da quello di default?

Il generatore usa Arial per garantire compatibilità cross-browser nel rendering canvas. Non è possibile caricare font custom in questa versione; puoi però modificare dimensione titolo, colori e layout per differenziare lo stile.

Che differenza c'è tra i 4 template?

I template impostano solo i valori di partenza (sfondo, gradiente, colore testo e accento) coerenti con il contesto - Blog Post, Product Launch, Event, GitHub Repo. Dopo averne scelto uno puoi comunque modificare liberamente ogni colore.

Come uso i meta tag copiati sul mio sito?

Incolla il blocco copiato nell'head HTML della pagina, sostituendo l'URL placeholder "https://yourdomain.com/og-image.png" con l'URL pubblico reale dove hai caricato il PNG scaricato. Senza un URL assoluto raggiungibile, i social non riusciranno a recuperare l'anteprima.