OG Images in SvelteKit

Generate OG images in SvelteKit with the FastOG API — sign up free for 100 credits (create your API key in the dashboard), credit-based, HMAC-secured. This guide shows you how to create a signer utility for HMAC-signed OG image URLs and render dynamic Open Graph images on the fly. Use the Free OG Image Tester to preview before you integrate.

Quick Start

1. Create the signer utility

javascript
// src/lib/og-image-signer.js
import crypto from "node:crypto";

export function generateSignedOgUrl(params, options = {}) {
    const {
        baseUrl = "https://fastog.com/api/v1/og",
        apiKey = process.env.FASTOG_API_KEY,
        hmacSecret = process.env.FASTOG_HMAC_SECRET,
    } = options;

    if (!apiKey || !hmacSecret) {
        throw new Error("Missing FASTOG_API_KEY or FASTOG_HMAC_SECRET");
    }

    const timestamp = Math.floor(Date.now() / 1000);
    const url = new URL(baseUrl);

    for (const [key, value] of Object.entries(params)) {
        url.searchParams.set(key, value);
    }

    const apiKey = apiKey;
    const path = url.pathname;
    const message = `GET${path}${timestamp}${apiKey}`;

    const signature = crypto
        .createHmac("sha256", hmacSecret)
        .update(message)
        .digest("hex");

    url.searchParams.set("key", apiKey);
    url.searchParams.set("s", signature);
    url.searchParams.set("t", timestamp);

    return url.toString();
}

2. Environment variables

bash
# .env
FASTOG_API_KEY=sk_your_full_api_key_here
FASTOG_HMAC_SECRET=your_64_char_hex_secret_here

Page with Metadata

svelte
<!-- src/routes/blog/[slug]/+page.svelte -->
<script>
    export let data;

    $: ({ post, ogImageUrl } = data);
</script>

<svelte:head>
    <title>{post.title}</title>
    <meta property="og:image" content={ogImageUrl} />
    <meta property="og:title" content={post.title} />
    <meta property="og:description" content={post.excerpt} />
</svelte:head>

<article>
    <h1>{post.title}</h1>
    <p>{post.excerpt}</p>
</article>
javascript
// src/routes/blog/[slug]/+page.server.js
import { generateSignedOgUrl } from "$lib/og-image-signer";

export async function load({ params }) {
    const post = await getPost(params.slug);

    const ogImageUrl = generateSignedOgUrl({
        template: "blog",
        title: post.title,
        subtitle: post.excerpt,
        author: post.author.name,
    });

    return {
        post,
        ogImageUrl,
    };
}

API Route

javascript
// src/routes/api/og/+server.js
import { json } from "@sveltejs/kit";
import { generateSignedOgUrl } from "$lib/og-image-signer";

export async function GET({ url }) {
    const title = url.searchParams.get("title");
    const template = url.searchParams.get("template") || "default";

    if (!title) {
        return json({ error: "Missing title" }, { status: 400 });
    }

    const ogImageUrl = generateSignedOgUrl({
        template,
        title,
    });

    return json({ ogImageUrl });
}

E-commerce Example

javascript
// src/routes/products/[id]/+page.server.js
import { generateSignedOgUrl } from "$lib/og-image-signer";

export async function load({ params }) {
    const product = await getProduct(params.id);

    const ogImageUrl = generateSignedOgUrl({
        template: "ecommerce",
        title: product.name,
        price: product.price,
        image: product.image,
    });

    return { product, ogImageUrl };
}
svelte
<!-- src/routes/products/[id]/+page.svelte -->
<script>
    export let data;
    $: ({ product, ogImageUrl } = data);
</script>

<svelte:head>
    <meta property="og:image" content={ogImageUrl} />
    <meta property="og:title" content={product.name} />
</svelte:head>

<main>
    <h1>{product.name}</h1>
    <p>{product.price}</p>
</main>

User Profile Example

javascript
// src/routes/users/[username]/+page.server.js
import { generateSignedOgUrl } from "$lib/og-image-signer";

export async function load({ params }) {
    const user = await getUser(params.username);

    const ogImageUrl = generateSignedOgUrl({
        template: "profile",
        name: user.name,
        avatar: user.avatarUrl,
        bio: user.bio,
    });

    return { user, ogImageUrl };
}

Component with Dynamic OG Image

svelte
<!-- src/lib/ShareButtons.svelte -->
<script>
    import { onMount } from "svelte";

    export let post;
    let ogImageUrl = null;

    onMount(async () => {
        const res = await fetch(`/api/og?title=${encodeURIComponent(post.title)}`);
        const data = await res.json();
        ogImageUrl = data.ogImageUrl;
    });
</script>

<div class="share-buttons">
    <button on:click={() => shareToTwitter(ogImageUrl)}>
        Share on Twitter
    </button>
</div>

Common Pitfalls

Client-side Signing

Never sign OG URLs in browser code — the HMAC secret would be exposed.

❌ Wrong:

svelte
<script>
    import { generateSignedOgUrl } from "$lib/og-image-signer";
    // This runs in the browser!
    const ogUrl = generateSignedOgUrl({ title: post.title });
</script>

✅ Correct:

javascript
// +page.server.js(runs on server only)
import { generateSignedOgUrl } from "$lib/og-image-signer";
export async function load({ params }) {
    const ogImageUrl = generateSignedOgUrl({ title: post.title });
    return { ogImageUrl };
}

Timestamp in Milliseconds

❌ Wrong: Date.now() → 1722718800000

✅ Correct: Math.floor(Date.now() / 1000) → 1722718800

Full API Reference

Related

Try it free — no signup required

Preview and test dynamic OG images in seconds.

Open the Free OG Image Tester