Twitter OG Image Generator and Open Graph Share Cards: A Local Guide for Indies

When a link is shared, people see the image before your README

Paste a URL into Twitter/X, Slack, Notion, a blog, or a docs site and the expanded preview image often decides the click. That image usually comes from Open Graph (og:image) or Twitter Card meta tags. Indie developers ship the feature, then leave the default browser screenshot—or a blurry 1200×630 logo collage—as the preview. The card looks unfinished the moment it unfolds in someone's timeline, and the click never happens.

An OG / Twitter share image has one job: in about three seconds, say what this is, who it is for, and what result they get. It is not a feature dump and not a miniature landing page. Generating the card locally in the browser turns "edit headline → export PNG → update meta" into a repeatable checklist, and unreleased product UI never has to hit a third-party design host. For a solo founder, that checklist is the difference between posting on ship day and "we'll make a proper card next week."

Sizes, ratios, and platform quirks (align before you design)

1200×630 (about 1.91:1) remains the safe default for OG and large Twitter summary cards:

Put the title and any critical icon in the center safe area. Leave margin so rounded corners and platform chrome do not eat your headline. High-contrast type beats thin ornaments that vanish after compression. Dark backgrounds want light type; light backgrounds want the reverse. Treat decorative lines as optional, not load-bearing. If you need a logo, keep it small and secondary—people are deciding whether to open the link, not memorizing your wordmark.

The information structure of a card that earns the click

Lock four layers and delete anything else:

1. Outcome headline (benefit in one line, not a mission statement)
2. Audience or scene subcopy (who should tap)
3. Optional real UI or before/after (proof)
4. Quiet brand mark (once, in a corner—never competing with the headline)

A common indie mistake is cramming five store-screenshot selling points into one OG image. The share card only needs to win the click; the landing page and store shots handle depth. Keep the headline aligned with the page H1 and the tweet's main sentence so the tap does not feel like bait. If your store hero says "export App Store screenshots in minutes," the OG image should say a close cousin of that sentence—not a new slogan invented for Twitter.

Generate locally, then wire it into the site

Open the Twitter / OG share image tool and stay in the browser:

1. Choose 1200×630 (or the tool's equivalent).
2. Write this week's single primary benefit; add verifiable subcopy (time-to-value, platform, free/trial).
3. Drop in a local screenshot as an anchor when useful—originals are not uploaded to a remote editor.
4. Export PNG to your public folder or CDN; update og:image and twitter:image.
5. Validate with Twitter's card validator and by pasting into real IMs. Platforms cache aggressively—change the filename or add a version query when you replace art.

Local image processing is the privacy story: grayscale builds, NDA betas, and pre-store screens stay on your machine. When store creatives and social promotion share one selling-point table, the OG card should reuse the first-store-screen claim and only change ratio and tone. That single source of truth also keeps contractors and future-you from inventing conflicting headlines in Figma files nobody owns.

Fit the card into launches and content cadence

• Ship day: the tweet tells the story; the OG image states the same result line; the landing hero expands.
• Evergreen posts: unique OG art per long article beats one site-wide logo wall.
• A/B: change only the headline words, not palette or skeleton, so you learn about copy rather than taste.
• Localized sites: separate cards per language; never unfurl a Chinese card under an English tweet or the reverse.
• Measurement: track link CTR from the post, then bounce on the landing hero—if CTR is fine but bounce is high, the card overpromised relative to the page.
• Docs and changelogs: even internal-facing pages benefit from a sober card when teammates paste links into Slack.

If you also make portrait social cards for other networks, keep the same fact order. Channels can change voice; they should not invent conflicting claims. The cheapest consistency system is a three-row spreadsheet everyone copies from before opening any design tool.

Operational pitfalls

• Cache: new art, same URL → stale previews. Bump the path or ?v=.
• File weight: huge PNGs slow crawlers; compress without blurring type.
• Absolute claims: share images can still trigger policy scrutiny.
• Auto webpage screenshots: login walls, layout shifts, and dark-mode quirks produce ugly unfurls—hand-control critical pages.
• Mobile check: most people see the preview on a phone; open it there once.
• Forgetting alt strategy: your HTML still needs sensible titles and descriptions; the image is not a substitute for accessible meta text.
• Shipping without updating CMS fields: static files on disk do nothing if the head tags still point at /og-default.png.

Closing: treat the OG image as packaging, not decoration

Link previews are how your product shows up in the social graph. Use the local og-share tool to lock size and hierarchy, keep sensitive screenshots in the browser, and point og:image at a real asset every release. For most utility apps, a clear outcome line plus honest UI beats cinematic backgrounds. Indies win by making "good enough share art" cheap to repeat—not by waiting for a perfect brand photoshoot that never lands on the calendar.