SEO

SEOMeta

Renders <meta> and <title> tags in <svelte:head> for SEO and Open Graph.

<script lang="ts">
  import { SEOMeta, createPageMeta } from '@repo/components'
  import { page } from '$app/state'

  const meta = createPageMeta(page.url, {
    title: 'Dashboard',
    description: 'Overview of metrics',
    keywords: 'dashboard, analytics',
  })
</script>

<SEOMeta
  pageMeta={meta}
  defaultMeta={{ siteName: 'My App', author: 'Acme' }}
  title={(t) => `${t} | My App`}
/>

Props

Prop	Type	Description
pageMeta	PageMeta	Page-specific metadata (overrides defaults)
defaultMeta	PageMeta	Fallback metadata for all pages
title	(title: string) => string	Optional transform for the title

PageMeta interface

interface PageMeta {
  title?: string
  description?: string
  keywords?: string
  image?: string
  canonicalUrl?: string
  author?: string
  siteName?: string
}

createPageMeta

Helper that builds a PageMeta object and auto-sets canonicalUrl from PUBLIC_APP_URL + the current pathname.

import { createPageMeta } from '@repo/components'

const meta = createPageMeta(url, {
  title: 'About',
  description: 'About our company',
})
// meta.canonicalUrl is set automatically

AutomaticBreadcrumbs

Renders a breadcrumb trail from an array of { title, path } objects. Also injects a JSON-LD BreadcrumbList structured data script tag.

<script lang="ts">
  import { AutomaticBreadcrumbs } from '@repo/components'
</script>

<AutomaticBreadcrumbs pageTitles={[
  { title: 'Home', path: '/' },
  { title: 'Employees', path: '/employees' },
  { title: 'John Doe', path: '/employees/1' },
]} />

Props

Prop	Type	Description
pageTitles	Breadcrumb[]	Array of { title, path } objects

If path is omitted, it is derived from the URL pathname segments.

createBreadcrumbs

Helper for building breadcrumb arrays across nested layouts:

// In a +layout.ts or +page.ts
import { createBreadcrumbs } from '@repo/components'

export async function load({ parent }) {
  const parentData = await parent()
  return {
    breadcrumbs: await createBreadcrumbs(parentData, { title: 'Employees' })
  }
}

createScriptTag

Low-level helper that generates a JSON-LD <script> tag string for breadcrumbs. Used internally by AutomaticBreadcrumbs.

import { createScriptTag } from '@repo/components'

const html = createScriptTag([
  { title: 'Home', path: '/' },
  { title: 'About', path: '/about' },
])