### Install SvelteKit SEO Component

Source: https://github.com/thedahoom/sveltekit-seo/blob/main/README.md

Installs the 'sk-seo' package as a development dependency using npm. This command adds the necessary library to your SvelteKit project for SEO automation.

```bash
npm i -D sk-seo
```

--------------------------------

### SvelteKit SEO Automatic URL Meta Tag Generation

Source: https://github.com/thedahoom/sveltekit-seo/blob/main/README.md

Demonstrates how the SvelteKit SEO component automatically populates meta tags like `og:url` using SvelteKit's `$page.url` store, simplifying SEO setup by reducing manual input for common page-specific data.

```Svelte
<meta property="og:url" content="{$page.url}">
```

--------------------------------

### Integrate SEO Component into SvelteKit Layout

Source: https://github.com/thedahoom/sveltekit-seo/blob/main/README.md

Imports and renders the 'Seo' component in the main SvelteKit layout file (`+layout.svelte`). This setup ensures that the SEO component is active across all pages, processing metadata provided by load functions.

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

<Seo />
```

--------------------------------

### Configure SvelteKit SEO Load Function (JSDoc)

Source: https://github.com/thedahoom/sveltekit-seo/wiki/v0.5--types

This example illustrates how to set SEO properties (title, description, keywords) in a SvelteKit `load` function using JSDoc. It defines the `SEOProps` type via JSDoc for similar benefits to TypeScript in a JavaScript environment.

```JavaScript
/**
 * @typedef {import('sk-seo').SEOProps} SEOProps
 * @returns {Promise<SEOProps>}
 */
export const load = async ({ url }) => {
    return {
        title: 'Dahoom - Contact',
        description: 'The official website of Dahoom',
        keywords: 'dahoom, official, website',
    }
}
```

--------------------------------

### Combine SvelteKit Stores and Manual Input for SEO Props

Source: https://github.com/thedahoom/sveltekit-seo/blob/main/README.md

Demonstrates how to combine data from SvelteKit stores (e.g., `$page.data`) with manually provided props for the `Seo` component. This approach offers flexibility, allowing SEO attributes to be sourced dynamically from stores or explicitly defined, with a fallback for missing store data.

```svelte
<!-- +layout.svelte -->
<script>
  import Seo from 'sk-seo';
  import { page } from '$app/stores';
</script>

<Seo 
  title={$page.data.customTitle ?? ''} <!-- CUSTOM NAME: title now points to $page.data.customTitle store -->
  description="Where to contact Dahoom AlShaya, whether for business needs or general inquiries"
  keywords="Contact, business, inquiries"
/>
```

--------------------------------

### Configuring SvelteKit Prerendering Base URL

Source: https://github.com/thedahoom/sveltekit-seo/blob/main/README.md

Provides the necessary configuration for `svelte.config.js` when using `adapter-static` for prerendering. Setting the `origin` in the `prerender` options ensures that `$page.url` correctly reflects the base URL instead of a default local address during static site generation.

```JavaScript
// svelte.config.js
const config = {
  kit: {
    prerender: {
      origin: 'https://mossberg.dev' // Replace with your URL.
    }
  }
}
```

--------------------------------

### Seo Component Standard Parameters

Source: https://github.com/thedahoom/sveltekit-seo/blob/main/README.md

Defines the standard parameters (props) accepted by the `Seo` Svelte component. These parameters allow direct configuration of common SEO metadata like page title, description, keywords, and crawler indexing behavior.

```APIDOC
Seo Component Parameters:

- `title`
  - Description: The title of the page.
  - Type: `string`
  - Default: `~` (Determined by SvelteKit's default title or other SEO logic)

- `description`
  - Description: The description of the page.
  - Type: `string`
  - Default: `~` (Determined by SvelteKit's default description or other SEO logic)

- `keywords`
  - Description: The keywords to be used for search engine optimization or search.
  - Type: `string`
  - Default: `~` (Determined by SvelteKit's default keywords or other SEO logic)

- `index`
  - Description: Whether or not crawlers should crawl this page.
  - Type: `boolean`
  - Default: `true`
```

--------------------------------

### SvelteKit SEO Component Configuration Parameters

Source: https://github.com/thedahoom/sveltekit-seo/blob/main/README.md

Defines the configurable parameters for the SvelteKit SEO component, including options for site metadata, social media tags (Twitter, OpenGraph), and Schema.org integration. These parameters allow customization of SEO behavior and content.

```APIDOC
SvelteKit SEO Component Parameters:

- siteName:
    Description: The name of the site
    Type: string
    Default: ~

- canonical:
    Description: Current URL of the page. For resolving duplicate pages with SEO
    Type: string
    Default: ~

- twitter:
    Description: Indicates whether Twitter meta tags should be generated
    Type: boolean
    Default: true

- openGraph:
    Description: Indicates whether og / OpenGraph meta tags should be generated
    Type: boolean
    Default: true

- schemaOrg:
    Description: Indicates whether jsonLd/SchemaOrg meta script should be generated
    Type: boolean
    Default: false

- schemaType:
    Description: The type of jsonld schema (Person, Organisation, Create)
    Type: string/Array
    Default: ['Person', 'Organisation']

- jsonld:
    Description: Appends contents to jsonld script (used by search engines for names, contact information, etc)
    Type: object {}
    Default: ~

- imageURL:
    Description: The URL of the image to be used for preview (twitter, discord image preview when your url is shared)
    Type: string
    Default: ~

- logo:
    Description: The logo image URL for SchemaOrg
    Type: string
    Default: ~

- author:
    Description: Represents the author of the page
    Type: string
    Default: ~

- socials:
    Description: An array of social media links for SchemaOrg
    Type: Array
    Default: ~

- name:
    Description: The name to be used for SchemaOrg
    Type: string
    Default: ~

- type:
    Description: The type of the page (website, article, etc)
    Type: string
    Default: website
```

--------------------------------

### Extending SvelteKit SEO with Custom Meta Tags

Source: https://github.com/thedahoom/sveltekit-seo/blob/main/README.md

Illustrates how to add custom or unusual meta tags, such as Google site verification, by nesting them within the `<Seo>` component. This allows for flexible extension of the component's functionality beyond its predefined parameters.

```Svelte
<Seo title="abc" description="def">
  <meta name="google-site-verification" content="abcd123">
</Seo>
```

--------------------------------

### Define Global SEO Data in SvelteKit Layout Load Function

Source: https://github.com/thedahoom/sveltekit-seo/blob/main/README.md

Exports a `load` function in `+layout.js` to provide global SEO metadata (title, description, keywords) to the `Seo` component. This function runs on both server and client, making data available to the layout and its children. It can optionally use `url.origin` for dynamic asset paths.

```js
// +layout.js
export const load = async ({ url }) => {
    // OPTIONAL: You can use url.origin to get the base URL, 
    // or even url.href to get the full URL.
    // (For example, to get URLs of images in your /static folder), like this:
    // imageURL: `${url.origin}/image.jpg`
    return {
        title: 'Dahoom - Official',
        description: 'The official website of Dahoom',
        keywords: 'dahoom, official, website'
        // ... and more
    }
}
```

--------------------------------

### Configure SvelteKit SEO Load Function (TypeScript)

Source: https://github.com/thedahoom/sveltekit-seo/wiki/v0.5--types

This snippet shows how to define SEO properties (title, description, keywords) within a SvelteKit `load` function using TypeScript. It demonstrates importing `SeoProps` for type checking and improved developer experience.

```TypeScript
import type { SeoProps } from 'sk-seo';

export const load = async ({ url }): Promise<SeoProps> => {
    return {
        title: 'Dahoom - Contact',
        description: 'The official website of Dahoom',
        keywords: 'dahoom, official, website'
    };
};
```

--------------------------------

### Set Page-Specific SEO Using Component Props (Not Recommended)

Source: https://github.com/thedahoom/sveltekit-seo/blob/main/README.md

Directly sets SEO metadata via props on the `Seo` component within a specific page (`+page.svelte`). While functional for single-page applications, this method is generally not recommended for multi-page sites due to potential duplication of meta tags, which can negatively impact SEO.

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

<Seo 
  title="Contact"
  description="Where to contact Dahoom AlShaya, whether for business needs or general inquiries"
  keywords="Contact, business, inquiries"
/>
```

--------------------------------

### Override Global SEO Data in SvelteKit Page Load Function

Source: https://github.com/thedahoom/sveltekit-seo/blob/main/README.md

Exports a `load` function in `+page.js` to override global SEO metadata for specific pages. This allows page-specific titles, descriptions, and keywords to take precedence over those defined in the `+layout.js` when visiting that particular page.

```js
// contacts/+page.js
export const load = async ({ url }) => {
    // Title, description and keywords set here will replace the title set in +layout.js while visiting /contacts
    return {
        title: 'Contacts', 
        description: 'Where to contact Dahoom AlShaya, whether for business needs or general inquiries',
        keywords: 'Contact, business, inquiries'
    }
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.