https://github.com/spences10/svead

Svead, a component that allows you to set head meta information, canonical, title, Twitter and Facebook Open Graph tags.
https://github.com/spences10/svead

canonical component head links metatags svelte sveltekit

Last synced: 3 months ago
JSON representation

Svead, a component that allows you to set head meta information, canonical, title, Twitter and Facebook Open Graph tags.

• Host: GitHub
• URL: https://github.com/spences10/svead
• Owner: spences10
• License: mit
• Created: 2022-05-15T14:07:07.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-04-12T22:04:36.000Z (10 months ago)
• Last Synced: 2024-04-13T20:49:57.067Z (10 months ago)
• Topics: canonical, component, head, links, metatags, svelte, sveltekit
• Language: TypeScript
• Homepage: https://svead.vercel.app
• Size: 1.2 MB
• Stars: 57
• Watchers: 4
• Forks: 3
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome-sveltekit - [code

README

        
# Svead 🍺 - Svelte Head Component

[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)

[![MadeWithSvelte.com shield](https://madewithsvelte.com/storage/repo-shields/4099-shield.svg)](https://madewithsvelte.com/p/svead/shield-link)

[![Tests: E2E](https://github.com/spences10/svead/actions/workflows/e2e-ci.yml/badge.svg)](https://github.com/spences10/svead/actions/workflows/e2e-ci.yml)

[![Tests: Unit](https://github.com/spences10/svead/actions/workflows/unit-test.yml/badge.svg)](https://github.com/spences10/svead/actions/workflows/unit-test.yml)

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.

![svead](.github/svead.svg)

## Name

The name was meant to be Svelte + Head, but I like Puru's suggestion

of Svelte + Mead

## v0.0.4 vs v1

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.

```svelte

	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',

	};