Common Schema Types
WebPage - Simple Page
For general web pages with breadcrumbs:
1<script lang="ts">
2 import { page } from '$app/state';
3 import {
4 Head,
5 SchemaOrg,
6 type SeoConfig,
7 type SchemaOrgProps,
8 } from 'svead';
9
10 const seo_config: SeoConfig = {
11 url: page.url.href,
12 website: 'https://example.com',
13 title: 'Sample Web Page',
14 description: 'This is an example of a simple web page.',
15 open_graph_image: 'https://example.com/images/page-image.jpg',
16 language: 'en',
17 twitter_handle: '@example',
18 site_name: 'Example Site',
19 };
20
21 const schema_org: SchemaOrgProps['schema'] = {
22 '@type': 'WebPage',
23 '@id': page.url.href,
24 url: page.url.href,
25 name: seo_config.title,
26 description: seo_config.description,
27 inLanguage: seo_config.language,
28 isPartOf: {
29 '@type': 'WebSite',
30 '@id': seo_config.website,
31 },
32 primaryImageOfPage: {
33 '@type': 'ImageObject',
34 url: seo_config.open_graph_image,
35 },
36 breadcrumb: {
37 '@type': 'BreadcrumbList',
38 '@id': `${page.url.href}#breadcrumb`,
39 itemListElement: [
40 {
41 '@type': 'ListItem',
42 position: 1,
43 name: 'Home',
44 item: seo_config.website,
45 },
46 {
47 '@type': 'ListItem',
48 position: 2,
49 name: seo_config.title,
50 item: page.url.href,
51 },
52 ],
53 },
54 };
55</script>
56
57<Head {seo_config} />
58<SchemaOrg schema={schema_org} />BlogPosting - Blog Posts
For blog posts with full metadata:
1<script lang="ts">
2 import { page } from '$app/state';
3 import {
4 Head,
5 SchemaOrg,
6 type SeoConfig,
7 type SchemaOrgProps,
8 } from 'svead';
9
10 const seo_config: SeoConfig = {
11 url: page.url.href,
12 website: 'https://example.com',
13 title: 'My Blog Post',
14 description: 'This is an example blog post.',
15 open_graph_image: 'https://example.com/images/blog-image.jpg',
16 author_name: 'John Doe',
17 language: 'en',
18 twitter_handle: '@johndoe',
19 site_name: 'Example Blog',
20 };
21
22 const schema_org: SchemaOrgProps['schema'] = {
23 '@type': 'BlogPosting',
24 '@id': page.url.href,
25 url: page.url.href,
26 headline: seo_config.title,
27 description: seo_config.description,
28 image: seo_config.open_graph_image,
29 datePublished: '2023-08-22T10:00:00Z',
30 dateModified: '2023-08-22T10:00:00Z',
31 author: {
32 '@type': 'Person',
33 name: seo_config.author_name,
34 url: `${seo_config.website}/author/john-doe`,
35 },
36 publisher: {
37 '@type': 'Organization',
38 name: seo_config.site_name,
39 url: seo_config.website,
40 logo: {
41 '@type': 'ImageObject',
42 url: `${seo_config.website}/logo.png`,
43 },
44 },
45 mainEntityOfPage: {
46 '@type': 'WebPage',
47 '@id': page.url.href,
48 },
49 inLanguage: seo_config.language,
50 keywords: ['SvelteKit', 'SEO', 'Blog'],
51 };
52</script>
53
54<Head {seo_config} />
55<SchemaOrg schema={schema_org} />NewsArticle - News Content
For news articles with sections:
1<script lang="ts">
2 import { page } from '$app/state';
3 import {
4 Head,
5 SchemaOrg,
6 type SeoConfig,
7 type SchemaOrgProps,
8 } from 'svead';
9
10 const seo_config: SeoConfig = {
11 url: page.url.href,
12 website: 'https://example.com',
13 title: 'Breaking News: Major Event',
14 description: 'Detailed coverage and analysis of a major event.',
15 open_graph_image: 'https://example.com/images/news-image.jpg',
16 author_name: 'Jane Smith',
17 language: 'en',
18 twitter_handle: '@examplenews',
19 site_name: 'Example News',
20 };
21
22 const schema_org: SchemaOrgProps['schema'] = {
23 '@type': 'NewsArticle',
24 '@id': page.url.href,
25 headline: seo_config.title,
26 description: seo_config.description,
27 image: seo_config.open_graph_image,
28 datePublished: '2023-06-02T09:30:00Z',
29 dateModified: '2023-06-02T11:45:00Z',
30 author: {
31 '@type': 'Person',
32 name: seo_config.author_name,
33 url: `${seo_config.website}/author/jane-smith`,
34 },
35 publisher: {
36 '@type': 'Organization',
37 name: seo_config.site_name,
38 url: seo_config.website,
39 logo: {
40 '@type': 'ImageObject',
41 url: `${seo_config.website}/logo.png`,
42 },
43 },
44 mainEntityOfPage: {
45 '@type': 'WebPage',
46 '@id': page.url.href,
47 },
48 articleSection: ['News', 'Breaking News'],
49 inLanguage: seo_config.language,
50 };
51</script>
52
53<Head {seo_config} />
54<SchemaOrg schema={schema_org} />Article - General Articles
For general article content (parent type of BlogPosting and NewsArticle):
1<script lang="ts">
2 import { page } from '$app/state';
3 import {
4 Head,
5 SchemaOrg,
6 type SeoConfig,
7 type SchemaOrgProps,
8 } from 'svead';
9
10 const seo_config: SeoConfig = {
11 url: page.url.href,
12 website: 'https://example.com',
13 title: 'Understanding Schema.org',
14 description: 'A comprehensive guide to Schema.org markup',
15 open_graph_image: 'https://example.com/images/article-image.jpg',
16 author_name: 'Jane Doe',
17 language: 'en',
18 site_name: 'Example Site',
19 };
20
21 const article_schema: SchemaOrgProps['schema'] = {
22 '@type': 'Article',
23 '@id': page.url.href,
24 headline: seo_config.title,
25 description: seo_config.description,
26 image: seo_config.open_graph_image,
27 datePublished: '2023-08-22T10:00:00Z',
28 dateModified: '2023-08-23T14:30:00Z',
29 author: {
30 '@type': 'Person',
31 name: seo_config.author_name,
32 url: `${seo_config.website}/author/jane-doe`,
33 },
34 publisher: {
35 '@type': 'Organization',
36 name: seo_config.site_name,
37 url: seo_config.website,
38 logo: {
39 '@type': 'ImageObject',
40 url: `${seo_config.website}/logo.png`,
41 },
42 },
43 mainEntityOfPage: {
44 '@type': 'WebPage',
45 '@id': page.url.href,
46 },
47 articleSection: ['Technology', 'Web Development'],
48 inLanguage: seo_config.language,
49 };
50</script>
51
52<Head {seo_config} />
53<SchemaOrg schema={article_schema} />BreadcrumbList - Standalone
Create breadcrumbs as a separate schema:
1<script lang="ts">
2 import { page } from '$app/state';
3 import { SchemaOrg, type SchemaOrgProps } from 'svead';
4
5 const breadcrumb_schema: SchemaOrgProps['schema'] = {
6 '@type': 'BreadcrumbList',
7 '@id': `${page.url.href}#breadcrumb`,
8 itemListElement: [
9 {
10 '@type': 'ListItem',
11 position: 1,
12 name: 'Home',
13 item: 'https://example.com',
14 },
15 {
16 '@type': 'ListItem',
17 position: 2,
18 name: 'Blog',
19 item: 'https://example.com/blog',
20 },
21 {
22 '@type': 'ListItem',
23 position: 3,
24 name: 'Current Page',
25 item: page.url.href,
26 },
27 ],
28 };
29</script>
30
31<SchemaOrg schema={breadcrumb_schema} />Multi-level breadcrumbs (for deep page hierarchies):
1<script lang="ts">
2 const multi_level_breadcrumbs: SchemaOrgProps['schema'] = {
3 '@type': 'BreadcrumbList',
4 '@id': `${page.url.href}#breadcrumb`,
5 itemListElement: [
6 {
7 '@type': 'ListItem',
8 position: 1,
9 name: 'Home',
10 item: 'https://example.com',
11 },
12 {
13 '@type': 'ListItem',
14 position: 2,
15 name: 'Products',
16 item: 'https://example.com/products',
17 },
18 {
19 '@type': 'ListItem',
20 position: 3,
21 name: 'Electronics',
22 item: 'https://example.com/products/electronics',
23 },
24 {
25 '@type': 'ListItem',
26 position: 4,
27 name: 'Laptops',
28 item: 'https://example.com/products/electronics/laptops',
29 },
30 {
31 '@type': 'ListItem',
32 position: 5,
33 name: 'Gaming Laptops',
34 item: page.url.href,
35 },
36 ],
37 };
38</script>HTML breadcrumb navigation (combine with schema for best results):
1<script lang="ts">
2 import { page } from '$app/state';
3 import { SchemaOrg, type SchemaOrgProps } from 'svead';
4
5 const breadcrumbs = [
6 { name: 'Home', url: 'https://example.com' },
7 { name: 'Blog', url: 'https://example.com/blog' },
8 { name: 'Current Page', url: page.url.href },
9 ];
10
11 const breadcrumb_schema: SchemaOrgProps['schema'] = {
12 '@type': 'BreadcrumbList',
13 '@id': `${page.url.href}#breadcrumb`,
14 itemListElement: breadcrumbs.map((crumb, index) => ({
15 '@type': 'ListItem',
16 position: index + 1,
17 name: crumb.name,
18 item: crumb.url,
19 })),
20 };
21</script>
22
23<!-- Accessible HTML breadcrumbs -->
24<nav aria-label="Breadcrumb">
25 <ol class="breadcrumb">
26 {#each breadcrumbs as crumb, index}
27 <li>
28 {#if index < breadcrumbs.length - 1}
29 <a href={crumb.url}>{crumb.name}</a>
30 {:else}
31 <span aria-current="page">{crumb.name}</span>
32 {/if}
33 </li>
34 {/each}
35 </ol>
36</nav>
37
38<!-- Schema markup -->
39<SchemaOrg schema={breadcrumb_schema} />