Dynamic OG Images for Svelte

SvelteKit Integration

SvelteKit's server-side rendering makes it perfect for dynamic OG images. Use the load function to generate image URLs.

Create a Utility

export function getOGImageUrl(params: {
  title: string;
  subtitle?: string;
  theme?: 'dark' | 'light';
}): string {
  const url = new URL('https://ogimageapi.io/api/generate');
  
  url.searchParams.set('title', params.title);
  if (params.subtitle) url.searchParams.set('subtitle', params.subtitle);
  url.searchParams.set('theme', params.theme || 'dark');
  
  return url.toString();
}

Blog Post Page

import { getOGImageUrl } from '$lib/og-image';
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async ({ params }) => {
  const post = await getPost(params.slug);
  
  const ogImage = getOGImageUrl({
    title: post.title,
    subtitle: `By ${post.author}`,
    theme: 'dark'
  });
  
  return {
    post,
    meta: {
      title: post.title,
      description: post.excerpt,
      ogImage
    }
  };
};

<script lang="ts">
  import { page } from '$app/stores';
  export let data;
</script>

<svelte:head>
  <title>{data.meta.title}</title>
  <meta name="description" content={data.meta.description} />
  
  <!-- Open Graph -->
  <meta property="og:title" content={data.meta.title} />
  <meta property="og:description" content={data.meta.description} />
  <meta property="og:image" content={data.meta.ogImage} />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:type" content="article" />
  
  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content={data.meta.title} />
  <meta name="twitter:description" content={data.meta.description} />
  <meta name="twitter:image" content={data.meta.ogImage} />
</svelte:head>

<article>
  <h1>{data.post.title}</h1>
  <!-- content -->
</article>

Reusable SEO Component

<script lang="ts">
  import { getOGImageUrl } from '$lib/og-image';
  
  export let title: string;
  export let description: string;
  export let author: string = '';
  export let theme: 'dark' | 'light' = 'dark';
  
  $: ogImage = getOGImageUrl({
    title,
    subtitle: author,
    theme
  });
</script>

<svelte:head>
  <title>{title}</title>
  <meta name="description" content={description} />
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content={ogImage} />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:image" content={ogImage} />
</svelte:head>

Use it in any page:

<script>
  import SEO from '$lib/components/SEO.svelte';
</script>

<SEO 
  title="My Blog Post"
  description="A great article about Svelte"
  author="Jane Developer"
/>