What is an Open Graph image?
Open Graph (OG) images are the preview thumbnails that appear when someone shares your link on Twitter, LinkedIn, Facebook, Slack, Discord, iMessage — pretty much anywhere. They make the difference between a wall of text and a click. According to multiple studies, links with custom OG images get 2–3× more clicks than links without.
The right size: 1200 × 630 pixels
1200×630 is the safe size that works across every major platform. Twitter prefers a 1.91:1 ratio (which 1200×630 is), Facebook recommends exactly this size, LinkedIn renders at this aspect ratio, and Slack/Discord use the same OG tag. One image, every platform.
How to use the image you generate
Once you download the PNG, upload it to your site or image host, then add this to the <head> of your HTML:
<meta property="og:image" content="https://yoursite.com/og.png" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:image" content="https://yoursite.com/og.png" />
Tips for OG images that get shared
- Big, readable text: Many people see this thumbnail at 200px wide on mobile. Headline must be readable at that size.
- High contrast: The image competes with timeline noise. Solid backgrounds beat photos.
- Brand mark in the corner: Even a small logo or domain text builds recognition over time.
- Test how it looks before sharing: Use Twitter's Card Validator or Facebook's Sharing Debugger.
For bulk / programmatic generation
If you're building a site that needs unique OG images for hundreds of pages (blog posts, products, profiles), you don't want to do this manually. Use a programmatic generator like Bannerbear or Vercel's OG image library. We use this tool ourselves for one-off cards and Bannerbear's API for blog automation.