Dependency-free approach to declare metadata on SvelteKit pages — for example for SEO.
- Enables you to pass data from page components to
__layout.svelte - ✅ Works with MDSveX out of the box.
Sveocomponent for easy templating of meta tags, Twitter cards, OpenGraph, etc.
npm i -D @didiercatz/sveoUsing Sveo is quite simple. Create (or edit) a __layout.svelte inside your routes folder.
import { metadata } from '@didiercatz/sveo'
const seo = await metadata(page)<script context="module">
import { metadata } from '@didiercatz/sveo'
export const load = async ({ page }) => {
// The metadata from the page component
const { title, description } = await metadata(page)
return {
props: {
title,
description
}
}
}
</script>Then, in your markup, you can use the title property as you please.
<!-- __layout[.reset].svelte -->
<script>
export let title
export let description
</script>
<h1>{title}</h1>
<p>{description}</p>Finally, you can define metadata in your route's <script module="context">:
<script module="context">
export const metadata = {
title: 'Hello world',
description: 'Have a wonderful day.'
}
</script>While using the metadata function is a nice way to grab data from your page components, sveo also comes with a more full-fledged component that automatically templates your SEO stuff like meta tags, page titles, Twitter cards, etc.
<!-- __layout[.reset].svelte -->
<script context="module">
import { metadata } from '@didiercatz/sveo'
export const load = async ({ page }) => {
const seo = await metadata(page)
return {
props: { seo }
}
}
</script>
<script>
import Sveo from '@didiercatz/sveo'
export let seo = {
// You could even fill in some defaults here.
}
</script>
<Sveo {seo}/>options |
default | Purpose |
|---|---|---|
routes |
src/routes |
The folder containing your SvelteKit routes |