Quickstart

Install the package:

npm install -D svelte-meta-tags

pnpm add -D svelte-meta-tags

yarn add -D svelte-meta-tags

Add <MetaTags> to any page or layout:

<script>
  import { MetaTags } from 'svelte-meta-tags';
</script>

<MetaTags
  title="My Page"
  description="A short description of this page."
  canonical="https://example.com/my-page"
  openGraph={{
    title: 'My Page',
    description: 'A short description of this page.',
    images: [{ url: 'https://example.com/og-image.jpg', width: 1200, height: 630, alt: 'My Page' }]
  }}
/>

That’s it — this renders <title>, <meta name="description">, <link rel="canonical">, and the og:* tags into <svelte:head>.

Alternative: set up with the Svelte CLI

Prefer a CLI-driven setup for an existing project? The community-maintained @sv-addon/svelte-meta-tags add-on wires up <MetaTags> for you. Community add-ons aren’t reviewed by the Svelte maintainers, so use them at your discretion:

npx sv add @sv-addon/svelte-meta-tags

See the sv add docs for more on community add-ons.

Next steps