Deployment guide
Open Graph image API on vercel
Host this Next.js app on Vercel, set your `NEXT_PUBLIC_APP_URL` to the deployment origin, and point `og:image` to the same project’s `/api/og/...` route. Edge and Node runtimes are supported; the OG route runs on Node for key verification.
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://www.webmorp.artOGKIT_KEY=ogk_live_...API_KEY_SALT=...NEXT_PUBLIC_BASE_PATH=/ogkit
Production checklist
- Use the final production domain in public URL env vars.
- Keep API keys server-side (Vercel project env, not NEXT_PUBLIC_).
- Let Vercel CDN honor OGKit cache headers on /api/og/*.
- Point MCP clients at https://your.host/ogkit/api/mcp when using basePath.
Caching and crawlability
OGKit image responses include cache headers for CDN reuse. Keep image URLs deterministic so repeated shares hit cache instead of re-rendering.
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
Project wiring
Deploy the OGKit Next app (or consume hosted OGKit URLs from your own Next app). If you only need cards, you do not need to self-host — point metadata at www.webmorp.art OGKit URLs with your key.
Preview deployments
Do not put Vercel preview URLs into production og:image. Generate cards against the production OGKit origin so Slack caches a stable host.
Frequently asked questions
How do I deploy an Open Graph image API on vercel?
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.
Related pages
- 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.