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 sveadImport 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 --tagsPublish @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 --tagsMove @next package to latest
# authenticate with npm
npm login
# move @next to latest
npm dist-tag add [email protected] latestThanks goes to these wonderful people (emoji key):
 Scott Spence 💻 📖 💡 🚧 |
||||||
Add your contributions
|
||||||
This project follows the all-contributors specification. Contributions of any kind welcome!
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent