OG Images for SvelteKit
Open Graph images for SvelteKit — no server-side rendering needed
Add beautiful social preview images to your SvelteKit app. Use OGMagic's URL-based API in your svelte:head tags for instant OG images.
Quick Start
Add OGMagic to your SvelteKit project — no packages to install, no API keys to configure.
<!-- src/routes/+layout.svelte -->
<script>
import { page } from '$app/stores';
</script>
<svelte:head>
<meta property="og:image" content="https://ogmagic.dev/api/og?template=gradient-mesh&title=My+Site&domain=mysite.com" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
</svelte:head>Dynamic OG Images
Generate unique OG images per page using route data:
<!-- src/routes/blog/[slug]/+page.svelte -->
<script>
export let data; // from +page.server.js load function
const ogUrl = `https://ogmagic.dev/api/og?template=minimal-dark&title=${encodeURIComponent(data.post.title)}&description=${encodeURIComponent(data.post.excerpt)}&domain=mysite.com`;
</script>
<svelte:head>
<meta property="og:image" content={ogUrl} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
</svelte:head>💡 Works with SvelteKit's load functions and server-side data. Images are generated on-demand by OGMagic's edge API.
Why use OGMagic with SvelteKit?
No build step
Images are generated on-demand via URL. No build plugins, no CI/CD changes.
55+ templates
Professional designs out of the box. Customize with query parameters.
No API key needed
Free tier works instantly — just use the URL. No signup, no config.
Every platform
Optimized 1200×630 images that look great on Twitter/X, Facebook, LinkedIn, Discord, and Slack.
Ready to add OG images to your SvelteKit app?
Start with 50 free API calls/month. No signup needed.