How to Auto-Generate Social Cards for Your Blog

When you share a blog post on Twitter or LinkedIn, the preview image is the first thing people see. Without a proper social card, your link looks like a plain text URL — and nobody clicks that.

The Problem

Most static site generators (Hugo, Jekyll, Astro) don't generate social preview images. You'd have to design each one manually in Canva or Photoshop. That doesn't scale.

The Solution

SnapAPI lets you generate a screenshot of any page with a single HTTP call. Use it as a build step in your CI/CD pipeline.

GitHub Actions Example

name: Generate Social Cards
on: [push]
jobs:
  cards:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Generate preview
        run: |
          for file in content/blog/*.md; do
            url="https://mysite.com/$(basename $file .md)"
            curl -H "X-Api-Key: ${{ secrets.SNAPAPI_KEY }}" \
              "https://snapapi.loca.lt/api/screenshot?url=$url&width=1200&height=630" \
              -o "static/images/cards/$(basename $file .md).png"
        done

Add OG Tags Automatically

Use the /api/metadata endpoint to fetch your own page's metadata and inject it into your site's <head> at build time.

curl -H "X-Api-Key: YOUR_KEY" \
"https://snapapi.loca.lt/api/metadata?url=https://mysite.com/my-post"
# Returns: title, description, og:image, favicon...

Why This Works

Social platforms cache OG images aggressively. Once you set them, your links look professional forever. SnapAPI handles the heavy lifting — you just call an API.