Social Media Preview Image Generator

Every link you share on social media competes for attention in a crowded feed. The difference between a link that gets clicked and one that gets scrolled past often comes down to a single element: the social media preview image. When someone shares a URL on Twitter, Facebook, LinkedIn, or Discord, the platform fetches metadata from the page and renders a visual card. That card includes a title, a description, and most importantly, an image. Without a compelling preview image, your content appears as a plain text link that blends into the noise.

Social media preview images, also known as Open Graph images or OG images, are the visual thumbnails that platforms display when a URL is shared. These images follow the Open Graph protocol originally developed by Facebook and now adopted by virtually every social platform, messaging app, and collaboration tool. Twitter uses a variation called Twitter Cards. LinkedIn, Discord, Slack, WhatsApp, and Telegram all read the same og:image meta tag to generate their preview cards.

For developers, marketers, and content creators, generating these preview images at scale presents a real challenge. Designing individual images in Photoshop or Figma for every blog post, product page, or landing page is not scalable. This is exactly the problem that OGForge solves: a free API that generates professional social media preview images with a single HTTP request, no API key required.

Platform Requirements for Preview Images

Each social platform has slightly different requirements for preview images, but they converge around the 1200x630 pixel standard. Here is a detailed breakdown of what each platform expects:

The practical takeaway is simple: generate your images at 1200x630 pixels in PNG format, and they will display correctly across every major platform. OGForge uses exactly this dimension as its default output, ensuring universal compatibility without any configuration on your part.

How OGForge Solves the Preview Image Problem

OGForge is a free REST API that generates social media preview images dynamically. Instead of creating static images for each page, you construct a URL with your title, description, and preferred theme. OGForge renders a professional-looking 1200x630 PNG image on the fly and returns it as a binary response. The entire process takes under 500 milliseconds.

Because OGForge works via simple GET requests, you can use the API URL directly as your og:image value. Social media crawlers will fetch the image from OGForge when someone shares your link, meaning you never need to store or host the images yourself.

Generating Preview Images with the OGForge API

Generating a social media preview image with OGForge is as straightforward as making a GET request. Below are working code examples in cURL, JavaScript, and Python that you can copy and use immediately.

curl -o preview.png \
  "https://ogforge.dev/api/v1/generate?title=My%20Blog%20Post&description=Learn%20how%20to%20build%20APIs&theme=dark"

const https = require('https');
const fs = require('fs');

const params = new URLSearchParams({
  title: 'My Blog Post',
  description: 'Learn how to build APIs with Node.js',
  theme: 'dark'
});

const url = `https://ogforge.dev/api/v1/generate?${params}`;

https.get(url, (res) => {
  const chunks = [];
  res.on('data', (chunk) => chunks.push(chunk));
  res.on('end', () => {
    const buffer = Buffer.concat(chunks);
    fs.writeFileSync('preview.png', buffer);
    console.log('Preview image saved as preview.png');
  });
});

import requests

response = requests.get(
    "https://ogforge.dev/api/v1/generate",
    params={
        "title": "My Blog Post",
        "description": "Learn how to build APIs with Python",
        "theme": "gradient"
    }
)

with open("preview.png", "wb") as f:
    f.write(response.content)

print("Preview image saved as preview.png")

const params = new URLSearchParams({
  title: 'My Landing Page',
  description: 'The best product you have ever seen',
  theme: 'minimal'
});

const response = await fetch(
  `https://ogforge.dev/api/v1/generate?${params}`
);

const blob = await response.blob();
const imageUrl = URL.createObjectURL(blob);

// Display in an img element
document.getElementById('preview').src = imageUrl;

Adding OG Images to Your HTML

Once you have your OGForge API URL, you need to add the correct meta tags to your HTML so social platforms can find your preview image. Here are the meta tags required for each major platform:

Universal Open Graph Tags (Facebook, LinkedIn, Discord, Slack, WhatsApp)

<meta property="og:title" content="My Blog Post">
<meta property="og:description" content="Learn how to build APIs">
<meta property="og:image" content="https://ogforge.dev/api/v1/generate?title=My%20Blog%20Post&description=Learn%20how%20to%20build%20APIs&theme=dark">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/png">
<meta property="og:url" content="https://example.com/my-blog-post">
<meta property="og:type" content="article">

Twitter Card Tags

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="My Blog Post">
<meta name="twitter:description" content="Learn how to build APIs">
<meta name="twitter:image" content="https://ogforge.dev/api/v1/generate?title=My%20Blog%20Post&description=Learn%20how%20to%20build%20APIs&theme=dark">

The twitter:card value must be set to summary_large_image to display the full-width preview card. If you use summary instead, Twitter will show a small square thumbnail which is less visually impactful. Both Facebook and Twitter will accept the og:image tag, but Twitter prioritizes twitter:image when present, so include both for maximum control.

Dynamic OG Image Generation per Page

For sites with many pages, such as blogs, documentation sites, or e-commerce stores, you can generate unique preview images dynamically by templating the OGForge URL with your page data. Here is an example using a server-side template:

<meta property="og:image"
  content="https://ogforge.dev/api/v1/generate?title=${encodeURIComponent(page.title)}&description=${encodeURIComponent(page.description)}&theme=dark">

This pattern ensures that every page on your site has a distinct, branded preview image without storing a single image file on your server.

Platform-Specific Tips and Debugging Tools

Even with correct meta tags, social platforms cache preview images aggressively. When you update your OG image, the old version may continue to appear. Each platform provides a debugging tool to force a re-fetch and verify your tags are correct:

Twitter / X Card Validator

Use the Twitter Card Validator to preview how your link will appear on Twitter. Enter your URL and the tool will fetch your page, parse the meta tags, and render a preview of the card. This tool also forces Twitter to clear its cache for that URL, which is useful after updating your OG image.

Facebook Sharing Debugger

The Facebook Sharing Debugger shows exactly what Facebook sees when it scrapes your page. It displays the fetched title, description, image, and any errors or warnings. Click "Scrape Again" to force Facebook to re-fetch your metadata after making changes. This tool requires a Facebook login.

LinkedIn Post Inspector

LinkedIn provides the Post Inspector tool to preview how shared links will appear in the LinkedIn feed. Enter your URL to see the rendered card, including the preview image, title, and source. Like the Facebook debugger, this tool re-fetches the page each time, so you can use it to clear LinkedIn's cache.

Discord Embed Preview

Discord does not offer a standalone debugging tool, but you can test your embeds by pasting a link in any Discord channel. Discord caches embeds for approximately 10 minutes. To force a refresh, you can append a cache-busting query parameter (such as ?v=2) to your URL. Discord reads both og:image and twitter:image meta tags.

Slack Link Preview

Slack fetches and caches link previews based on OG tags. To debug Slack previews, paste the link in a channel and check if the unfurl appears correctly. Slack respects the same og:title, og:description, and og:image tags used by other platforms. If the preview does not update, Slack caches unfurls by URL, so you may need to wait or use a fresh URL.

Frequently Asked Questions

Related Resources

Explore more guides on generating Open Graph images with OGForge: