Skip to content
svead

Frequently Asked Questions

How do I add SEO to my SvelteKit site?

Install Svead and use the Head component:

Svelte
1<script lang="ts">
2	import { Head } from 'svead';
3
4	const seo_config = {
5		title: 'My Page',
6		description: 'Page description',
7		url: 'https://example.com',
8	};
9</script>
10
11<Head {seo_config} />

How do I add OpenGraph tags for social media?

The Head component automatically includes OpenGraph tags. Add an image:

TypeScript
1const seo_config = {
2	title: 'My Page',
3	description: 'Page description',
4	url: 'https://example.com',
5	open_graph_image: 'https://example.com/og-image.jpg',
6	open_graph_image_alt: 'Alt text for image',
7};

How do I implement rich snippets in SvelteKit?

Use the SchemaOrg component with appropriate schema types:

Svelte
1<script lang="ts">
2	import { SchemaOrg, type SchemaOrgProps } from 'svead';
3
4	const schema: SchemaOrgProps['schema'] = {
5		'@type': 'BlogPosting',
6		headline: 'Article Title',
7		datePublished: '2023-08-22T10:00:00Z',
8		author: {
9			'@type': 'Person',
10			name: 'Author Name',
11		},
12	};
13</script>
14
15<SchemaOrg {schema} />

Can I use multiple schema types on one page?

Yes! Use @graph to combine multiple schemas:

TypeScript
1const schema_config = {
2	'@context': 'https://schema.org',
3	'@graph': [
4		{ '@type': 'BlogPosting', headline: '...' },
5		{ '@type': 'BreadcrumbList', itemListElement: [...] },
6	],
7};

Or use multiple SchemaOrg components.

How do I add metadata to blog posts?

Use both Head and SchemaOrg components:

Svelte
1<script lang="ts">
2	import { Head, SchemaOrg } from 'svead';
3
4	const seo_config = {
5		title: 'Blog Post Title',
6		description: 'Post description',
7		url: 'https://example.com/blog/post',
8		author_name: 'Author Name',
9	};
10
11	const schema = {
12		'@type': 'BlogPosting',
13		headline: seo_config.title,
14		datePublished: '2023-08-22T10:00:00Z',
15	};
16</script>
17
18<Head {seo_config} />
19<SchemaOrg {schema} />

What Schema.org types are supported?

All 800+ Schema.org types are supported via schema-dts. Common ones:

  • BlogPosting - Blog posts
  • Article / NewsArticle - Articles
  • WebPage - General pages
  • Product - Products
  • Recipe - Recipes
  • Event - Events
  • FAQPage - FAQ pages
  • HowTo - Tutorials
  • VideoObject - Videos
  • Course - Educational content

How do I add Twitter Card metadata?

The Head component includes Twitter Cards automatically:

TypeScript
1const seo_config = {
2	title: 'My Page',
3	description: 'Description',
4	url: 'https://example.com',
5	open_graph_image: 'https://example.com/image.jpg',
6	twitter_handle: '@yourusername',
7	twitter_card_type: 'summary_large_image', // Default
8};

How do I set the canonical URL?

The url property in SeoConfig sets the canonical URL:

TypeScript
1const seo_config = {
2	url: 'https://example.com/canonical-url', // This becomes canonical
3	title: 'Page Title',
4	description: 'Description',
5};

Can I use Svead with SvelteKit SSR?

Yes! Svead works perfectly with SvelteKit SSR. The Head component uses <svelte:head> which renders on the server.

How do I validate my structured data?

Use these tools:

Do I need both Head and SchemaOrg components?

No, they’re independent:

  • Use Head for meta tags (required for basic SEO)
  • Use SchemaOrg for rich snippets (optional, but recommended)
  • Use both for complete SEO coverage
All documentation