Put a proper `<Head />` on every page.

Svead is two Svelte components. Head sets your title, canonical, Open Graph and Twitter tags. SchemaOrg adds JSON-LD structured data.

pnpm add -D svead

Read the quick reference

Svelte + Head = Svead. It rhymes with mead, hence the pint.

<head> 13 tags

<link rel="canonical" href="https://example.com/">
<title>Mead on tap tonight</title>
<meta name="title" content="Mead on tap tonight">
<meta name="description" content="Six meads, two ciders and a guest ale. See what’s pouring.">
<meta property="og:url" content="https://example.com/">
<meta property="og:type" content="website">
<meta property="og:title" content="Mead on tap tonight">
<meta property="og:description" content="Six meads, two ciders and a guest ale. See what’s pouring.">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Mead on tap tonight">
<meta name="twitter:description" content="Six meads, two ciders and a guest ale. See what’s pouring.">
<meta itemprop="name" content="Mead on tap tonight">
<meta itemprop="description" content="Six meads, two ciders and a guest ale. See what’s pouring.">

On tap

Getting started

Schema types

Advanced usage

Best practices and help

Install and use

Add the package:

Terminal

1pnpm add -D svead

Then build a config for the page and hand it to Head. Add SchemaOrg when you want structured data too:

Svelte

1<script lang="ts">
2	import { page } from '$app/state';
3	import {
4		Head,
5		SchemaOrg,
6		type SeoConfig,
7		type SchemaOrgProps,
8	} from 'svead';
9
10	const seo_config: SeoConfig = {
11		title: 'My Blog Post',
12		description: 'This is an example blog post using Svead.',
13		url: page.url.href,
14		author_name: 'John Doe',
15		site_name: 'My Awesome Blog',
16	};
17
18	const schema_org: SchemaOrgProps['schema'] = {
19		'@type': 'BlogPosting',
20		headline: seo_config.title,
21		description: seo_config.description,
22		author: {
23			'@type': 'Person',
24			name: seo_config.author_name,
25		},
26		datePublished: new Date().toISOString(),
27	};
28</script>
29
30<Head {seo_config} />
31<SchemaOrg schema={schema_org} />
32
33<article>
34	<h1>{seo_config.title}</h1>
35	<p>{seo_config.description}</p>
36	<!-- Rest of your blog post content -->
37</article>

Put a proper <Head /> on every page.