API Documentation

Learn how to generate dynamic OpenGraph images using the OGCraft API. Our API relies on a single endpoint returning beautifully designed SVG/PNG images.

Getting Started

Integration (Crawl-Back GET API)

OGCraft uses a secure Crawl-Back architecture. Instead of sending all your content and styling directly in the URL, you just provide the template ID and your page's url.

When a request is made, our API visits your page, extracts the title, description, and custom ogcraft:* meta tags, and applies the design settings you saved in your Dashboard.

Templates are optional helpers, not strict rules.You can override ANY template parameter directly on your page by adding its corresponding ogcraft:* meta tag (for example, <meta name="ogcraft:theme" content="light" />). If you prefer, you don't even need to create a template in the dashboard: you can use a default template (like tpl_demo) and pass all your styling and content exclusively via meta tags on your page.
<meta property="og:image" content="https://api.ogcraft.dev/api/v1/extract?template=YOUR_TEMPLATE_ID&url=https://your-site.com/page" />

Integration (Direct POST API)

If you prefer not to use the Crawl-Back architecture, you can generate images dynamically by sending a POST request directly to /api/v1/generate.

This endpoint requires your API Key to be passed in the Authorization: Bearer <API_KEY> header. You can find or regenerate your API Key in your Dashboard. You must provide a JSON body containing the template ID and any data fields you wish to populate.

fetch("https://api.ogcraft.dev/api/v1/generate", { method: "POST", headers: { "Content-Type": "application/json", "Authorization": "Bearer YOUR_API_KEY" }, body: JSON.stringify({ template: "YOUR_TEMPLATE_ID", title: "Hello World", description: "Dynamically generated image!" }) });

Security & Domain Restriction

For the Crawl-Back API, you do not need to pass an API key in the URL. Instead, your template is protected by an allowedDomains list configured in your dashboard. Any call requesting a render for a URL originating from an unauthorized host will return an HTTP 403 Forbidden status code.

Alternatively, you can bypass the domain restriction by explicitly signing the url parameter with your API key and passing it as the sig parameter. The signature is a SHA256 HMAC of the target URL using your API key as the secret.

For the Direct POST API, authentication is strictly enforced using your API Key via the Authorization header. Keep your API key secure and never expose it in client-side code.

Rate Limits & Caching

To ensure service stability, all endpoints are protected by a basic IP rate limit of 60 requests per minute. If you exceed this, you will receive a 429 Too Many Requests response.

Additionally, generation quotas are applied based on your account tier:

  • Free Tier: 100 requests per month (watermarked).
  • Pro Tier: 10,000 requests per month (no watermark).
  • Agency Tier: 50,000 requests per month (no watermark).

If you exceed your monthly quota, the API will return a 429 Usage limit exceeded status code.

All generated images are returned with immutable cache headers (public, max-age=31536000, immutable) for maximum performance on CDNs. If you update your page's meta tags, we recommend changing a query parameter in your og:image URL (like adding &v=2) to bypass social media caches.

Templates Reference

The template query parameter dictates which design layout to render. Here is the complete reference of parameters for each available template.

1. SaaS Launch

Highlight a product launch, feature update, or promotional badge.

<meta name="ogcraft:badgeText" content="New Release" /> <meta name="ogcraft:ctaText" content="Get Started for Free" /> <meta name="ogcraft:brand" content="Acme Inc" /> <meta name="description" content="The fastest way to build." />
Meta TagDescriptionExample
<title> or og:titleThe main page title.Introducing V2
<meta name="description">A subheadline or description.The fastest way to build.
ogcraft:badgeTextText for the small badge above the title.New Release
ogcraft:ctaTextText for a Call-To-Action button (SaasLaunch only).Get Started for Free
ogcraft:brandYour brand or company name.Acme Inc
Note: Design parameters (ogcraft:logoUrl, ogcraft:theme, ogcraft:accentColor) can be saved in a Template or passed directly as meta tags to override defaults.

2. Modern Blog

A clean, content-focused layout perfect for articles and blog posts.

<meta name="ogcraft:author" content="Jane Doe" /> <meta name="ogcraft:readTime" content="5 min read" /> <meta name="ogcraft:tag" content="Engineering" />
Meta TagDescriptionExample
<title> or og:titleThe title of the article.My First Post
ogcraft:authorName of the author.Jane Doe
ogcraft:authorAvatarURL to the author's avatar.https://example.com/avatar.jpg
ogcraft:readTimeReading time estimate.5 min read
ogcraft:tagMain category or tag.Engineering
Note: ogcraft:theme and ogcraft:accentColor can be configured in the Dashboard or overridden here.

3. E-Commerce Product

Showcase a product with pricing, ratings, and stock status.

<meta name="ogcraft:productName" content="Sneakers" /> <meta name="ogcraft:price" content="120" /> <meta name="ogcraft:currency" content="$" />
Meta TagDescriptionExample
ogcraft:productNameProduct name.Classic Sneakers
ogcraft:priceCurrent price.120
ogcraft:currencyCurrency symbol.$
ogcraft:originalPriceStrikethrough original price.150
ogcraft:imageUrlProduct image URL.https://example.com/shoe.png
ogcraft:ratingRating out of 5 (e.g., '4.5').4.8
ogcraft:inStockIn stock? 'true' or 'false'.true

4. GitHub Stats

Showcase an open-source repository with stars, forks, and primary language.

<meta name="ogcraft:repoName" content="facebook/react" /> <meta name="ogcraft:stars" content="202k" />
Meta TagDescriptionExample
ogcraft:repoNameOwner/Repo format.facebook/react
<meta name="description">Short repo description.A declarative, efficient...
ogcraft:starsNumber of stars.202k
ogcraft:forksNumber of forks.42k
ogcraft:languagePrimary language.TypeScript

5. Personal Card

A minimal profile card for portfolios or personal websites.

<meta name="ogcraft:name" content="Alice Smith" /> <meta name="ogcraft:role" content="Designer" />
Meta TagDescriptionExample
ogcraft:nameFull name.Alice Smith
ogcraft:roleJob title or role.Product Designer
ogcraft:bioA short biography.Designing interfaces...
ogcraft:avatarUrlProfile picture URL.https://example.com/me.jpg
ogcraft:twitterHandleTwitter username without @.alicesmith

6. Event / Webinar

Promote an upcoming event, talk, or webinar with schedule details.

<meta name="ogcraft:date" content="Oct 24" /> <meta name="ogcraft:time" content="10:00 AM PST" />
Meta TagDescriptionExample
<title> or og:titleEvent title.Future of AI
ogcraft:dateEvent date.October 24, 2024
ogcraft:timeTime or timezone.10:00 AM PST
ogcraft:speakerNameHost or speaker name.Dr. Smith
ogcraft:speakerAvatarSpeaker's photo URL.https://example.com/dr.jpg