ogimage.org
Make an OG image
New430 real examples

The free OG image generator

Make a 1200×630 card in your browser. Or clone the open-source kit and render one for every page of your site.

Make an OG imageBrowse examplesStar on GitHub
DKCGNN

Used on live startup cards. Made by @illyism.

  • Next.js
  • Satori
  • Tailwind CSS
  • 1200×630
Preview of the card: Your launch deserves a better link preview
Customize

Gallery

430 real OG images from live startups

A swipe file of cards that designers made on purpose. Sorted by category, with the colors of each card.

Browse the gallery
FablePool Open Graph cardRibbie Open Graph cardputt.day Open Graph cardIn The Weights Open Graph cardMonoLisa Open Graph cardTikZ & PGF Open Graph cardCross Canon Open Graph cardHacker Trends Open Graph cardAnt Open Graph cardbento Open Graph cardSunflowers Open Graph cardLinzumi Open Graph card
Mireye Open Graph cardPluto Open Graph cardPango Open Graph cardHoplite Open Graph cardIsengard Industries Open Graph card6thSense Open Graph cardDefinite Open Graph cardMost Robotic Open Graph cardPrized Open Graph cardNori Open Graph cardRobocurve Open Graph cardSpeko Open Graph card
SaaS116AI75Design62Productivity45Ecommerce44Developer Tools37Software36Portfolio35Finance31Marketing22Technology21Entertainment21Social21Agency21Collaboration20Hardware19Fintech15Analytics15Education14Security12Research11SEO11

What you get

Make it, copy it, test it

Four tools for one job: a link preview that people click.

OG image generator

Type a title, pick a layout and your brand colors, and download the PNG. No account, no watermark.

Card made with the generator

OG image checker

Paste a URL. See each tag problem and the preview on four platforms.

  • Image size is 1200×630
  • twitter:card is summary_large_image
  • og:image:alt is missing
  • og:title is set

OG image templates

Nine Next.js routes that render a card for each URL. Copy the source.

blog-post templateheadline templatebutton template

OG image gallery

Real cards from live startups. Filter by category and copy the colors.

Templates

One route, every page

Each template is one Next.js route. Satori renders the JSX, Tailwind styles it, and you own the source.

See all nine templates
Headline template
Headline/og/templates/headline
Blog post template
Blog post/og/templates/blog-post
Live screenshot template
Live screenshot/og/templates/screenshot
Phone template
Phone/og/templates/phone
Button template
Button/og/templates/button
Profile template
Profile/og/templates/image

Reviews

From people who shipped cards

It is super cool!
G

Germán Merlo

Good OG images are underrated!
D

Dan Mindru

A valuable asset for developers and marketers alike!
A

Alex Dulub

Guides

What is an OG image?

An OG image is the picture in the preview of a link on X, LinkedIn, Slack, and iMessage. One meta tag, og:image, sets it. The standard size is 1200×630 pixels.

  1. 01What is an OG image?The meaning of OG image, with examples.
  2. 02OG image size1200×630 pixels, and the limits of each platform.
  3. 03og:image meta tagThe tag to copy, and the rules for the image URL.
  4. 04Next.js OG imageStatic files, opengraph-image.tsx, and route handlers.
  5. 05Open Graph tagsAll Open Graph tags with a template you can copy.
  6. 06OG image checkerPaste a URL. See the tags, the image size, and the preview.

Open source · MIT

Free forever. Star it if it helps

The generator, the templates, the checker, and the gallery are all in one public repo. A star helps other people find it.

Star on GitHubClone the repo
Ilias Ism
Made byIlias Ism

I build small tools for people who ship websites. I post what I learn about SEO, design, and growth.

Follow @illyismil.ly

FAQ

Questions, answered

The kit is public. The gallery is a swipe file. You host the images.