Free · Private · No signup
OG Image Generator
The missing file after a favicon and a compressed hero: a 1200×630 Open Graph image, Slack / LinkedIn / X previews, then HTML or Next.js tags. Nothing is uploaded.
1200×630
Slack
jaconir.online
Ship the social preview before you ship the page
1200×630 PNG plus Open Graph and Twitter tags — private, in the browser.
jaconir.online
Ship the social preview before you ship the page
X
jaconir.online
Ship the social preview before you ship the page
1200×630 PNG plus Open Graph and Twitter tags — private, in the browser.
Tags for this page
<meta property="og:type" content="website" /> <meta property="og:title" content="Ship the social preview before you ship the page" /> <meta property="og:description" content="1200×630 PNG plus Open Graph and Twitter tags — private, in the browser." /> <meta property="og:url" content="https://jaconir.online" /> <meta property="og:image" content="/og.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:title" content="Ship the social preview before you ship the page" /> <meta name="twitter:description" content="1200×630 PNG plus Open Graph and Twitter tags — private, in the browser." /> <meta name="twitter:image" content="/og.png" />
The same ritual as shipping a favicon
You already make tab icons and squeeze images for the network. Links still unfurl as a grey box unless og:image is a real file at the right size. This studio is that file — then the tags you paste next to it. Pair it with the Favicon Generator and the Image Compressor.
Open Graph 1200×630, X large image 1200×600, and a square option — not a random banner from Figma.
Drop a UI capture, or set title, kicker, logo, and a gradient like you would in a deck.
LinkedIn, X, and Slack-style previews sit next to the canvas so the crop is not a surprise.
Copy HTML meta or a Next.js metadata object with og:image width and height filled in.
Unreleased product shots stay on your machine.
PNG for sharp UI. JPEG when you need a smaller file for crawlers.
How to create an OG image
- 1
Pick the card size
Open Graph for most links. X if you only care about Twitter. Square for WhatsApp-heavy posts.
- 2
Write the title or drop a screenshot
Designed cards need a short title. Product launches often look better as a cropped screenshot with a dark overlay.
- 3
Check the safe area
Keep type inside the dashed box so platforms that crop the edges do not clip your headline.
- 4
Download and paste tags
Put the PNG in /public, then copy HTML or Next.js metadata into the page you are shipping.