OG Images for Astro
Beautiful OG images for your Astro site — zero config
OGMagic integrates seamlessly with Astro's content collections and page layouts. Generate unique OG images for every page without any build plugins.
Quick Start
Add OGMagic to your Astro project — no packages to install, no API keys to configure.
---
// src/layouts/BaseLayout.astro
const { title, description } = Astro.props;
const ogImage = `https://ogmagic.dev/api/og?template=gradient-mesh&title=${encodeURIComponent(title)}&description=${encodeURIComponent(description || '')}&domain=mysite.com`;
---
<html>
<head>
<meta property="og:image" content={ogImage} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content={ogImage} />
</head>
</html>Dynamic OG Images
Generate unique OG images per page using route data:
---
// src/pages/blog/[slug].astro
import { getCollection } from 'astro:content';
const { slug } = Astro.params;
const post = await getEntry('blog', slug);
const ogImage = `https://ogmagic.dev/api/og?template=minimal-dark&title=${encodeURIComponent(post.data.title)}&description=${encodeURIComponent(post.data.description)}&domain=mysite.com`;
---
<head>
<meta property="og:image" content={ogImage} />
</head>💡 Works with Astro's content collections, MDX pages, and static routes. Images are generated on-demand — no build step needed.
Why use OGMagic with Astro?
No build step
Images are generated on-demand via URL. No build plugins, no CI/CD changes.
55+ templates
Professional designs out of the box. Customize with query parameters.
No API key needed
Free tier works instantly — just use the URL. No signup, no config.
Every platform
Optimized 1200×630 images that look great on Twitter/X, Facebook, LinkedIn, Discord, and Slack.
Ready to add OG images to your Astro app?
Start with 50 free API calls/month. No signup needed.