Deployment guide

Open Graph image API on netlify

Deploy the app to Netlify, set public URL env vars, and use the generated OG image URL in your page metadata. Keep your API key server-side or in a serverless function that builds the image URL.

Use this guide when evaluating OGKit as a hosted Vercel OG alternative, screenshot-service alternative, or framework-neutral social preview image API. The important SEO rule is that canonical URLs, sitemap URLs, and generated image URLs should all use the same final HTTPS host.

Environment checklist

NEXT_PUBLIC_APP_URL=https://example.com
OGKIT_KEY=ogk_live_...
API_KEY_SALT=...

Production checklist

Set the deployed HTTPS origin explicitly.
Generate image URLs in server functions or build steps.
Avoid exposing API keys in static HTML.
Preserve query strings on image routes through redirects.

Caching and crawlability

Use Netlify edge/CDN behavior for static pages and keep OGKit image URLs stable. Changing query parameters should be the cache-busting mechanism.

For SEO crawlers, avoid bot challenges on public pages, robots.txt, and sitemap.xml. If a crawler sees a challenge page or a redirect chain, it may mark otherwise valid pages as non-indexable. See also the caching & rescrape guide.

Platform-specific notes

Static site consumers

Astro/Hugo on Netlify should bake OGKit URLs at build time. Store OGKIT_KEY in Netlify build env, not in the published repo.

Functions

If you sign URLs, do it in a Netlify Function so the raw key never reaches the browser. See /guides/signed-urls.

Frequently asked questions

How do I deploy an Open Graph image API on netlify?

Deploy OGKit with a final HTTPS public URL, set the required environment variables, and generate image URLs from server-side code or build-time metadata.

Should sitemap and canonical URLs use the deployment URL or final domain?

They should use the final canonical HTTPS domain. Preview URLs, http URLs, and www variants can create redirect and indexability issues.

Can I cache generated OG images?

Yes. OGKit image URLs are deterministic, and generated PNG responses include cache headers. Keep query strings intact when caching.

API reference — templates, query parameters, and auth.
Open Graph SEO guide — metadata, caching, and mistakes.
Next.js framework guide — App Router snippets.
Guides — signed URLs, auto OG, MCP, appearance.

OGKit turns one HTTPS URL into a 1200×630 Open Graph image. Read the API reference, deep guides, the Open Graph SEO guide, try the Playground, or sign in to create API keys.