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.
It takes the following props:
Prop | Type | Description | Required |
---|---|---|---|
url | string | Full URL of the current page | Yes |
title | string | Page title | Yes |
description | string | Page description | Yes |
website | string | Website URL | Optional |
authorName | string | Author name | Optional |
image | string | Open Graph image URL | Optional |
paymentPointer | string | Web Monetization payment pointer | Optional |
datePublished | string | Date published in ISO 8601 format | Optional |
dateModified | string | Date modified in ISO 8601 format | Optional |
contentType | MainEntityType | Content type of the page | Optional |
language | string | Language of the page | Optional |
npm install svead
Import it into your Svelte pages and use:
<script>
import { page } from '$app/stores'
import { Head } from 'svead'
let title = 'This is Svead a Svelte Head Component'
let description =
'Svead, a component that allows you to set head meta information, canonical, title, Twitter and Facebook Open Graph tags.'
let url = $page.url.toString()
</script>
<Head {title} {description} {image} {url} />
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
# 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 --tags
Publish @next package
Same procedure except use the --tag
flag:
# 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 --tags
Move @next package to latest
# authenticate with npm
npm login
# move @next to latest
npm dist-tag add [email protected] latest
Thanks goes to these wonderful people (emoji key):
Scott Spence ๐ป ๐ ๐ก ๐ง |
||||||
Add your contributions |
This project follows the all-contributors specification. Contributions of any kind welcome!