OG images

GET /og/{publicId} returns a 1200×630 PNG suitable for <meta property="og:image">. Every option below is a query parameter.

Minimum request


https://api.ogstack.dev/og/{publicId}?url=https://example.com/post

The url parameter is required and must be URL-encoded. Its origin must match one of the project’s registered domains.

Query parameters

Parameter	Type	Values
`url`	string	Required. URL-encoded target page.
`template`	string	Template slug (see Templates). Default: `editorial`.
`accent`	hex	`#RRGGBB`. URL-encode as `%23RRGGBB`.
`dark`	boolean	`true` or `false`. Default: `true`.
`font`	enum	`inter`, `plus-jakarta-sans`, `space-grotesk`, `jetbrains-mono`, `noto-sans`, `instrument-serif`.
`logoUrl`	string	URL to a logo (PNG/SVG). URL-encoded.
`logoPosition`	enum	`top-left`, `top-right`, `bottom-left`, `bottom-right`.
`ai`	boolean	`true` to enable an AI-generated background with default model.
`aiModel`	enum	`standard` or `pro` (High fidelity — Pro plan only).
`aiPrompt`	string	Up to 500 characters. Blended with page-derived context unless `override` is used in API calls.

Response

Content-Type: image/png
Binary PNG body
Cache-Control: public, max-age=31536000, immutable (content-addressed — cached indefinitely)

Framework integration

Pick your stack. Each example wires the OG meta tag (and twitter:card) into the page’s <head>. Replace cLx8kZ9m with your project’s public ID.

HTML


<meta
  property="og:image"
  content="https://api.ogstack.dev/og/cLx8kZ9m?url=https://example.com/post&template=aurora&accent=%2310b981"
/>
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />

Next.js


import type { Metadata } from "next";
 
export async function generateMetadata({
  params,
}: {
  params: { slug: string };
}): Promise<Metadata> {
  const pageUrl = `https://example.com/${params.slug}`;
  const ogImage = new URL(`https://api.ogstack.dev/og/${process.env.OGSTACK_PUBLIC_ID}`);
  ogImage.searchParams.set("url", pageUrl);
  ogImage.searchParams.set("template", "editorial");
 
  return {
    openGraph: { images: [{ url: ogImage.toString(), width: 1200, height: 630 }] },
    twitter: { card: "summary_large_image", images: [ogImage.toString()] },
  };
}

Nuxt 4


<script setup lang="ts">
const route = useRoute();
const config = useRuntimeConfig();
const ogImage = `https://api.ogstack.dev/og/${config.public.ogstackPublicId}?url=${encodeURIComponent(`https://example.com${route.path}`)}&template=editorial`;
 
useSeoMeta({
  ogImage,
  ogImageWidth: 1200,
  ogImageHeight: 630,
  twitterCard: "summary_large_image",
});
</script>

Astro


---
const publicId = import.meta.env.OGSTACK_PUBLIC_ID;
const pageUrl = Astro.url.toString();
const og = `https://api.ogstack.dev/og/${publicId}?url=${encodeURIComponent(pageUrl)}&template=editorial`;
---
<meta property="og:image" content={og} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />

SvelteKit


<script lang="ts">
  import { page } from '$app/stores';
  import { env } from '$env/dynamic/public';
 
  $: og = `https://api.ogstack.dev/og/${env.PUBLIC_OGSTACK_ID}?url=${encodeURIComponent($page.url.href)}&template=editorial`;
</script>
 
<svelte:head>
  <meta property="og:image" content={og} />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta name="twitter:card" content="summary_large_image" />
</svelte:head>

Remix


import type { MetaFunction } from "@remix-run/node";
 
export const meta: MetaFunction = ({ params }) => {
  const pageUrl = `https://example.com/posts/${params.slug}`;
  const og = `https://api.ogstack.dev/og/${process.env.OGSTACK_PUBLIC_ID}?url=${encodeURIComponent(pageUrl)}&template=editorial`;
  return [
    { property: "og:image", content: og },
    { property: "og:image:width", content: "1200" },
    { property: "og:image:height", content: "630" },
    { name: "twitter:card", content: "summary_large_image" },
  ];
};

Vue 3


<script setup lang="ts">
import { useHead } from "@unhead/vue";
import { useRoute } from "vue-router";
 
const route = useRoute();
const og = `https://api.ogstack.dev/og/${import.meta.env.VITE_OGSTACK_PUBLIC_ID}?url=${encodeURIComponent(`https://example.com${route.path}`)}&template=editorial`;
 
useHead({
  meta: [
    { property: "og:image", content: og },
    { property: "og:image:width", content: "1200" },
    { property: "og:image:height", content: "630" },
    { name: "twitter:card", content: "summary_large_image" },
  ],
});
</script>

React (Vite)


import { Helmet } from "react-helmet-async";
 
export function PostMeta({ slug }: { slug: string }) {
  const og = `https://api.ogstack.dev/og/${import.meta.env.VITE_OGSTACK_PUBLIC_ID}?url=${encodeURIComponent(`https://example.com/${slug}`)}&template=editorial`;
  return (
    <Helmet>
      <meta property="og:image" content={og} />
      <meta property="og:image:width" content="1200" />
      <meta property="og:image:height" content="630" />
      <meta name="twitter:card" content="summary_large_image" />
    </Helmet>
  );
}

Angular


<!-- src/index.html (inside <head>) -->
<meta
  property="og:image"
  content="https://api.ogstack.dev/og/cLx8kZ9m?url=https://example.com/post&template=aurora&accent=%2310b981"
/>
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />

For per-page OG images, pair this with Angular Universal (SSR) so crawlers receive the rendered tag with the page-specific URL templated server-side.

Rate limits

Public endpoints are rate-limited per public ID using the project owner’s plan. Common social crawlers (Twitterbot, LinkedInBot, Slackbot, Discordbot, FacebookBot) bypass the limit so your previews still render during traffic spikes. See Rate limits.