@indaco/sveo 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 indaco (Mirco Veltri)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,207 @@
+
+<h1 align="center">sveo</h1>
+<h2 align="center" style="font-size: 1.5em;">SEO made simple for Svelte & SvelteKit.</h2>
+
+<p align="center">
+  <a href="https://github.com/indaco/sveo/actions/workflows/ci.yml" target="_blank">
+    <img src="https://github.com/indaco/sveo/actions/workflows/ci.yml/badge.svg" alt="CI" />
+  </a>
+  <a href="https://codecov.io/gh/indaco/sveo">
+    <img src="https://codecov.io/gh/indaco/sveo/branch/main/graph/badge.svg" alt="Codecov" />
+  </a>
+  <a href="https://www.npmjs.com/package/@indaco/sveo" target="_blank">
+    <img src="https://img.shields.io/npm/v/@indaco/sveo.svg?style=flat-square" alt="npm version" />
+  </a>
+  <a href="https://github.com/indaco/sveo/blob/main/LICENSE" target="_blank">
+    <img src="https://img.shields.io/badge/license-MIT-blue?style=flat-square" alt="License: MIT" />
+  </a>
+</p>
+
+## 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 <svelte:head>, 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 `<title>`, `<meta name="description">`, and other common tags that support SEO and social previews.
+
+- [PageMetaTags] – A lightweight component to manage basic metadata inside `<svelte:head>`.
+
+#### 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 `<meta property="og:*">` 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 `<script type="application/ld+json">` 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'
+</script>
+
+<PageMetaTags
+  data={{
+    url: 'https://example.com/posts/getting-started',
+    title: 'Getting Started Article',
+    description: 'This is the description for the Getting Started Article',
+    author: 'Your Name',
+    keywords: ['sveltekit', 'components', 'tests', 'vitest'],
+    opengraph: {
+      type: OpenGraphType.Article,
+      article: {
+        published_time: '23-01-2022',
+        modified_time: '24-01-2022'
+      }
+    },
+    twitter: {
+      type: TwitterCardType.Large,
+      site: '@username'
+    }
+  }}
+/>
+
+<JsonLdWebSite
+  data={{
+    name: 'My Svelte App',
+    baseURL: 'https://example.com',
+    title: 'Getting Started Article',
+    description: 'This is a SvelteKit site using sveo for SEO.',
+    language: 'en',
+    socials: {
+      twitter: 'https://twitter.com/indaco',
+      github: 'https://github.com/indaco'
+    }
+  }}
+/>
+
+<JsonLdSiteNavigationElements
+  baseURL="https://example.com"
+  data={[
+    { identifier: 'home', name: 'Home', url: '/', weight: 1 },
+    { identifier: 'about', name: 'About', url: '/about', weight: 2 },
+    {
+      identifier: 'github',
+      name: 'GitHub',
+      url: 'https://github.com/indaco',
+      weight: 3,
+      external: true
+    }
+  ] satisfies Array<SEOMenuItem>}
+/>
+
+<TwitterCard
+  data={{
+    url: 'https://example.com',
+    title: 'Amazing Svelte Site',
+    description: 'This site showcases the power of SvelteKit for SEO.',
+    keywords: ['svelte', 'sveltekit', 'seo'],
+    image: {
+      url: 'https://example.com/og-image.jpg',
+      alt: 'Preview of the Svelte site'
+    },
+    twitter: {
+      type: TwitterCardType.Player,
+      site: '@example',
+      player: {
+        url: 'https://example.com/player.html',
+        width: 640,
+        height: 360
+      },
+      app: {
+        country: 'US',
+        idIPhone: '1234567890',
+        idIPad: '0987654321',
+        idGooglePlay: 'com.example.app'
+      }
+    }
+  }}
+/>
+```
+
+## License
+
+MIT - see the [License](LICENSE) file.
+
+<!-- Resource Links -->
+[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

package/dist/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './metadata/index.js';
+export * from './schemaorg/index.js';

package/dist/components/index.js

@@ -0,0 +1,2 @@
+export * from './metadata/index.js';
+export * from './schemaorg/index.js';

package/dist/components/metadata/PageMetaTags.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">import { OpenGraph } from './opengraph/index.js';
+import { TwitterCard } from './twittercard/index.js';
+let { data } = $props();
+</script>
+
+<svelte:head>
+	<title>{data.title}</title>
+	<link rel="canonical" href={data.url} />
+	{#if data.description}
+		<meta name="description" content={data.description} />
+	{/if}
+	{#if data.keywords?.length}
+		<meta name="keywords" content={data.keywords.join(', ')} />
+	{/if}
+
+	<OpenGraph {data} />
+
+	<TwitterCard {data} />
+</svelte:head>

package/dist/components/metadata/PageMetaTags.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { SEOWebPage } from '../../types.js';
+interface Props {
+    data: SEOWebPage;
+}
+declare const PageMetaTags: import("svelte").Component<Props, {}, "">;
+type PageMetaTags = ReturnType<typeof PageMetaTags>;
+export default PageMetaTags;

package/dist/components/metadata/index.d.ts

@@ -0,0 +1,3 @@
+export * from './opengraph/index.js';
+export * from './twittercard/index.js';
+export { default as PageMetaTags } from './PageMetaTags.svelte';

package/dist/components/metadata/index.js

@@ -0,0 +1,3 @@
+export * from './opengraph/index.js';
+export * from './twittercard/index.js';
+export { default as PageMetaTags } from './PageMetaTags.svelte';

package/dist/components/metadata/opengraph/OpenGraph.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">import { OpenGraphType } from '../../../types.js';
+import Article from './article.svelte';
+import Book from './book.svelte';
+import Business from './business.svelte';
+import MusicAlbum from './music-album.svelte';
+import MusicPlaylist from './music-playlist.svelte';
+import MusicRadioStation from './music-radio-station.svelte';
+import MusicSong from './music-song.svelte';
+import Product from './product.svelte';
+import Profile from './profile.svelte';
+import VideoEpisode from './video-episode.svelte';
+import VideoMovie from './video-movie.svelte';
+let { data } = $props();
+</script>
+
+{#if data.opengraph && data.opengraph.type}
+	<meta property="og:type" content={data.opengraph.type} />
+	<meta property="og:url" content={data.url} />
+	<meta property="og:title" content={data.title} />
+	{#if data.description}
+		<meta property="og:description" content={data.description} />
+	{/if}
+
+	{#if data.image?.url}
+		<meta property="og:image" content={data.image.url} />
+		{#if data.image.alt}
+			<meta property="og:image:alt" content={data.image.alt} />
+		{/if}
+	{/if}
+
+	{#if data.opengraph.type == OpenGraphType.Article}
+		<Article {data} />
+	{:else if data.opengraph.type == OpenGraphType.Profile}
+		<Profile {data} />
+	{:else if data.opengraph.type == OpenGraphType.Book}
+		<Book {data} />
+	{:else if data.opengraph.type == OpenGraphType.Business}
+		<Business {data} />
+	{:else if data.opengraph.type == OpenGraphType.Product}
+		<Product {data} />
+	{:else if data.opengraph.type == OpenGraphType.MusicSong}
+		<MusicSong {data} />
+	{:else if data.opengraph.type == OpenGraphType.MusicAlbum}
+		<MusicAlbum {data} />
+	{:else if data.opengraph.type == OpenGraphType.MusicPlaylist}
+		<MusicPlaylist {data} />
+	{:else if data.opengraph.type == OpenGraphType.MusicRadioStation}
+		<MusicRadioStation {data} />
+	{:else if data.opengraph.type == OpenGraphType.VideoMovie || data.opengraph.type == OpenGraphType.VideoTVShow || data.opengraph.type == OpenGraphType.VideoOther}
+		<VideoMovie {data} />
+	{:else if data.opengraph.type == OpenGraphType.VideoEpisode}
+		<VideoEpisode {data} />
+	{/if}
+{/if}

package/dist/components/metadata/opengraph/OpenGraph.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { SEOWebPage } from '../../../types.js';
+interface Props {
+    data: SEOWebPage;
+}
+declare const OpenGraph: import("svelte").Component<Props, {}, "">;
+type OpenGraph = ReturnType<typeof OpenGraph>;
+export default OpenGraph;

package/dist/components/metadata/opengraph/article.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">import { toISODateString } from '../../../utils.js';
+let { data } = $props();
+const times = [
+    ['published_time', data.opengraph?.article?.published_time],
+    ['modified_time', data.opengraph?.article?.modified_time],
+    ['expiration_time', data.opengraph?.article?.expiration_time]
+];
+</script>
+
+{#each times as [key, value] (key)}
+	{#if value}
+		<meta property={`article:${key}`} content={toISODateString(value)} />
+	{/if}
+{/each}
+
+{#if data.author}
+	<meta property="article:author" content={data.author} />
+{/if}
+
+{#if data.opengraph?.article?.section}
+	<meta property="article:section" content={data.opengraph.article.section} />
+{/if}
+
+{#if Array.isArray(data.opengraph?.article?.tags)}
+	{@const _tags = data.opengraph.article.tags}
+	{#each _tags as tag (tag)}
+		<meta property="article:tag" content={tag} />
+	{/each}
+{/if}

package/dist/components/metadata/opengraph/article.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { SEOWebPage } from '../../../types.js';
+interface Props {
+    data: SEOWebPage;
+}
+declare const Article: import("svelte").Component<Props, {}, "">;
+type Article = ReturnType<typeof Article>;
+export default Article;

package/dist/components/metadata/opengraph/book.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">import { toISODateString } from '../../../utils.js';
+let { data } = $props();
+</script>
+
+{#if data.opengraph?.book?.author}
+	<meta property="book:author" content={data.opengraph.book.author} />
+{/if}
+
+{#if data.opengraph?.book?.isbn}
+	<meta property="book:isbn" content={data.opengraph.book.isbn} />
+{/if}
+
+{#if data.opengraph?.book?.release_date}
+	<meta property="book:release_date" content={toISODateString(data.opengraph.book.release_date)} />
+{/if}
+
+{#if Array.isArray(data.opengraph?.book?.tags)}
+	{@const _tags = data.opengraph.book.tags}
+	{#each _tags as tag (tag)}
+		<meta property="book:tag" content={tag} />
+	{/each}
+{/if}

package/dist/components/metadata/opengraph/book.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { SEOWebPage } from '../../../types.js';
+interface Props {
+    data: SEOWebPage;
+}
+declare const Book: import("svelte").Component<Props, {}, "">;
+type Book = ReturnType<typeof Book>;
+export default Book;

package/dist/components/metadata/opengraph/business.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">let { data } = $props();
+export {};
+</script>
+
+{#if data.opengraph?.business?.street_address}
+	<meta
+		property="business:contact_data:street_address"
+		content={data.opengraph.business.street_address}
+	/>
+{/if}
+
+{#if data.opengraph?.business?.city}
+	<meta property="business:contact_data:locality" content={data.opengraph.business.city} />
+{/if}
+
+{#if data.opengraph?.business?.state}
+	<meta property="business:contact_data:region" content={data.opengraph.business.state} />
+{/if}
+
+{#if data.opengraph?.business?.postal_code}
+	<meta
+		property="business:contact_data:postal_code"
+		content={data.opengraph.business.postal_code.toString()}
+	/>
+{/if}
+
+{#if data.opengraph?.business?.country}
+	<meta property="business:contact_data:country_name" content={data.opengraph.business.country} />
+{/if}

package/dist/components/metadata/opengraph/business.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { SEOWebPage } from '../../../types.js';
+interface Props {
+    data: SEOWebPage;
+}
+declare const Business: import("svelte").Component<Props, {}, "">;
+type Business = ReturnType<typeof Business>;
+export default Business;

package/dist/components/metadata/opengraph/index.d.ts

@@ -0,0 +1 @@
+export { default as OpenGraph } from './OpenGraph.svelte';

package/dist/components/metadata/opengraph/index.js

@@ -0,0 +1 @@
+export { default as OpenGraph } from './OpenGraph.svelte';

package/dist/components/metadata/opengraph/music-album.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">import { toISODateString } from '../../../utils.js';
+let { data } = $props();
+</script>
+
+{#if data.opengraph?.album?.url}
+	<meta property="og:audio" content={data.opengraph.album.url} />
+{/if}
+
+{#if data.opengraph?.album?.release_date}
+	<meta
+		property="music:release_date"
+		content={toISODateString(data.opengraph.album.release_date)}
+	/>
+{/if}
+
+{#if Array.isArray(data.opengraph?.album?.musicians)}
+	{#each data.opengraph.album.musicians as musician (musician)}
+		<meta property="music:musician" content={musician.url} />
+	{/each}
+{/if}
+
+{#if Array.isArray(data.opengraph?.album?.songs)}
+	{#each data.opengraph.album.songs as song (song)}
+		<meta property="music:song" content={song.url} />
+	{/each}
+{/if}
+
+{#if data.opengraph?.album?.disc}
+	<meta property="music:album:disc" content={data.opengraph.album.disc.toString()} />
+{/if}
+
+{#if data.opengraph?.album?.track}
+	<meta property="music:album:track" content={data.opengraph.album.track.toString()} />
+{/if}

package/dist/components/metadata/opengraph/music-album.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { SEOWebPage } from '../../../types.js';
+interface Props {
+    data: SEOWebPage;
+}
+declare const MusicAlbum: import("svelte").Component<Props, {}, "">;
+type MusicAlbum = ReturnType<typeof MusicAlbum>;
+export default MusicAlbum;

package/dist/components/metadata/opengraph/music-playlist.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">let { data } = $props();
+export {};
+</script>
+
+{#if data.opengraph?.playlist?.song}
+	<meta property="music:song" content={data.opengraph.playlist.song.url} />
+{/if}
+
+{#if data.opengraph?.playlist?.song?.disc}
+	<meta property="music:song:disc" content={data.opengraph.playlist.song.disc.toString()} />
+{/if}
+
+{#if data.opengraph?.playlist?.song?.track}
+	<meta property="music:song:track" content={data.opengraph.playlist.song.track.toString()} />
+{/if}
+
+{#if data.opengraph?.playlist?.creator}
+	<meta property="music:creator" content={data.opengraph.playlist.creator.url} />
+{/if}

package/dist/components/metadata/opengraph/music-playlist.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { SEOWebPage } from '../../../types.js';
+interface Props {
+    data: SEOWebPage;
+}
+declare const MusicPlaylist: import("svelte").Component<Props, {}, "">;
+type MusicPlaylist = ReturnType<typeof MusicPlaylist>;
+export default MusicPlaylist;

package/dist/components/metadata/opengraph/music-radio-station.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">let { data } = $props();
+export {};
+</script>
+
+{#if data.opengraph?.radioStation?.creator}
+	<meta property="music:creator" content={data.opengraph.radioStation.creator.url} />
+{/if}

package/dist/components/metadata/opengraph/music-radio-station.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { SEOWebPage } from '../../../types.js';
+interface Props {
+    data: SEOWebPage;
+}
+declare const MusicRadioStation: import("svelte").Component<Props, {}, "">;
+type MusicRadioStation = ReturnType<typeof MusicRadioStation>;
+export default MusicRadioStation;

package/dist/components/metadata/opengraph/music-song.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">let { data } = $props();
+export {};
+</script>
+
+{#if data.opengraph?.song?.url}
+	<meta property="og:audio" content={data.opengraph.song.url} />
+{/if}
+
+{#if data.opengraph?.song?.duration}
+	<meta property="music:duration" content={data.opengraph.song.duration.toString()} />
+{/if}
+
+{#if Array.isArray(data.opengraph?.song?.album)}
+	{#each data.opengraph.song.album as album (album)}
+		<meta property="music:album" content={album.url} />
+	{/each}
+{/if}
+
+{#if data.opengraph?.song?.disc}
+	<meta property="music:album:disc" content={data.opengraph.song.disc.toString()} />
+{/if}
+
+{#if data.opengraph?.song?.track}
+	<meta property="music:album:track" content={data.opengraph.song.track.toString()} />
+{/if}
+
+{#if Array.isArray(data.opengraph?.song?.musician)}
+	{#each data.opengraph.song.musician as musician (musician)}
+		<meta property="music:musician" content={musician.url} />
+	{/each}
+{/if}

package/dist/components/metadata/opengraph/music-song.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { SEOWebPage } from '../../../types.js';
+interface Props {
+    data: SEOWebPage;
+}
+declare const MusicSong: import("svelte").Component<Props, {}, "">;
+type MusicSong = ReturnType<typeof MusicSong>;
+export default MusicSong;

package/dist/components/metadata/opengraph/product.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">let { data } = $props();
+export {};
+</script>
+
+{#if data.opengraph?.product?.plural_title}
+	<meta property="product:plural_title" content={data.opengraph.product.plural_title} />
+{/if}
+
+{#if data.opengraph?.product?.price}
+	<meta property="product:price.amount" content={data.opengraph.product.price.toString()} />
+{/if}
+
+{#if data.opengraph?.product?.currency}
+	<meta property="product:price.currency" content={data.opengraph.product.currency} />
+{/if}

package/dist/components/metadata/opengraph/product.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { SEOWebPage } from '../../../types.js';
+interface Props {
+    data: SEOWebPage;
+}
+declare const Product: import("svelte").Component<Props, {}, "">;
+type Product = ReturnType<typeof Product>;
+export default Product;

package/dist/components/metadata/opengraph/profile.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">let { data } = $props();
+export {};
+</script>
+
+{#if data.opengraph?.profile?.first_name}
+	<meta property="profile:first_name" content={data.opengraph.profile.first_name} />
+{/if}
+
+{#if data.opengraph?.profile?.last_name}
+	<meta property="profile:last_name" content={data.opengraph.profile.last_name} />
+{/if}
+
+{#if data.opengraph?.profile?.username}
+	<meta property="profile:username" content={data.opengraph.profile.username} />
+{/if}
+
+{#if data.opengraph?.profile?.gender}
+	<meta property="profile:gender" content={data.opengraph.profile.gender} />
+{/if}

package/dist/components/metadata/opengraph/profile.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { SEOWebPage } from '../../../types.js';
+interface Props {
+    data: SEOWebPage;
+}
+declare const Profile: import("svelte").Component<Props, {}, "">;
+type Profile = ReturnType<typeof Profile>;
+export default Profile;