rankato

OpenGraph images in 30 seconds

Pick a template, edit the title and byline, upload a logo — download a 1200×630 PNG or JPG ready for og:image.

Design
Preview (1200×630)

Every page you ship deserves a custom OpenGraph image — the preview that appears when someone shares your URL on Twitter, LinkedIn, Slack, or in a text message. The Rankato OG Image Generator takes the design tooling out of the equation: pick from a set of templates (article, product, event, plain-text), type your headline, upload your logo, and download. Output is 1200×630 (Meta's OG spec) with a Twitter-card-compatible 2:1 variant available.

Templates and text editing

Templates ship with sensible defaults: 60px headline in a bold sans-serif, 32px byline, logo in a corner. Click any element to edit — text, font, color, or position. Fonts include the system stack plus Inter, Roboto, and Space Grotesk from Google Fonts.

Logo and background

Upload a PNG or SVG logo and position it (top-left / top-right / bottom-left / bottom-right). Background can be a solid color, a gradient (choose two colors + angle), or an image (uploaded then cropped to 1200×630).

Export and validation

Export as PNG (~200 KB) or JPG (~80 KB). The JPG variant is safer for OpenGraph — some scrapers reject PNGs above a size threshold. Validate by pasting the resulting URL into Facebook's OG Debugger.

Tool FAQs

Everything you need to know about using OG Image Generator.

What size should my OG image be?+

1200×630 is Meta's recommendation — used by Facebook, LinkedIn, Slack, iMessage, and most social scrapers. Twitter/X uses 1200×600 (subtly different — the tool has a preset).

Can I generate OG images programmatically?+

This is a UI-driven tool. For programmatic OG generation, use Next.js's built-in opengraph-image convention or Vercel's @vercel/og. Rankato's tool is the UI equivalent.

Why aren't my previews updating on Twitter?+

Social platforms cache OG previews aggressively — often for weeks. Use the platform's cache-refresh tool (Facebook's Debugger, Twitter's Card Validator) to force a re-scrape.