Svelte Meta

Easily generate SEO metadata for Svelte

#seo-metadata #metadata #svelte

Download

Svelte Meta

Easily generate SEO metadata for Svelte.

Features

Automatically set relevant social meta tags common attributes like title and description
Automatically set relevant JSON-LD metadata
Shorthands for setting Open Graph and Twitter metadata
Shorthands for setting URL, Sitemap, and other technical SEO data

Usage

npm i svelte-meta

<script>
  import Meta from 'svelte-meta';
</script>

<Meta
  title="My Page"
  description="It's a great page"
  image="/cover.png"
  url="https://website.com/page
/>

Properties

Property	Type	Description	Metadata Set
`title`	`string`	Title of your project	`<title>`, `title`, `og:title`
`description`	`string`	Descriptoin of your project	`description`, `og:description`
`image`	`string` or `{ url: string; width: number; height: number; alt: string}`	Image for social networks	`og:image`
`url`	`string`	URL of the current page	`canonical` `og:url`
`siteUrl`	`string`	Root URL of your website	`JSON-LD`
`logo`	`string`	Logo image for your brand	`JSON-LD`
`search`	`string`	Search page base URL	`JSON-LD`
`sitemap`	`string`	URL of your sitemap	`sitemap`
`openGraph`	Inherits other properties, plus custom `og:` properties, eg: `video`	OpenGraph properties	`og:`

Notes

Twitter inherits Open Graph (og:) properties if twitter: specific metadata is not set, which is why svelte-meta doesn't include them

Top categories

tailwind daisyui admin template popup mdsvex portfolio blog form ecommerce ui carousel auth dark seo image routing