Real-World Patterns

1// lib/seo/default.ts
2import type { SchemaOrgProps, SeoConfig } from 'svead';
3
4export const default_seo_config: SeoConfig = {
5	title: 'Default Page Title',
6	description: 'Your site description',
7	url: 'https://example.com',
8	website: 'https://example.com',
9	open_graph_image: 'https://example.com/og-image.jpg',
10	language: 'en',
11	author_name: 'Your Name',
12	twitter_handle: '@youhandle',
13	site_name: 'Your Site Name',
14};
15
16export const default_schema_org_config: SchemaOrgProps['schema'] = {
17	'@type': 'WebSite',
18	'@id': 'https://example.com',
19	url: 'https://example.com',
20	name: 'Your Site Name',
21	description: 'Your site description',
22	publisher: {
23		'@type': 'Person',
24		name: 'Your Name',
25		url: 'https://example.com',
26	},
27};
28
29// Helper to create page-specific configs
30export const create_seo_config = (
31	options: Partial<SeoConfig> & { slug?: string },
32): SeoConfig => ({
33	...default_seo_config,
34	...options,
35	title: options.title
36		? `${options.title} - Your Site Name`
37		: default_seo_config.title,
38	url: options.slug
39		? `https://example.com/${options.slug}`
40		: default_seo_config.url,
41});
42
43// Helper to create schema configs
44export const create_schema_org_config = (
45	options: Partial<SchemaOrgProps['schema']>,
46): SchemaOrgProps['schema'] => ({
47	...default_schema_org_config,
48	...options,
49});

1<script lang="ts">
2	import { Head } from 'svead';
3	import { create_seo_config } from '$lib/seo/default';
4
5	const seo_config = create_seo_config({
6		title: 'About',
7		description: 'About our site',
8		slug: 'about',
9	});
10</script>
11
12<Head {seo_config} />

1// lib/info.ts
2export const name = 'Your Name';
3export const website = 'https://example.com';
4export const description = 'Your site description';
5export const language = 'en';
6
7// Use everywhere
8import { name, website, description } from '$lib/info';

1const person = {
2	'@type': 'Person',
3	name: 'Your Name',
4	url: 'https://example.com',
5	sameAs: [
6		'https://twitter.com/youhandle',
7		'https://github.com/yourusername',
8		'https://linkedin.com/in/yourusername',
9	],
10};
11
12// Use in multiple schemas
13const article_schema = {
14	'@type': 'Article',
15	author: person,
16};
17
18const website_schema = {
19	'@type': 'WebSite',
20	publisher: person,
21};

1// Generate dynamic OG images
2const og_image_url = (title: string, site: string) => {
3	return `https://og.example.com/api/og?title=${encodeURIComponent(title)}&site=${encodeURIComponent(site)}`;
4};
5
6const seo_config: SeoConfig = {
7	title: 'My Page',
8	description: 'Description',
9	url: 'https://example.com',
10	open_graph_image: og_image_url('My Page', 'example.com'),
11};