Dynamic OG Image Generation

AstroPaper includes built-in dynamic OG (Open Graph) image generation using Satori.

What are OG Images?

Open Graph images are the preview images shown when you share a link on social media platforms like:

• Twitter/X
• Facebook
• LinkedIn
• Discord
• Slack

How Satori Works

Satori is a library that converts HTML and CSS to SVG. AstroPaper uses it to:

1. Take your post title and description
2. Apply a beautiful template
3. Generate an SVG image
4. Convert to PNG for compatibility

Automatic Generation

If you don’t provide an ogImage in your page configuration, AstroPaper generates one automatically:

{
  "title": "My Blog Post",
  "description": "This becomes part of the OG image",
  "metadata": {
    "ogImage": null
  }
}

Custom OG Images

You can still provide custom images:

{
  "seo": {
    "openGraph": {
      "image": "/images/custom-og-image.jpg"
    }
  }
}

OG Image Best Practices

1. Dimensions: 1200x630 pixels (1.91:1 ratio)
2. File Size: Keep under 8MB
3. Text: Keep it readable at thumbnail size
4. Branding: Include your logo or site name

Platform Integration

Our adapter extracts OG images from:

1. page.seo.openGraph.image
2. content.heroImage
3. metadata.image

If none are found, AstroPaper’s dynamic generation kicks in!