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

Choose a Template

Choose one of four predefined templates (Blog Post, Product Launch, Event, GitHub Repo) to set colors and style consistently with the context.

Customize content and colors

Insert title, subtitle, author and logo signature; regulate background, text and accent colors with color pickers or enter hexadecimal values.

Check the preview

The canvas 1200x630px updates in real-time with every change, showing exactly how the image will appear on social media.

Download PNG and copy meta tags

Click "Download PNG" to get the ready-to-use file, then "Copy Meta Tag" to paste Open Graph/Twitter Cards in the page's head.

Suggerimenti

  • Keep text within 2 lines: Auto-wrap will truncate text beyond space with "...".
  • Use high-contrast colors between text and background to ensure readability even in reduced preview sizes on mobile.
  • Check your page's real-time preview with Facebook Sharing Debugger or Twitter Card Validator after publishing.

Domande frequenti

What are the dimensions of the generated image?

The image is generated at 1200x630 pixels, the standard recommended size by Facebook, LinkedIn and Twitter/X for Open Graph previews. The canvas on the page is scaled only visually: the downloaded PNG maintains its actual resolution.

Are my data (title, text, colors) being sent to a server?

No. The generation occurs entirely in the browser via Canvas API: no text or color is sent to external servers.

Can I use different fonts than the default?

The generator uses Arial for cross-browser compatibility in the canvas rendering. Custom fonts cannot be loaded in this version, but you can modify title size, colors, and layout to differentiate the style.

What's the difference between the 4 templates?

Choose a template that fits your context (Blog Post, Product Launch, Event, GitHub Repo). Once selected, you can freely modify any color.

How do I use copied meta tags on my site?

Attach the copied block to the HTML head of the page, replacing the "https://yourdomain.com/og-image.png" placeholder with your actual public image URL. Without an absolute URL that can be reached by socials, they won't be able to retrieve the preview.