Welcome to Svead 🍺
The Svelte Head and Schema.org Component.
Svead is a dynamic component that enhances your SEO by allowing you to set head meta information for canonical, title, Twitter, Facebook, Open Graph tags, and JSON-LD structured data.
Visit GitHub to contribute to this project.
Components
Svead provides two main components:
Head: For setting meta tags and other head information.SchemaOrg: For adding structured data using JSON-LD.
Example Routes
Explore how Svead works with different content types:
Head Component
Usage
<script lang="ts">
import { Head, type SeoConfig } from 'svead';
const seo_config: SeoConfig = {
title: 'Welcome to My Site',
description: 'This is a simple web page example.',
url: 'https://example.com/welcome',
};
</script>
<Head {seo_config} />SeoConfig Props
SchemaOrg Component
Usage
<script lang="ts">
import { SchemaOrg, type SchemaOrgProps } from 'svead';
const schema_org: SchemaOrgProps['schema'] = {
'@type': 'BlogPosting',
headline: 'My First Blog Post',
description: 'This is an example of a blog post using svead.',
author: {
'@type': 'Person',
name: 'John Doe',
},
datePublished: '2023-08-22T10:00:00Z',
};
</script>
<SchemaOrg schema={schema_org} />SchemaOrgProps Props
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@contextproperty.
You can use any valid schema.org type as defined in the schema.org documentation.
Additional Notes:
- The
@contextproperty 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
<script lang="ts">
import { page } from '$app/stores';
import {
Head,
SchemaOrg,
type SeoConfig,
type SchemaOrgProps,
} from 'svead';
const seo_config: SeoConfig = {
title: 'My Blog Post',
description: 'This is an example blog post using Svead.',
url: $page.url.href,
author_name: 'John Doe',
site_name: 'My Awesome Blog',
};
const schema_org: SchemaOrgProps['schema'] = {
'@type': 'BlogPosting',
headline: seo_config.title,
description: seo_config.description,
author: {
'@type': 'Person',
name: seo_config.author_name,
},
datePublished: new Date().toISOString(),
};
</script>
<Head {seo_config} />
<SchemaOrg schema={schema_org} />
<article>
<h1>{seo_config.title}</h1>
<p>{seo_config.description}</p>
<!-- Rest of your blog post content -->
</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.
For more information and full documentation, visit the Svead GitHub repository.