Dependency-free approach to declare metadata on SvelteKit pages — for example for SEO.
__layout.svelte
Sveo
component for easy templating of meta tags, Twitter cards, OpenGraph, etc.npm i -D @didiercatz/sveo
sveo
, but according to npm, that's too similar to svgo
. :man_shrugging:Using 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 |