sk-seo

The recommended way to use sk-seo in a multi-page application is to place the <Seo /> component once in your root +layout.svelte and provide SEO data through SvelteKit load functions.

This approach allows you to define global SEO defaults in +layout.js and override them on specific pages using +page.js (or +page.server.js). The component automatically picks up data from the $page.data store.

<!-- +layout.svelte -->
<script>
  import Seo from 'sk-seo';
</script>

<Seo />

// +layout.js
export const load = async ({ url }) => {
    return {
        title: 'Dahoom - Official',
        description: 'The official website of Dahoom',
        keywords: 'dahoom, official, website'
    }
}

// contacts/+page.js
export const load = async ({ url }) => {
    // This overrides the title/description/keywords from +layout.js for the /contacts route
    return {
        title: 'Contacts', 
        description: 'Where to contact Dahoom AlShaya, whether for business needs or general inquiries',
        keywords: 'Contact, business, inquiries',
    }
}

To enable Schema.org structured data, set the schemaOrg prop to true. The component automatically constructs a JSON-LD script using the following logic:

1. Context: Always uses https://schema.org.
2. Type: Uses the provided schemaType array. If the array has multiple values, it uses the array; otherwise, it uses the first element.
3. Automatic Fields: It automatically includes name, url (current page origin), image (from imageURL), and a logo object (using the logo prop).
4. Socials: The socials array is mapped to the sameAs property.
5. Customization: Any properties provided in the jsonld prop are merged into the final object, allowing you to override or extend the default schema.

Note: The script is only rendered if schemaOrg is true AND at least one of socials, logo, or name is provided.

<SEO 
    schemaOrg={true} 
    name="Acme Corp" 
    schemaType={['Organization']} 
    jsonld={{ @context: 'https://schema.org', contactPoint: { telephone: '123-456' } }}
/>

These optional parameters allow for deeper configuration of social media tags and Schema.org structured data.

| Parameter | Description | Type | Default |
| ------------- | ------------- | ------- | ------- |
| `siteName`| The name of the site | string | ~ |
| `canonical`| Current URL of the page. For resolving duplicate pages with SEO | string | ~ |
| `twitter`| Indicates whether Twitter meta tags should be generated | boolean | true |
| `openGraph`| Indicates whether og / OpenGraph meta tags should be generated | boolean | true |
| `schemaOrg`| Indicates whether jsonLd/SchemaOrg meta script should be generated | boolean | false |
| `schemaType`| The type of jsonld schema (Person, Organisation, Create) @default Person,Organisation | string/Array | ['Person', 'Organisation'] |
| `jsonld`| Appends contents to jsonld script | object `{}` | ~ |
| `imageURL`| The URL of the image to be used for preview (twitter, discord) | string | ~ |
| `logo`| The logo image URL for SchemaOrg | string | ~ |
| `author`| Represents the author of the page | string | ~ |
| `socials`| An array of social media links for SchemaOrg | Array | ~ |
| `name`| The name to be used for SchemaOrg | string | ~ |
| `type`| The type of the page (website, article, etc) | string | website |

The SEO component accepts the following props to control meta tags and structured data. If these props are not provided, the component attempts to use values from $page.data.

// Core Meta Tags
export let title = "";             // Page title
export let description = "";      // Meta description
export let keywords = "";         // Meta keywords
export let canonical = "";        // Canonical URL (defaults to current URL if empty)
export let author = "";           // Meta author

// Branding & Identity
export let siteName = "";         // OpenGraph site name
export let name = "";             // Schema.org name
export let type = "website";      // OpenGraph type (e.g., 'website', 'article')
export let logo = "";             // URL for logo (used in OG and Schema)
export let imageURL = "";          // URL for preview image (used in OG and Twitter)

// Feature Toggles
export let index = true;           // Whether to allow search engine indexing (controls robots meta)
export let twitter = true;         // Whether to include Twitter card meta tags
export let openGraph = true;        // Whether to include OpenGraph meta tags
export let schemaOrg = false;      // Whether to include JSON-LD Schema.org script

// Structured Data & Socials
export let schemaType = ['Person', 'Organization']; // Array of Schema types
export let socials = [];           // Array of URLs for 'sameAs' in Schema.org
export let jsonld = {};            // Custom object to merge into the generated JSON-LD