← Back to Blog

What Are Open Graph Images and Why Every Website Needs Them

Open Graph images are the single biggest factor in whether someone clicks your link on social media. Here's everything you need to know.

What is Open Graph?

Open Graph (OG) is a protocol created by Facebook in 2010 that allows web pages to control how they appear when shared on social media platforms. When someone shares a link on Twitter/X, LinkedIn, Slack, Discord, or Facebook, the platform reads the page's Open Graph meta tags to generate a rich preview card.

The most impactful of these tags is og:image — the preview image that appears alongside your link. Without it, shared links appear as plain text URLs or with auto-generated thumbnails that rarely look good.

Why OG Images Matter

Research consistently shows that social media posts with images receive significantly more engagement than text-only posts:

  • Twitter/X: Tweets with images get 150% more retweets than those without
  • LinkedIn: Posts with images see 2x higher engagement rates
  • Facebook: Link previews with images get 2.3x more engagement
  • Slack/Discord: Links with rich previews are far more likely to be clicked in team channels

When your link has a well-designed OG image, it stands out in a feed full of text. It communicates professionalism and gives the viewer a visual summary of what they'll find when they click.

The Essential OG Meta Tags

Here are the meta tags every page should include:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A brief description" />
<meta property="og:image" content="https://example.com/image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/page" />

The Problem: Creating OG Images at Scale

For a single landing page, you can design an OG image in Figma and upload it. But what about a blog with 200 posts? An e-commerce site with 10,000 products? A documentation site with hundreds of pages?

Manually creating images doesn't scale. Common approaches include:

  • Headless browsers (Puppeteer/Playwright): Render HTML to an image. Works but slow, resource-heavy, and complex to deploy.
  • Canvas libraries: Generate images in Node.js. Flexible but requires significant code and font management.
  • Static templates: Use the same image for every page. Better than nothing, but not engaging.

The Solution: Dynamic OG Image APIs

The modern solution is to use an API that generates images on-the-fly from URL parameters. Instead of creating and hosting image files, your og:image tag points to a URL that returns a dynamically generated PNG.

<meta property="og:image"
  content="https://ogpix-pi.vercel.app/api/og
    ?title=Your+Page+Title
    &description=A+great+description
    &theme=gradient" />

This approach gives you unique, on-brand images for every page without any manual design work or complex infrastructure.

Getting Started

If you want to add beautiful OG images to your site right now, try the OGPix playground to design your image, then grab a free API key to start generating images for your site.