Guides › Frameworks & CMS

How to add Open Graph tags in SvelteKit

Add tags with <svelte:head> in a page or layout, using data from your load function:

<script>
  import { page } from '$app/state'
  let { data } = $props()
</script>

<svelte:head>
  <title>{data.title}</title>
  <meta property="og:title" content={data.title} />
  <meta property="og:description" content={data.description} />
  <meta property="og:image" content={page.url.origin + data.image} />
  <meta property="og:url" content={page.url.href} />
  <meta name="twitter:card" content="summary_large_image" />
</svelte:head>

Keep SSR or prerendering enabled for these routes. With ssr = false, crawlers receive an empty shell. On older SvelteKit versions, import page from $app/stores and use $page.url.

Verify

Deploy, then run the live URL through the OG previewer. It fetches the page like a social crawler (no JavaScript), so tags added only on the client side won't show up. That matches what Facebook, LinkedIn and X see.

Related