Skip to content
svead

Components

Svead provides two main components:

  1. Head: For setting meta tags and other head information.
  2. SchemaOrg: For adding structured data using JSON-LD.

Head Component

Usage

Svelte 
1<script lang="ts">
2	import { Head, type SeoConfig } from 'svead';
3
4	const seo_config: SeoConfig = {
5		title: 'Welcome to My Site',
6		description: 'This is a simple web page example.',
7		url: 'https://example.com/welcome',
8	};
9</script>
10
11<Head {seo_config} />

SeoConfig Props

PropertyTypeDescriptionRequired
titlestringThe title of the web page.Yes
descriptionstringA description of the web page.Yes
urlstringThe URL of the web page.Yes
websitestringThe website the web page belongs to.No
languagestringThe locale for og:locale, e.g. en_GB. Omitted if unset.No
open_graph_imagestringThe URL of an image to use for Open Graph meta tags.No
payment_pointerstringA payment pointer for Web Monetization.No
author_namestringThe name of the author.No
site_namestringThe name of the site for og:site_name.No
twitter_handlestringThe Twitter handle of the content creator or site.No
twitter_card_typestringThe type of Twitter card. Defaults to ‘summary_large_image’.No
open_graph_image_altstringAlt text for the Open Graph image. Defaults to the title.No

SchemaOrg Component

Usage

Svelte 
1<script lang="ts">
2	import { SchemaOrg, type SchemaOrgProps } from 'svead';
3
4	const schema_org: SchemaOrgProps['schema'] = {
5		'@type': 'BlogPosting',
6		headline: 'My First Blog Post',
7		description: 'This is an example of a blog post using svead.',
8		author: {
9			'@type': 'Person',
10			name: 'John Doe',
11		},
12		datePublished: '2023-08-22T10:00:00Z',
13	};
14</script>
15
16<SchemaOrg schema={schema_org} />

SchemaOrgProps Props

PropertyTypeDescriptionRequired
schemaSchemaOrgTypeThe structured data object following schema.org vocabulary.Yes

SchemaOrgType

SchemaOrgType is extended from schema-dts and is a union type that includes:

  • Thing: Represents the most generic type of item in schema.org.
  • WithContext<Thing>: A Thing with an added @context property.

You can use any valid schema.org type as defined in the schema.org documentation.

Additional Notes:

  • The @context property is automatically added by the component if not provided.
  • You can include multiple schema types by nesting them within the main schema object.
  • Always validate your structured data using tools like Google’s Rich Results Test to ensure it’s correctly formatted.

Example with Both Components

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>

This example demonstrates how to use both the Head and SchemaOrg components together in a Svelte page, providing both meta tags and structured data for improved SEO.

All documentation