How do you generate OG images with AI yourself?
Do it in two passes: first have a text model read the page and return a short structured brief — name, headline, colours, one visual idea — then feed that brief into an image model inside a fixed composition template. The template is what makes the output consistent; left to itself, an image model invents a new layout every run.
Why two passes
Asking an image model to 'make an OG image for example.com' fails twice over: it cannot read the site, and it has no reason to lay the card out the same way as last time.
Splitting the job fixes both. The text pass turns a messy page into five short facts. The image pass never sees the page at all — it only sees the facts and a rigid layout description.
Pass one — the brief
Fetch the page HTML and pull the title, meta description, first headings, some body text, the theme colour and any hex codes in the stylesheet. Hand that to a text model and demand structured output.
You are an art director. From the page content below, return JSON only:
{
"name": "the product or company name, 1-3 words",
"headline": "max 5 words, benefit-led, no punctuation at the end",
"subline": "max 9 words, plain language",
"accent_color": "#RRGGBB, the brand's strongest colour",
"background_color": "#RRGGBB, a dark or light base that the accent sits well on",
"mark_concept": "one sentence describing a simple geometric mark",
"visual_concept": "one sentence describing ONE object or scene, no text in it"
}
Rules: no marketing clichés, no words like 'revolutionary' or 'seamless'.
Headline must describe what the product does, not what it is.
PAGE CONTENT:
<<< paste title, description, headings and first 2000 characters of body >>>Pass two — the image prompt template
This is the part people skip. Every variable is filled from the brief; everything else stays byte-identical on every run, which is what makes ten different sites come out looking like one design system.
A 1200x630 landscape social share card. Flat vector illustration style,
crisp edges, no photographic texture, no gradients except one subtle
radial glow behind the main object.
LAYOUT (follow exactly):
- Background: solid {background_color}.
- Top-left: a small rounded square tile in {accent_color}, containing a
simple white geometric mark: {mark_concept}. Beside it, the word
"{name}" in a bold geometric sans-serif, white.
- Left half, vertically centred: the headline "{headline}" in a very
large bold geometric sans-serif, white, maximum two lines, tight
leading. Below it, "{subline}" in a regular weight at roughly one
third of the headline size, in white at 70% opacity.
- Right half: {visual_concept}. Rendered as a clean flat illustration in
{accent_color} with white and neutral greys. It must not overlap the
headline.
- Generous margins: keep all content at least 60px from every edge.
- No other text anywhere in the image. No logos other than the mark
described. No borders, no watermarks, no UI chrome, no drop shadows.The negative instructions at the end do as much work as the positive ones. Most bad output is extra text the model added on its own.
The favicon pass
A favicon is not a shrunken share card. Ask for one shape on one colour, and nothing else — at 16 pixels anything more becomes mud.
A 1024x1024 app icon. Solid {accent_color} background, fully filled,
no padding, no rounded corners, no border. Centred on it, one simple
white geometric mark: {mark_concept}. The mark occupies about 55% of
the canvas. Flat vector, no gradients, no shadows, no text, no letters,
no numbers. It must stay legible when scaled to 16x16 pixels.If you already have a logo
Do not ask a model to redraw it — it will produce something close but wrong, which is worse than nothing. Attach the logo as an input image and instruct the model to place it unmodified, or composite it yourself afterwards on a plain accent tile.
What to watch for
- Text rendering: image models still mangle long words. Keep the headline to five words and check every letter.
- Ratio drift: some models round 1200x630 to their nearest supported size. Generate at their native 16:9 or 3:2 and crop to 1200x630 yourself.
- Colour accuracy: hex codes are a suggestion to an image model. If the brand colour must be exact, draw the tile and text in code and let the model handle only the illustration.
- Cost: an image generation typically costs several times a text call. Cache the brief so restyling does not re-read the site.
Or skip all of it
Everything above is what Generate does here, with the template locked and the crop handled. The point of publishing it is that you should be able to tell whether a tool is doing something sensible before you trust it with your brand.
Sources
Keep going
Now check it on your own site.