Link Preview API

The Problem with Traditional Link Previews

When building a chat app, social platform, or content management system, you want to show rich previews when users share links. The traditional approach relies on Open Graph (OG) meta tags, but:

• ❌

  Many sites don't have OG images

  Smaller sites, web apps, and internal tools often lack meta tags entirely.

• ❌

  OG images can be outdated

  The preview might show old content while the actual page has changed.

• ❌

  Inconsistent dimensions

  Some images are too small, wrong aspect ratio, or low quality.

The Solution: Screenshot-Based Previews

Instead of relying on OG tags, capture a real screenshot of the website. This guarantees:

• ✅

  Every link has a preview

  Works for any URL, even without meta tags configured.

• ✅

  Always up-to-date

  The preview shows the current state of the page.

• ✅

  Consistent quality

  Same dimensions and quality for every preview.

Implementation Example

API Endpoint for Link Previews

// Express.js endpoint
app.get('/api/link-preview', async (req, res) => {
    const { url } = req.query;
    
    // Optimal dimensions for social cards
    const params = new URLSearchParams({
        url: url,
        api_key: process.env.SNAPAPI_KEY,
        width: '1200',
        height: '630',
        response: 'binary'
    });
    
    const response = await fetch(
        `https://snapapi.alterra-solutions.com/v1/screenshot?${params}`
    );
    
    // Cache for 24 hours
    res.set('Cache-Control', 'public, max-age=86400');
    res.set('Content-Type', 'image/png');
    res.send(Buffer.from(await response.arrayBuffer()));
});

Frontend Usage

<!-- In your chat message or card component -->
<div class="link-preview">
    <img 
        src="/api/link-preview?url=https://github.com" 
        alt="Link preview"
        loading="lazy"
    />
    <div class="link-info">
        <h4>GitHub</h4>
        <p>github.com</p>
    </div>
</div>

Why Choose SnapAPI for Link Previews?