Svead, a component that allows you to set head meta information, canonical, title, Twitter and Facebook Open Graph tags.
Also supports JSON-LD for SEO with the SchemaOrg component.
The name was meant to be Svelte + Head, but I like Puru's suggestion of Svelte + Mead
v1 is currently available via pnpm i -D svead@next and will be that
way until Svelte 5 comes out of RC phase.
v1 has changed compared to v0.0.4. The main change is that the there's
one config object with SeoConfig.
Separated out the SchemaOrg component from the Head component
which can be optionally used to add structured data to your web pages.
<script lang="ts">
import { Head, SchemaOrg } from 'svead';
import type { SeoConfig, SchemaOrgProps } from 'svead';
const seo_config: SeoConfig = {
title: 'Welcome to My Site',
description: 'This is a simple web page example.',
url: 'https://example.com/welcome',
};
const schema_org: SchemaOrgProps['schema'] = {
'@type': 'WebPage',
name: 'Welcome to My Site',
description: 'This is a simple web page example.',
url: 'https://example.com/welcome',
};
</script>
<Head {seo_config} />
<SchemaOrg schema={schema_org} />
<h1>Welcome to My Site</h1>
<p>This is a simple web page example.</p>It takes the following props:
| Property | Type | Description | Required |
|---|---|---|---|
title |
string |
The title of the web page. | Yes |
description |
string |
A description of the web page. | Yes |
url |
string |
The URL of the web page. | Yes |
website |
string |
The website the web page belongs to. | No |
language |
string | 'en' |
The language of the web page. Defaults to 'en'. | No |
open_graph_image |
string |
The URL of an image to use for Open Graph meta tags. | No |
payment_pointer |
string |
A payment pointer for Web Monetization. | No |
author_name |
string |
The name of the author. | No |
site_name |
string |
The name of the site for og:site_name. | No |
twitter_handle |
string |
The Twitter handle of the content creator or site. | No |
twitter_card_type |
string |
The type of Twitter card. Defaults to 'summary_large_image'. | No |
The SchemaOrg component allows you to add structured data to your web pages using JSON-LD format. This helps search engines better understand your content and can potentially improve your site's appearance in search results.
<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} />| Property | Type | Description | Required |
|---|---|---|---|
schema |
SchemaOrgType |
The structured data object following schema.org vocabulary. | Yes |
SchemaOrgType 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.
- 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.
<script lang="ts">
import { SchemaOrg, type SchemaOrgProps } from 'svead';
const schema_org: SchemaOrgProps['schema'] = {
'@type': 'WebPage',
name: 'My Blog Post',
description: 'An example blog post with structured data',
mainEntity: {
'@type': 'BlogPosting',
headline: 'My First Blog Post',
author: {
'@type': 'Person',
name: 'John Doe',
},
datePublished: '2023-08-22T10:00:00Z',
},
};
</script>
<SchemaOrg schema={schema_org} />Scott, this is here for you to remember how to do this 🙃
Although I detailed this in Making npm Packages with SvelteKit I think it's best to put it here as I always come to the README and the instructions are never there! 😅
Publish the project to NPM
# change to package directory
cd packages/svead
# authenticate with npm
npm login
# bump version with npm
npm version 0.0.8
# package with sveltekit
pnpm run package
# publish
npm publish
# push tags to github
git push --tagsPublish @next package
Same procedure except use the --tag flag:
# change to package directory
cd packages/svead
# authenticate with npm
npm login
# bump version with npm
npm version 0.0.13
# package with sveltekit
pnpm run package
# publish with tag
npm publish --tag next
# push tags to github
git push --tagsMove @next package to latest
# authenticate with npm
npm login
# move @next to latest
npm dist-tag add svead@0.0.13 latestTo add the svead package to the web workspace:
pnpm add -D svead --filter webThanks goes to these wonderful people (emoji key):
Scott Spence 💻 📖 💡 🚧 |
||||||
Add your contributions
|
||||||
This project follows the all-contributors specification. Contributions of any kind welcome!