How to Generate Open Graph Images for Link Previews

Generate open graph image online is not the same as fix my meta tags. You need a file at a public HTTPS URL and tags that point to it. ToolComb's OG Image Generator handles the art pass locally; Open Graph Preview sanity-checks the card layout from the strings you enter.

Tag semantics and cache behavior live in How Open Graph tags control link previews. This page is the asset workflow.

What bots actually download

Chat apps and social crawlers fetch og:image (and fallbacks). They do not run your hero animation. They do not respect background-image in CSS unless something else exposes it as og:image.

Minimum viable set alongside the image:

• og:title - card headline, not necessarily identical to <title>.
• og:description - one or two sentences.
• og:url - canonical page URL.
• og:image - absolute HTTPS URL to the PNG or JPG you host.

Optional but useful: twitter:card = summary_large_image when you care about X/Twitter layout.

Build the image in the generator

Open OG Image Generator.

1. Set title and subtitle text that reads at thumbnail size - big type, short lines.
2. Pick layout colors that match brand without low-contrast gray-on-gray.
3. Add a logo or photo if the template allows - keep faces and marks inside the safe center; LinkedIn and Slack crop the sides.
4. Export at the target aspect (typically 1200×630).

Composition runs in the browser. You still must upload the export to your own hosting - S3, Cloudflare R2, GitHub raw on a public repo, Netlify public/og/ - anywhere the unfurl bot can GET without a cookie.

Host and reference with absolute URLs

Relative paths break unfurlers:

<!-- weak -->
<meta property="og:image" content="/og/launch.png" />

<!-- better -->
<meta property="og:image" content="https://example.com/og/launch.png" />

Check that the image URL returns 200 in a private window without logging in. CDNs that 403 empty Referer headers kill previews even when the HTML is perfect - details in Why link preview shows wrong image.

Preview before you blast the link

Paste og:title, og:description, and og:image into Open Graph Preview. Squint at the crop the way a phone notification panel would.

After deploy, run Meta Tag Extractor on URLs you are allowed to fetch to confirm production HTML matches what you thought you shipped.

The preview tool does not post to networks and does not clear caches.

Design rules that survive cropping

• One idea per card - product name + hook, not a feature matrix.
• High contrast - dark text on busy photos fails at small size.
• No critical text in the outer 10% - platforms shave edges.
• File weight - a 2 MB PNG unfurls but hurts mobile; compress if needed while watching text edges.

Screenshots of UI can be OG images, but dense dashboards read as mud in a Slack sidebar. Consider a simplified hero from the generator instead of a raw 4K capture.

When generation is not enough

Symptoms and where to look:

Symptom	Likely cause
Old title after deploy	Unfurl cache - use platform debuggers where available
Wrong image entirely	Missing og:image or crawler picked first <img> on page
Image works in browser, fails in Slack	Bot blocked by CDN, auth, or hotlink rules
Preview tool looks fine, live URL does not	Staging tags shipped, or CMS stripped meta

Read How Open Graph tags control link previews for tag interplay. Read Why link preview shows wrong image for bot reachability.

Privacy and unreleased launches

Generating locally avoids sending unreleased creative to a third-party OG template SaaS. The remaining exposure is where you host the PNG and who can GET the staging URL. Password-protected staging with public OG URLs is a common leak - bots and competitors fetch what is public.

For internal drafts, preview with pasted fields in Open Graph Preview without publishing the URL to a channel.

Chain with other image tools

Marketing sometimes wants device frames on the OG art - build base card in the generator, composite in a desktop editor, or use Device Frame Mockup on a sim capture if that matches the story. Presentation hub map: Best free screenshot and mockup tools.

Generate the card, host it yourself, point og:image at the HTTPS URL, preview the unfurl, then post the link once - not before the asset is reachable.