Frequently Asked Questions
How do I add SEO to my SvelteKit site?
Install Svead and use the Head component:
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:
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:
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:
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:
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 postsArticle/NewsArticle- ArticlesWebPage- General pagesProduct- ProductsRecipe- RecipesEvent- EventsFAQPage- FAQ pagesHowTo- TutorialsVideoObject- VideosCourse- Educational content
How do I add Twitter Card metadata?
The Head component includes Twitter Cards automatically:
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:
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:
- Google Rich Results Test
- Schema.org Validator
- Browser DevTools: Inspect
<script type="application/ld+json">tags
Do I need both Head and SchemaOrg components?
No, they’re independent:
- Use
Headfor meta tags (required for basic SEO) - Use
SchemaOrgfor rich snippets (optional, but recommended) - Use both for complete SEO coverage