How to Add Custom OG Images to Your SvelteKit Site
SvelteKit does not have a centralized metadata API like Next.js, so OG images are set through `svelte:head` blocks directly in your page components or layout files. The pattern is straightforward once you know where each piece goes. Here is how to do it cleanly.
Use svelte:head in your page or layout
Inside any `.svelte` file, a `<svelte:head>` block lets you inject tags into the document head. Add your OG meta tags there: `<meta property="og:image" content={ogImageUrl} />` along with `og:title` and `og:description`. For a global fallback, put the block in your root `+layout.svelte` with default values. Individual pages can override by including their own `<svelte:head>` block, which SvelteKit merges together, with the most specific page winning for duplicate properties.
Load the image URL from a +page.ts load function
For dynamic routes like blog posts, define a `load` function in `+page.ts` that fetches your content record, including the OG image URL stored in your database or CMS. Return the URL as part of the load result and destructure it in your `+page.svelte` via the `data` prop. This approach keeps all data fetching server-side on initial load, so social crawlers see the fully populated meta tags without needing JavaScript to execute.
Set meta in the layout for consistent branding
If every page on your site shares the same brand-level OG image as a fallback, set it once in `+layout.svelte` and override it only on pages that have unique images. This saves you from repeating the same default values across dozens of route files. For a content site, the layout sets the site-wide card and each blog post page sets its own. A missing override simply inherits the layout default, so no page is ever left without an image.
Absolute URLs are mandatory for social crawlers
SvelteKit page components often use relative paths for internal links and images, but `og:image` must be a fully qualified URL including the protocol and domain. Use the `$env/static/public` module to access `PUBLIC_SITE_URL` and prefix your image paths: `const ogImage = `${PUBLIC_SITE_URL}/og/post-slug.png``. Set `PUBLIC_SITE_URL` in your `.env` to your production domain so the correct URL is baked in at build time.
Generate your OG image in seconds
Paste a title, pick a brand color, and get production-ready social cards for every platform — with framework-specific meta tag snippets included.
Generate an OG image for your SvelteKit site