Back to Docs

Svelte framework

SvelteKit OG Image Integration

Add automatic MyOG.social images to SvelteKit pages with load data and server-rendered <svelte:head> tags.

Prerequisites

  • A SvelteKit app with SSR enabled
  • A production origin available to server load functions or page data
  • A MyOG.social account with your domain added

How MyOG fits SvelteKit

SvelteKit recommends putting title and meta tags inside <svelte:head>. MyOG fits that pattern because the generated image URL can be derived from the canonical page URL.

Return the page URL or SEO data from a load function, then render og:image and twitter:image in the page or root layout head.

Keep SSR on for public pages. Client-side updates to head tags are too late for many social preview crawlers.

1

Choose a layout

MyOG detects page content and branding automatically. The layout only controls image composition.

2

Add the SvelteKit code

+page.server.ts

Return the generated image URL from server-side page data.

import type { PageServerLoad } from "./$types"

const siteURL = "https://example.com"

export const load: PageServerLoad = async ({ params }) => {
  const pageURL = `${siteURL}/blog/${params.slug}`
  const myogImageURL = `https://api.myog.social/og?url=${encodeURIComponent(pageURL)}&template=screenshot-right`

  return { myogImageURL }
}

+page.svelte

Render the tags in <svelte:head> so crawlers receive them in HTML.

<script lang="ts">
  import type { PageData } from "./$types"

  export let data: PageData
</script>

<svelte:head>
  <meta property="og:image" content={data.myogImageURL} />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:image" content={data.myogImageURL} />
</svelte:head>
3

Place it correctly

  1. Build the canonical page URL in +page.server.ts or +layout.server.ts.
  2. Return the MyOG image URL as page data.
  3. Render the Open Graph and Twitter image tags inside <svelte:head>.
  4. Deploy and view source on the public URL.

Avoid duplicate og:image tags

If your layout already renders an og:image from page data, switch that data source to MyOG. Avoid adding a second <svelte:head> image block that competes with the first one.

Dynamic pages

Use params in server load functions for posts, products, docs, and other dynamic routes. Build the public path from the route params, then encode the absolute URL for MyOG.

Test the result

  • Use View Source on the deployed page, not the hydrated DOM inspector alone.
  • Check an SSR dynamic route.
  • Run the public URL through the MyOG checker and a social debugger.

Start with the MyOG Open Graph Checker, then refresh social platform caches if needed.

Known limitations

Disabling SSR for a route makes social metadata less reliable.
Prerendered pages need the production origin available at build time.
Private routes and unpublished drafts cannot be fetched by MyOG or social crawlers.

Sources

Ready to get started?

Sign up for free and add generated OG images to SvelteKit pages.

Already have an account?

cdf733b534ea2f2ed964d150330b323c44837e4f