OGMagicIntegrations
OG Images for HTML
Create an image once and reuse its public URL in your page metadata.
A static HTML page needs no runtime integration. Create an image in the editor or a publishing script, then add its returned public URL to the document head before uploading your page.
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 HTML 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.
<title>My article</title>
<meta name="description" content="What this article covers" />
<link rel="canonical" href="https://example.com/my-article" />
<meta property="og:title" content="My article" />
<meta property="og:description" content="What this article covers" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/my-article" />
<meta property="og:image" content="https://www.ogmagic.dev/images/11111111-1111-4111-8111-111111111111.png" />
<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="https://www.ogmagic.dev/images/11111111-1111-4111-8111-111111111111.png" />💡 Replace both placeholder image URLs with the same returned URL and replace example.com with your page's canonical URL. Publish these tags directly in HTML rather than inserting them with browser JavaScript. If you have no backend, create the image in the editor and copy its hosted URL.
Reference: Open Graph protocol documentation. After deploying, check the page with the OG tag checker.
Why use OGMagic with HTML?
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 HTML app?
Start with 50 new images per 30 days. Get your API key through an email link.