Screenshot API for Link Previews

Traditional link previews rely on Open Graph tags, which are often missing, outdated, or generic. Screenshot-based previews show the actual page content, providing a more accurate and engaging preview.

Benefits of screenshot-based link previews:

• Always accurate — Shows real page content, not stale metadata
• Works everywhere — No OG tags required. Even pages without any metadata get a visual preview.
• Higher CTR — Rich visual previews increase click-through rates by 30-50% compared to text-only links
• Fresh content — Screenshots reflect the current state of the page, not cached metadata

The typical architecture for a link preview service:

1. User submits a URL
2. Your backend calls SnapAPI to capture a screenshot (1200x630 for social media standard)
3. Store the screenshot in your CDN/S3
4. Serve the cached image for subsequent requests
5. Refresh periodically based on a TTL

// Link preview endpoint
app.get('/preview/:url', async (req, res) => {
  const url = decodeURIComponent(req.params.url);
  const cacheKey = `preview_${Buffer.from(url).toString('base64url')}`;

  // Check cache first
  let image = cache.get(cacheKey);
  if (!image) {
    const ssRes = await fetch(
      `https://apisnap.dev/api/screenshot?url=${encodeURIComponent(url)}&width=1200&height=630&format=jpeg&quality=80`,
      { headers: { Authorization: `Bearer ${API_KEY}` } }
    );
    image = Buffer.from(await ssRes.arrayBuffer());
    cache.set(cacheKey, image, 86400); // Cache 24h
  }

  res.set('Content-Type', 'image/jpeg');
  res.send(image);
});

Different platforms expect different aspect ratios for link previews:

• Twitter/X: 1200x628 (1.91:1)
• Facebook: 1200x630 (1.91:1)
• LinkedIn: 1200x627 (1.91:1)
• Discord: 1200x630 or 400x300 for inline
• Slack: 800x418 or smaller thumbnails

The 1200x630 standard works across most platforms. Use SnapAPI's width and height parameters to capture at exactly the right dimensions.

Caching is critical for link preview performance and API cost management:

• In-memory cache: Fast but limited. Good for frequently accessed URLs. Use LRU eviction.
• Redis/Memcached: Shared cache across app instances. Set TTL based on content freshness needs.
• CDN/S3: Store screenshots permanently with periodic refresh. Best for high-traffic applications.

A good default TTL is 24 hours for news sites, 7 days for static pages, and 1 hour for dashboards or rapidly changing content.