https://github.com/indaco/sveo
SEO made simple for Svelte & SvelteKit.
https://github.com/indaco/sveo
components json-ld metadata opengraph schema-org seo svelte svelte5 sveltekit
Last synced: 3 months ago
JSON representation
SEO made simple for Svelte & SvelteKit.
- Host: GitHub
- URL: https://github.com/indaco/sveo
- Owner: indaco
- License: mit
- Created: 2025-04-03T15:44:07.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2026-02-23T15:49:24.000Z (6 months ago)
- Last Synced: 2026-02-23T23:42:29.395Z (5 months ago)
- Topics: components, json-ld, metadata, opengraph, schema-org, seo, svelte, svelte5, sveltekit
- Language: TypeScript
- Homepage:
- Size: 160 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
sveo
SEO made simple for Svelte & SvelteKit.
## Overview
**@indaco/sveo** is a collection of type-safe SEO components for [Svelte v5](https://svelte.dev) and [SvelteKit](https://kit.svelte.dev). It provides a simple and declarative way to manage SEO and metadata using components.
### Features
- Type-safe SEO components
- Works with both Svelte and SvelteKit
- Supports all major SEO standards:
- Open Graph (Facebook, LinkedIn, etc.)
- Twitter Cards
- Schema.org JSON-LD
- Standard meta tags
- Fully tree-shakable and modular
- No runtime JavaScript – All components render static tags inside , so nothing is shipped to the client.
## Install
```bash
# pnpm
pnpm add -D @indaco/sveo
# npm
npm install --save-dev @indaco/sveo
# yarn
yarn add --dev @indaco/sveo
```
## Components List
### Metadata
Start with [`PageMetaTags`] for essential metadata like ``, ``, and other common tags that support SEO and social previews.
- [PageMetaTags] – A lightweight component to manage basic metadata inside ``.
#### OpenGraph
Enhance your content's visibility on platforms like Facebook, LinkedIn, and others with modular components that map to Open Graph's `og:type`. Each component is designed to be composable and type-safe.
Available types:
- Article
- Book
- Business
- Profile
- Product
- MusicSong
- MusicAlbum
- MusicPlaylist
- MusicRadioStation
- VideoMovie
- VideoEpisode
Each component renders relevant `` tags automatically based on the data you provide.
[Learn how to use the OpenGraph component](src/lib/components/metadata/opengraph/README.md)
#### TwitterCard
A flexible component that generates meta tags for [Twitter Cards](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup) using a single prop: `data`, typed as `SEOWebPage`.
It supports all official Twitter Card types:
- `summary`
- `summary_large_image`
- `player`
- `app`
The component automatically renders conditional tags based on the selected card type and the fields present in `data.twitter`.
[Learn how to use the TwitterCard component](src/lib/components/metadata/twittercard/README.md)
### SchemaOrg (JSON-LD)
Leverage structured data with ready-to-use components for common [Schema.org](https://schema.org/) types. These components help improve search engine understanding and support rich results in platforms like Google, Bing, and social media.
Each component accepts a simple, type-safe data object and renders a `` block safely within `<svelte:head>`.
- [JsonLdWebSite]
- [JsonLdWebPage]
- [JsonLdBreadcrumbs]
- [JsonLdSiteNavigationElement]
See the linked _READMEs_ for detailed usage examples and supported properties.
## Usage
You can use any SEO component inside your route files or layout components. Here’s a minimal example:
```svelte
<script>
import type { OpenGraphType, TwitterCardType, SEOMenuItem } from '@indaco/sveo/types';
import PageMetaTags from '@indaco/sveo/metadata/PageMetaTags.svelte'
import TwitterCard from '@indaco/sveo/metadata/twittercard/TwitterCard.svelte';
import JsonLdWebSite from '@indaco/sveo/schemaorg/website/JsonLdWebSite.svelte'
}
/>
```
## License
MIT - see the [License](LICENSE) file.
[PageMetaTags]: src/lib/components/metadata/README.md
[JsonLdWebSite]: src/lib/components/schemaorg/website/README.md
[JsonLdWebPage]: src/lib/components/schemaorg/webpage/README.md
[JsonLdBreadcrumbs]: src/lib/components/schemaorg/breadcrumbs/README.md
[JsonLdSiteNavigationElement]: src/lib/components/schemaorg/sitenavigationelements/README.md