OGMagicIntegrations
OG Images for Gatsby
Create an image once and reuse its public URL in your page metadata.
Export a Gatsby Head component from a page or page template to publish the saved image URL. The tags become part of the generated HTML alongside your existing content.
Quick Start
1. Create and save your image URL
Get a private API key through email access and set OGMAGIC_API_KEY in your server or terminal environment. Run this request when publishing content, then save the returned url with the page:
curl https://www.ogmagic.dev/api/images \
-H "Authorization: Bearer $OGMAGIC_API_KEY" \
-H "Content-Type: application/json" \
-d '{"title":"My article","template":"gradient-mesh"}'
# Save the returned url with your content. Keep the API key private.You can also create an image in the editor and copy its hosted URL. Keep the API key private; the returned image URL is public.
2. Publish it in your Gatsby metadata
Use your saved URL in the example below. Replace any placeholder URL with the creation response's url, or pass it from the stored content field. The dimensions shown are for the default 1200 × 630 image; use the returned dimensions for custom sizes.
import * as React from "react";
const title = "My article";
const description = "What this article covers";
const imageUrl = "https://www.ogmagic.dev/images/11111111-1111-4111-8111-111111111111.png";
export function Head() {
return <>
<title>{title}</title>
<meta name="description" content={description} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:type" content="article" />
<meta property="og:image" content={imageUrl} />
<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={imageUrl} />
</>;
}
export default function Page() {
return <main><h1>{title}</h1></main>;
}💡 Head must be exported by a page or createPage template, not only by a shared component. For generated posts, read the saved URL from the Head function's data or pageContext argument. Create images before sourcing that content and rebuild static pages after URLs change.
Reference: Gatsby documentation. After deploying, check the page with the OG tag checker.
Why use OGMagic with Gatsby?
Create once
Repeated identical requests reuse the saved image; social views use no generation credits.
55+ templates
Professional designs out of the box. Customize with JSON options.
Email access
Get your API key without a password or profile. Keep it private; share only image URLs.
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 new images per 30 days. Get your API key through an email link.