OG Images for Gatsby
OG images for Gatsby — no GraphQL plugins needed
Skip the complex Gatsby image plugins. OGMagic generates OG images via URL — just add it to your Gatsby Head API or react-helmet.
Quick Start
Add OGMagic to your Gatsby project — no packages to install, no API keys to configure.
// src/pages/index.tsx (Gatsby Head API)
export function Head() {
return (
<>
<meta property="og:image" content="https://ogmagic.dev/api/og?template=gradient-mesh&title=My+Site&domain=mysite.com" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
</>
);
}Dynamic OG Images
Generate unique OG images per page using route data:
// src/templates/blog-post.tsx
export function Head({ pageContext }) {
const { title, excerpt } = pageContext;
const ogUrl = `https://ogmagic.dev/api/og?template=gradient-mesh&title=${encodeURIComponent(title)}&description=${encodeURIComponent(excerpt)}&domain=mysite.com`;
return (
<>
<meta property="og:image" content={ogUrl} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
</>
);
}💡 Works with Gatsby Head API (v4.19+) or react-helmet. No gatsby-plugin-image needed for OG images.
Why use OGMagic with Gatsby?
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 Gatsby app?
Start with 50 free API calls/month. No signup needed.