Dynamic OG Images for SvelteKit Apps

Use SvelteKit's server load functions to generate unique OG images for every route automatically.

Get Started

Server-Side

Runs in +page.server.ts with secure environment variables and server-only logic.

Reactive

Svelte reactive bindings ensure your OG images update when data changes.

SSR Ready

Works with SvelteKit SSR out of the box for optimal performance and SEO.

Example Integration

// src/routes/blog/[slug]/+page.server.ts
export async function load({ params }) {
  const post = await getPost(params.slug);
  const ogUrl = `https://imagoapi.com/api/og/generate?title=${encodeURIComponent(post.title)}&template=modern&api_key=${process.env.IMAGO_API_KEY}`;
  return { post, ogUrl };
}

// src/routes/blog/[slug]/+page.svelte
<script>
  export let data;
</script>
<svelte:head>
  <meta property="og:image" content={data.ogUrl} />
  <meta name="twitter:image" content={data.ogUrl} />
</svelte:head>

Generate Perfect OG Images Today

Join thousands of developers using Imago API for dynamic social cards.

Start Free Trial