OG Image Generator API

When someone shares your link on Twitter, Facebook, or LinkedIn, the platform displays a preview card with an image, title, and description. This image comes from your page's og:image meta tag.

Most sites use a single static image (their logo) for all pages. This means every shared link looks the same — generic and forgettable. Dynamic OG images show the actual content of each page, making every share unique and compelling.

Studies show that posts with custom images get 2-3x more engagement than those with generic previews. Dynamic OG images are one of the highest-ROI SEO/marketing investments you can make.

Approach 1: Screenshot the actual page

Capture a screenshot of your page at OG dimensions (1200x630) and use it as the og:image. Simple and accurate.

// Generate OG image from live page
const ogImage = await fetch(
  `https://apisnap.dev/api/screenshot?url=${encodeURIComponent(pageUrl)}&width=1200&height=630&format=png`,
  { headers: { Authorization: `Bearer ${API_KEY}` } }
);

Approach 2: Screenshot a custom template

Create a dedicated OG image template with branding, title, and author info. Screenshot that template instead of the actual page.

// Serve template at /og-template?title=...&author=...
// Then screenshot it
const templateUrl = `https://yourapp.com/og-template?title=${encodeURIComponent(title)}&author=${encodeURIComponent(author)}`;
const ogImage = await fetch(
  `https://apisnap.dev/api/screenshot?url=${encodeURIComponent(templateUrl)}&width=1200&height=630`,
  { headers: { Authorization: `Bearer ${API_KEY}` } }
);

OG images should be cached aggressively to avoid regenerating on every request:

1. Generate the OG image once when content is published
2. Store it on S3, Cloudflare R2, or your CDN
3. Reference the stored URL in your og:image meta tag
4. Regenerate when content changes significantly

Social platforms cache OG images for 7-30 days. Use Twitter's Card Validator or Facebook's Sharing Debugger to force a refresh when you update an image.

Integrate OG image generation into your content publishing workflow:

// On article publish/update
async function generateOGImage(article) {
  const templateUrl = `https://yoursite.com/og-template?title=${encodeURIComponent(article.title)}`;

  const res = await fetch(
    `https://apisnap.dev/api/screenshot?url=${encodeURIComponent(templateUrl)}&width=1200&height=630&format=png`,
    { headers: { Authorization: `Bearer ${process.env.SNAPAPI_KEY}` } }
  );

  const buffer = Buffer.from(await res.arrayBuffer());

  // Upload to your storage
  const imageUrl = await uploadToS3(buffer, `og/${article.slug}.png`);

  // Update article with OG image URL
  await db.update('articles', { og_image: imageUrl }, { id: article.id });
}

Then in your HTML template, reference the stored image:

<meta property="og:image" content="${article.og_image}">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">