# OG images in SvelteKit

Fetch the URL in load, print it in svelte:head.

## Where it plugs in

A `load` function in `+page.server.ts` runs on the server only, so the key never reaches the browser. The result flows into page data and renders inside `<svelte:head>`.

`src/routes/blog/[slug]/+page.server.ts`

```ts
import { SHAREGLINT_KEY } from '$env/static/private';
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async ({ params, fetch }) => {
  const post = await getPost(params.slug);

  const res = await fetch('https://shareglint.com/v1/images?wait=true', {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${SHAREGLINT_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      template: 'blog-og',
      modifications: { title: post.title, author: post.author, site: 'yourblog.com' },
    }),
  });

  const { url: ogImage } = await res.json();

  return { post, ogImage };
};
```

## The trap

Importing from `$env/static/private` is checked at build time — try to use it in a universal `+page.ts` and SvelteKit fails the build. That is deliberate, and it is what stops you from leaking the key.

## What it costs

A hundred images a month free, then $9 for two thousand. The same post rendered twice returns the existing URL and uses no quota — so rebuilding your site costs nothing.