Somebody pasted your link. This is what they saw.
Every time a URL is shared in a chat, a channel or a feed, something renders. With anog:imageit is a picture with your name on it. Without one it is a grey rectangle and a truncated title, and it is the only impression most people will ever get of that page.
Your page title, cut off at abou…
example.com
Your page title, fully rendered
example.com
Generate the background. Composite the words.
This split is the whole technique, and it is what separates OG images that scale from OG images that get regenerated every time a title changes.
generated once, per section
The background
A 16:9 image with no text in it, visually calm on the left or bottom where type will land. One per section of your site is usually enough — docs, blog, product, pricing.
“Abstract paper-craft composition in cream and warm yellow, calm empty space in the left third, no text, no letters, soft studio shadow”
rendered per page, at build
The text layer
Title, section label and logo, drawn over the background by your framework’s image renderer. Crisp type, correct every time, and free to change — because changing it does not mean regenerating art.
Most modern frameworks ship this: a route that renders an image from markup at request or build time. Your generated background is the layer underneath it.
The checklist that stops previews breaking
Use an absolute URL
og:image must be a full https URL. A relative path silently fails on every platform that scrapes it.
Hit 1200 × 630 exactly
Generate 16:9 and pad or extend to the exact pixels. Off-ratio images get cropped in ways you did not choose.
Keep it under about 1 MB
Some scrapers give up on large files. A compressed WebP or JPEG is well inside any limit — and this is a 1-credit call.
Set og:image:width and height
It lets platforms lay out the card before the image loads, which avoids a flash of grey.
Add twitter:card = summary_large_image
Without it you get the small square card instead of the wide one.
Re-scrape after a change
Caches are aggressive. Use the platform’s debug tool or version the filename.
Make it impossible to forget
The reason pages ship without an OG image is never disagreement about whether they should have one. It is that the step lives outside the build. Move it inside and the problem stops recurring.
- A build check that fails when a route has no og:image.
- A generation call for any section background that does not exist yet.
- A compression pass so nothing over 1 MB ever reaches the CDN.
const missing = sections.filter(
(s) => !existsSync(`public/og/${s.slug}.webp`)
);
const requests = missing.flatMap((s) => [
{
tool: "generate_image",
args: {
prompt: `${HOUSE_STYLE}, ${s.motif},
no text, calm left third`,
aspectRatio: "16:9",
referenceImages: [BRAND_REFERENCE],
},
},
]);
// one multicall, every missing backgroundOpen Graph questions
What size should an Open Graph image be?
1200×630 pixels, a 1.91:1 ratio that every major platform renders without cropping. Generate at 16:9 — the closest available ratio — and letterbox or extend to the exact pixel dimensions at build time.
Should the page title be inside the image?
Yes, but not from the image model. Generate a text-free background and composite the title over it programmatically, either in a build step or with a runtime image renderer. That way the type is crisp, correct and updates when the title does.
Do I need a different image per page?
You need one that is not obviously generic. A single site-wide OG image is far better than none; a per-section image is better still. Per-page is worth it for content people actually share — articles, docs pages, product pages.
Why does my preview not update after I change the image?
Platforms cache aggressively. Most offer a debugging tool that forces a re-scrape, and changing the image filename or adding a version query string is the reliable way to break the cache.
Does an OG image affect SEO?
Not directly as a ranking factor. It affects click-through from social and chat, which affects traffic — and a link that renders as a grey box gets shared less than one that renders as a picture.