### Basic Meta Tags Setup

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/usage/index.mdx

Use this snippet for a simple setup with only title and description.

```svelte
<script>
  import { MetaTags } from 'svelte-meta-tags';
</script>

<MetaTags title="Example Title" description="Example Description." />
```

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

### Clone Repository and Install Dependencies

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/CONTRIBUTING.md

Clone the Svelte Meta Tags repository and install project dependencies using pnpm. This is the initial setup step after cloning.

```bash
git clone git@github.com:oekazuma/svelte-meta-tags.git
pnpm install
```

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

### Run Development Servers

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/AGENTS.md

Starts development servers for all workspaces. Run from the repository root.

```bash
pnpm dev
```

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

### Install svelte-meta-tags with pnpm

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/installing/index.mdx

Use this command to install svelte-meta-tags as a development dependency using pnpm.

```sh
pnpm add -D svelte-meta-tags
```

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

### Run SvelteKit Development Server

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/CONTRIBUTING.md

Start the SvelteKit development server for the end-to-end testing application. This allows for live development and testing.

```bash
pnpm dev
```

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

### Install Workspace Dependencies

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/AGENTS.md

Installs all dependencies across all workspaces using the pnpm catalog. Run from the repository root.

```bash
pnpm install
```

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

### Install svelte-meta-tags with npm

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/installing/index.mdx

Use this command to install svelte-meta-tags as a development dependency using npm.

```sh
npm install -D svelte-meta-tags
```

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

### Install svelte-meta-tags with Yarn

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/installing/index.mdx

Use this command to install svelte-meta-tags as a development dependency using Yarn.

```sh
yarn add -D svelte-meta-tags
```

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

### Install pnpm

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/CONTRIBUTING.md

Install pnpm globally using npm. This is a prerequisite for managing project dependencies.

```bash
npm i -g pnpm
```

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

### Multiple JSON-LD Examples using Arrays

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/json-ld/json-ld-properties/json-ld-multiple-examples.mdx

Use a JavaScript array to describe multiple JSON-LD data items. Be aware that Safari may log console errors with this approach.

```svelte
<script>
  import { JsonLd } from 'svelte-meta-tags';
</script>

<JsonLd
  schema={[
    {
      '@type': 'BreadcrumbList',
      itemListElement: [
        {
          '@type': 'ListItem',
          position: 1,
          name: 'Books',
          item: 'https://example.com/books'
        },
        {
          '@type': 'ListItem',
          position: 2,
          name: 'Science Fiction',
          item: 'https://example.com/books/sciencefiction'
        },
        {
          '@type': 'ListItem',
          position: 3,
          name: 'Award Winners'
        }
      ]
    },
    {
      '@type': 'NewsArticle',
      mainEntityOfPage: {
        '@type': 'WebPage',
        '@id': 'https://google.com/article'
      },
      headline: 'Article headline',
      image: [
        'https://example.com/photos/1x1/photo.jpg',
        'https://example.com/photos/4x3/photo.jpg',
        'https://example.com/photos/16x9/photo.jpg'
      ],
      datePublished: '2015-02-05T08:00:00+08:00',
      dateModified: '2015-02-05T09:20:00+08:00',
      author: {
        '@type': 'Person',
        name: 'John Doe'
      },
      publisher: {
        '@type': 'Organization',
        name: 'Google',
        logo: {
          '@type': 'ImageObject',
          url: 'https://google.com/logo.jpg'
        }
      }
    }
  ]} 
/>
```

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

### Multiple JSON-LD Examples using @graph

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/json-ld/json-ld-properties/json-ld-multiple-examples.mdx

Use the '@graph' property to include multiple JSON-LD data items. This method avoids potential Safari console errors associated with using arrays.

```svelte
<script>
  import { JsonLd } from 'svelte-meta-tags';
</script>

<JsonLd
  schema={{
    '@graph': [
      {
        '@type': 'BreadcrumbList',
        itemListElement: [
          {
            '@type': 'ListItem',
            position: 1,
            item: {
              '@id': 'https://example.com/articles/1',
              name: 'foo'
            }
          }
        ]
      },
      {
        '@type': 'NewsArticle',
        mainEntityOfPage: {
          '@type': 'WebPage',
          '@id': 'https://google.com/article'
        },
        headline: 'Article headline',
        image: [
          'https://example.com/photos/1x1/photo.jpg',
          'https://example.com/photos/4x3/photo.jpg',
          'https://example.com/photos/16x9/photo.jpg'
        ],
        datePublished: '2015-02-05T08:00:00+08:00',
        dateModified: '2015-02-05T09:20:00+08:00',
        author: {
          '@type': 'Person',
          name: 'John Doe'
        },
        publisher: {
          '@type': 'Organization',
          name: 'Google',
          logo: {
            '@type': 'ImageObject',
            url: 'https://google.com/logo.jpg'
          }
        },
        description: 'A most wonderful article'
      }
    ]
  }}
/>
```

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

### Article Schema Example

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/json-ld/json-ld-properties/article.md

Use the JsonLd component to embed Article schema markup. Ensure all required properties like '@type', 'mainEntityOfPage', 'headline', 'image', 'datePublished', 'dateModified', 'author', and 'publisher' are correctly provided.

```svelte
<script>
  import { JsonLd } from 'svelte-meta-tags';
</script>

<JsonLd
  schema={{
    '@type': 'Article',
    mainEntityOfPage: {
      '@type': 'WebPage',
      '@id': 'https://example.com/article'
    },
    headline: 'Article headline',
    image: [
      'https://example.com/photos/1x1/photo.jpg',
      'https://example.com/photos/4x3/photo.jpg',
      'https://example.com/photos/16x9/photo.jpg'
    ],
    datePublished: '2015-02-05T08:00:00+08:00',
    dateModified: '2015-02-05T09:20:00+08:00',
    author: {
      '@type': 'Person',
      name: 'John Doe'
    },
    publisher: {
      '@type': 'Organization',
      name: 'Google',
      logo: {
        '@type': 'ImageObject',
        url: 'https://example.com/logo.jpg'
      }
    }
  }}
/>
```

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

### SvelteKit Load Functions for Meta Tags

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/AGENTS.md

Example of how to define base and page meta tags within SvelteKit load functions. These functions freeze and namespace the meta tag objects.

```typescript
// +layout.ts
export const load = () => ({ ...defineBaseMetaTags({ ... }) });
// +page.ts
export const load = () => ({ ...definePageMetaTags({ ... }) });
```

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

### Run Svelte 5 End-to-End Tests

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/AGENTS.md

Executes the end-to-end tests for the Svelte 5 integration. This command automatically starts the Vite build and preview server as configured in playwright.config.ts.

```bash
pnpm --filter svelte-5 test
```

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

### Invalid Custom Meta Tag Configurations

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/meta-tags-properties/additional-meta-tags.md

These examples demonstrate invalid configurations where an object contains more than one of `name`, `property`, or `httpEquiv`.

```javascript
additionalMetaTags={
  [
    {
      property: 'dc:creator',
      name: 'dc:creator',
      content: 'Jane Doe'
    },
    {
      property: 'application-name',
      httpEquiv: 'application-name',
      content: 'Svelte-Meta-Tags'
    }
  ]
}
```

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

### Build and Preview SvelteKit App

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/CONTRIBUTING.md

Build the SvelteKit application for production and preview it. Useful for testing the production build locally.

```bash
pnpm build
pnpm preview
```

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

### Build All Workspaces

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/AGENTS.md

Builds all workspaces in the project. Run from the repository root.

```bash
pnpm build
```

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

### Format Project Files

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/AGENTS.md

Applies code formatting using Prettier across all files in the project. Run from the repository root.

```bash
pnpm format
```

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

### Configure Basic Open Graph Tags

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/open-graph/basic.md

Use this snippet to set up essential Open Graph properties like type, URL, title, description, and multiple images. Ensure all required properties are correctly defined for optimal social sharing.

```svelte
<script>
  import { MetaTags } from 'svelte-meta-tags';
</script>

<MetaTags
  openGraph={{
    type: 'website',
    url: 'https://www.example.com/page',
    title: 'Open Graph Title',
    description: 'Open Graph Description',
    images: [
      {
        url: 'https://www.example.ie/og-image.jpg',
        width: 800,
        height: 600,
        alt: 'Og Image Alt'
      },
      {
        url: 'https://www.example.ie/og-image-2.jpg',
        width: 800,
        height: 600,
        alt: 'Og Image Alt 2'
      }
    ]
  }}
/>
```

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

### Implement Product JSON-LD Schema

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/json-ld/json-ld-properties/product.md

Use the JsonLd component to add Product schema markup. This includes details about the product's name, images, description, identifiers (SKU, MPN), brand, reviews, aggregate ratings, and offers.

```svelte
<script>
  import { JsonLd } from 'svelte-meta-tags';
</script>

<JsonLd
  schema={{
    '@type': 'Product',
    name: 'Executive Anvil',
    image: [
      'https://example.com/photos/1x1/photo.jpg',
      'https://example.com/photos/4x3/photo.jpg',
      'https://example.com/photos/16x9/photo.jpg'
    ],
    description:
      "Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height.",
    sku: '0446310786',
    mpn: '925872',
    brand: {
      '@type': 'Brand',
      name: 'ACME'
    },
    review: {
      '@type': 'Review',
      reviewRating: {
        '@type': 'Rating',
        ratingValue: '4',
        bestRating: '5'
      },
      author: {
        '@type': 'Person',
        name: 'Fred Benson'
      }
    },
    aggregateRating: {
      '@type': 'AggregateRating',
      ratingValue: '4.4',
      reviewCount: '89'
    },
    offers: {
      '@type': 'Offer',
      url: 'https://example.com/anvil',
      priceCurrency: 'USD',
      price: '119.99',
      priceValidUntil: '2020-11-20',
      itemCondition: 'https://schema.org/UsedCondition',
      availability: 'https://schema.org/InStock'
    }
  }}
/>
```

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

### Implement FAQPage Schema

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/json-ld/json-ld-properties/faq.md

Use the JsonLd component to create a FAQPage schema. This requires defining an array of questions, each with a name and an accepted answer containing text.

```svelte
<script>
  import { JsonLd } from 'svelte-meta-tags';
</script>

<JsonLd
  schema={{
    '@type': 'FAQPage',
    mainEntity: [
      {
        '@type': 'Question',
        name: 'How long is the delivery time?',
        acceptedAnswer: {
          '@type': 'Answer',
          text: '3-5 business days.'
        }
      },
      {
        '@type': 'Question',
        name: 'Where can I find information about product recalls?',
        acceptedAnswer: {
          '@type': 'Answer',
          text: 'Read more on under information.'
        }
      }
    ]
  }}
/>
```

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

### Package Svelte Library

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/AGENTS.md

Performs Svelte Kit sync, Svelte package build, and Publint checks for the library output. Run from the repository root.

```bash
pnpm package
```

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

### Add Changeset for Release

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/AGENTS.md

Agents should create a `.changeset/<short-slug>.md` file to describe user-facing changes for releases. Specify the package and the type of bump (patch, minor, major).

```markdown
---
'svelte-meta-tags': minor
---

feat: add `openGraph.image` as a shortcut alias for a single image.

```

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

### Lint Project Files

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/AGENTS.md

Runs Prettier for code formatting checks and ESLint for code analysis across all workspaces. Run from the repository root.

```bash
pnpm lint
```

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

### Configure Book Open Graph Meta Tags

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/open-graph/book.md

Use this component to set Open Graph meta tags for a book. Ensure the 'type' is set to 'book' and populate the nested 'book' object with relevant details.

```svelte
<script>
  import { MetaTags } from 'svelte-meta-tags';
</script>

<MetaTags
  openGraph={{
    title: 'Open Graph Book Title',
    description: 'Description of open graph book',
    url: 'https://www.example.com/books/book-title',
    type: 'book',
    book: {
      releaseDate: '2018-09-17T11:08:13Z',
      isbn: '978-3-16-148410-0',
      authors: [
        'https://www.example.com/authors/@firstnameA-lastnameA',
        'https://www.example.com/authors/@firstnameB-lastnameB'
      ],
      tags: ['Tag A', 'Tag B', 'Tag C']
    },
    images: [
      {
        url: 'https://www.test.ie/images/book.jpg',
        width: 850,
        height: 650,
        alt: 'Cover of the book'
      }
    ]
  }}
/>
```

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

### Configure Article Open Graph Meta Tags

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/ja/open-graph/article.md

Use the `MetaTags` component to set Open Graph properties for articles. Ensure the `type` is set to 'article' and populate the `article` object with relevant details.

```svelte
<script>
  import { MetaTags } from 'svelte-meta-tags';
</script>

<MetaTags
  openGraph={{
    title: 'Open Graph Article Title',
    description: 'Description of open graph article',
    url: 'https://www.example.com/articles/article-title',
    type: 'article',
    article: {
      publishedTime: '2017-06-21T23:04:13Z',
      modifiedTime: '2018-01-21T18:04:43Z',
      expirationTime: '2022-12-21T22:04:11Z',
      section: 'Section II',
      authors: [
        'https://www.example.com/authors/@firstnameA-lastnameA',
        'https://www.example.com/authors/@firstnameB-lastnameB'
      ],
      tags: ['Tag A', 'Tag B', 'Tag C']
    },
    images: [
      {
        url: 'https://www.test.ie/images/cover.jpg',
        width: 850,
        height: 650,
        alt: 'Photo of text'
      }
    ]
  }}
/>
```

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

### Configure Open Graph Profile Meta Tags

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/ja/open-graph/profile.md

Use the `MetaTags` component to set Open Graph profile properties. Ensure the `type` is set to 'profile' and include relevant user details.

```svelte
<script>
  import { MetaTags } from 'svelte-meta-tags';
</script>

<MetaTags
  openGraph={{
    title: 'Open Graph Profile Title',
    description: 'Description of open graph profile',
    url: 'https://www.example.com/@firstlast123',
    type: 'profile',
    profile: {
      firstName: 'First',
      lastName: 'Last',
      username: 'firstlast123',
      gender: 'female'
    },
    images: [
      {
        url: 'https://www.test.ie/images/profile.jpg',
        width: 850,
        height: 650,
        alt: 'Profile Photo'
      }
    ]
  }}
/>
```

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

### Comprehensive Meta Tags Configuration

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/usage/index.mdx

Configure various meta tag properties including Open Graph and Twitter card details for SEO.

```svelte
<script>
  import { MetaTags } from 'svelte-meta-tags';
</script>

<MetaTags
  title="Using More of Config"
  titleTemplate="%s | Svelte Meta Tags"
  description="This example uses more of the available config options."
  canonical="https://www.canonical.ie/"
  openGraph={{
    url: 'https://www.url.ie/a',
    title: 'Open Graph Title',
    description: 'Open Graph Description',
    images: [
      {
        url: 'https://www.example.ie/og-image-01.jpg',
        width: 800,
        height: 600,
        alt: 'Og Image Alt'
      },
      {
        url: 'https://www.example.ie/og-image-02.jpg',
        width: 900,
        height: 800,
        alt: 'Og Image Alt Second'
      },
      { url: 'https://www.example.ie/og-image-03.jpg' },
      { url: 'https://www.example.ie/og-image-04.jpg' }
    ],
    siteName: 'SiteName'
  }}
  twitter={{
    creator: '@handle',
    site: '@site',
    cardType: 'summary_large_image',
    title: 'Using More of Config',
    description: 'This example uses more of the available config options.',
    image: 'https://www.example.ie/twitter-image.jpg',
    imageAlt: 'Twitter image alt'
  }}
  facebook={{
    appId: '1234567890'
  }}
/>
```

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

### Add DataSet Schema Markup

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/json-ld/json-ld-properties/dataSet.md

Use the JsonLd component to add Dataset schema markup. Ensure the description is at least 50 characters long.

```svelte
<script>
  import { JsonLd } from 'svelte-meta-tags';
</script>

<JsonLd
  schema={{
    '@type': 'Dataset',
    name: 'name of the dataset',
    description: 'The description needs to be at least 50 characters long',
    license: 'https//www.example.com'
  }}
/>
```

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

### Configure Single Open Graph Image

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/open-graph/basic.md

Utilize the `image` property as a shortcut when only one image needs to be specified for Open Graph tags. This is commonly used as social media cards typically display only the first image.

```svelte
<MetaTags
  openGraph={{
    image: {
      url: 'https://www.example.ie/og-image.jpg',
      width: 1200,
      height: 630,
      alt: 'Og Image Alt'
    }
  }}
/>
```

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

### Run All Workspace Tests

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/AGENTS.md

Executes the 'test' script defined in each workspace's package.json. This typically runs Vitest for the library and Playwright for end-to-end tests. Run from the repository root.

```bash
pnpm test
```

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

### Configure Twitter Card Meta Tags

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/meta-tags-properties/twitter.md

Set various Twitter card properties like creator, site, card type, title, description, image, and image alt text.

```js
twitter={
  creator: '@handle',
  site: '@site',
  cardType: 'summary_large_image',
  title: 'Twitter',
  description: 'Twitter',
  image: 'https://www.example.ie/twitter-image.jpg',
  imageAlt: 'Twitter image alt'
}
```

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

### Run Unit Tests and Benchmarks for DeepMerge

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/AGENTS.md

Executes unit tests and benchmarks specifically for the deepMerge utility and related helpers within the svelte-meta-tags package.

```bash
pnpm --filter svelte-meta-tags test
```

```bash
pnpm --filter svelte-meta-tags test:bench
```

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

### Check TypeScript Across Workspaces

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/AGENTS.md

Runs Svelte type checking across all workspaces. Run from the repository root.

```bash
pnpm check
```

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

### Enable Remote Functions in svelte.config.js

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/usage/index.mdx

Configure your SvelteKit project to enable experimental remote functions and async compiler options.

```javascript
const config = {
  kit: {
    experimental: {
      remoteFunctions: true
    }
  },
  compilerOptions: {
    experimental: {
      async: true
    }
  }
};
```

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

### Add Course JSON-LD to Svelte Component

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/json-ld/json-ld-properties/course.md

Use the JsonLd component to add Course schema markup. Ensure the 'provider' property includes organization details.

```svelte
<script>
  import { JsonLd } from 'svelte-meta-tags';
</script>

<JsonLd
  schema={{
    '@type': 'Course',
    name: 'Introduction to Computer Science and Programming',
    description: 'Introductory CS course laying out the basics.',
    provider: {
      '@type': 'Organization',
      name: 'University of Technology - Eureka',
      sameAs: 'http://www.ut-eureka.edu'
    }
  }}
/>
```

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

### Generate BreadcrumbList JSON-LD

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/ja/json-ld/json-ld-properties/breadcrumb.md

Use the JsonLd component with the '@type': 'BreadcrumbList' schema to define the breadcrumb trail. Each item requires a 'position', 'name', and optionally an 'item' URL.

```svelte
<script>
  import { JsonLd } from 'svelte-meta-tags';
</script>

<JsonLd
  schema={{
    '@type': 'BreadcrumbList',
    itemListElement: [
      {
        '@type': 'ListItem',
        position: 1,
        name: 'Books',
        item: 'https://example.com/books'
      },
      {
        '@type': 'ListItem',
        position: 2,
        name: 'Science Fiction',
        item: 'https://example.com/books/sciencefiction'
      },
      {
        '@type': 'ListItem',
        position: 3,
        name: 'Award Winners'
      }
    ]
  }}
/>
```

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

### Execute Single Playwright Test File

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/AGENTS.md

Runs a specific Playwright end-to-end test file for the Svelte 5 integration.

```bash
pnpm --filter svelte-5 exec playwright test tests/twitter.test.ts
```

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

### Define Base Meta Tags in Svelte Layout Load Function

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/deep-merge-function/index.md

Define default meta tags in a SvelteKit layout's load function using `defineBaseMetaTags`. This function sets up foundational SEO properties including Open Graph details.

```typescript
import { defineBaseMetaTags } from 'svelte-meta-tags';

export const load = ({ url }) => {
  const baseTags = defineBaseMetaTags({
    title: 'Default',
    titleTemplate: '%s | Svelte Meta Tags',
    description: 'Svelte Meta Tags is a Svelte component for managing meta tags and SEO in your Svelte applications.',
    canonical: new URL(url.pathname, url.origin).href, // creates a cleaned up URL (without hashes or query params) from your current URL
    openGraph: {
      type: 'website',
      url: new URL(url.pathname, url.origin).href,
      locale: 'en_IE',
      title: 'Open Graph Title',
      description: 'Open Graph Description',
      siteName: 'SiteName',
      images: [
        {
          url: 'https://www.example.ie/og-image.jpg',
          alt: 'Og Image Alt',
          width: 800,
          height: 600,
          secureUrl: 'https://www.example.ie/og-image.jpg',
          type: 'image/jpeg'
        }
      ]
    }
  });

  return { ...baseTags };
};

```

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

### Execute Single DeepMerge Test File

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/AGENTS.md

Runs a specific test file for deepMerge using Vitest, scoped to the svelte-meta-tags package.

```bash
pnpm --filter svelte-meta-tags exec vitest run tests/deepMerge/deepMerge.test.ts
```

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

### Define OpenGraphAudio Interface

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/types/additional-types/open-graph-audio.md

Use this interface to define the structure for audio URLs in Open Graph metadata. It requires a URL and optionally accepts a secure URL and content type.

```typescript
interface OpenGraphAudio {
  url: string;
  secureUrl?: string;
  type?: string;
}
```

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

### OpenGraphBook Interface

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/types/additional-types/open-graph-book.md

Defines the structure for book-related Open Graph meta tags.

```APIDOC
## OpenGraphBook

### Description
Represents a book for Open Graph meta tags.

### Interface
```ts
interface OpenGraphBook {
  authors?: ReadonlyArray<string>;
  isbn?: string;
  releaseDate?: string;
  tags?: ReadonlyArray<string>;
}
```

### Properties
- **authors** (string[]) - Optional - An array of author names.
- **isbn** (string) - Optional - The International Standard Book Number.
- **releaseDate** (string) - Optional - The release date of the book (YYYY-MM-DD).
- **tags** (string[]) - Optional - An array of relevant tags for the book.
```

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

### Configure Additional Robots Properties

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/meta-tags-properties/additional-robots-props.md

Use the `additionalRobotsProps` object to pass various directives to the robots meta tag. This allows for granular control over how search engines crawl and display your content.

```svelte
<script>
  import { MetaTags } from 'svelte-meta-tags';
</script>

<MetaTags
  additionalRobotsProps={{
    noarchive: true,
    nosnippet: true,
    maxSnippet: -1,
    maxImagePreview: 'none',
    maxVideoPreview: -1,
    notranslate: true,
    noimageindex: true,
    unavailableAfter: '25 Jun 2010 15:00:00 PST'
  }}
/>
```

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

### Add Video Open Graph Tags in Svelte

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/open-graph/video.md

Use the `MetaTags` component to include detailed video metadata for Open Graph. This includes properties like actors, directors, writers, duration, release date, and tags.

```svelte
<script>
  import { MetaTags } from 'svelte-meta-tags';
</script>

<MetaTags
  title="Video Page Title"
  description="Description of video page"
  openGraph={{
    title: 'Open Graph Video Title',
    description: 'Description of open graph video',
    url: 'https://www.example.com/videos/video-title',
    type: 'video.movie',
    video: {
      actors: [
        {
          profile: 'https://www.example.com/actors/@firstnameA-lastnameA',
          role: 'Protagonist'
        },
        {
          profile: 'https://www.example.com/actors/@firstnameB-lastnameB',
          role: 'Antagonist'
        }
      ],
      directors: [
        'https://www.example.com/directors/@firstnameA-lastnameA',
        'https://www.example.com/directors/@firstnameB-lastnameB'
      ],
      writers: [
        'https://www.example.com/writers/@firstnameA-lastnameA',
        'https://www.example.com/writers/@firstnameB-lastnameB'
      ],
      duration: 680000,
      releaseDate: '2022-12-21T22:04:11Z',
      tags: ['Tag A', 'Tag B', 'Tag C']
    },
    siteName: 'SiteName'
  }}
/>
```

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

### Prefix Title Template

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/meta-tags-properties/title-template.md

Use this pattern to prepend a site-wide title to your page titles. Replace %s with your actual page title.

```javascript
title = 'This is my title'
titleTemplate = 'Svelte Meta Tags | %s'
// outputs: Svelte Meta Tags | This is my title
```

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

### OpenGraphVideo Interface

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/types/additional-types/open-graph-video.md

Defines the structure for Open Graph video metadata.

```APIDOC
## OpenGraphVideo

### Description
Represents the metadata for a video to be used with Open Graph.

### Interface
```ts
interface OpenGraphVideo {
  actors?: ReadonlyArray<OpenGraphVideoActors>;
  directors?: ReadonlyArray<string>;
  writers?: ReadonlyArray<string>;
  duration?: number;
  releaseDate?: string;
  tags?: ReadonlyArray<string>;
  series?: string;
}
```

### Properties
- **actors** (ReadonlyArray<OpenGraphVideoActors>) - Optional - An array of actors involved in the video.
- **directors** (ReadonlyArray<string>) - Optional - An array of directors for the video.
- **writers** (ReadonlyArray<string>) - Optional - An array of writers for the video.
- **duration** (number) - Optional - The duration of the video in seconds.
- **releaseDate** (string) - Optional - The release date of the video (ISO 8601 format).
- **tags** (ReadonlyArray<string>) - Optional - An array of tags associated with the video.
- **series** (string) - Optional - The name of the series the video belongs to.
```

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

### HTTPEquivMetaTag Interface

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/types/additional-types/http-equiv-meta-tag.md

The HTTPEquivMetaTag interface extends BaseMetaTag and specifically defines the httpEquiv property for meta tags. It supports a limited set of predefined http-equiv values and ensures that 'name' and 'property' are not used.

```APIDOC
## Interface: HTTPEquivMetaTag

### Description
Defines a meta tag with an `httpEquiv` attribute. This type is used for meta tags that control browser behavior or provide HTTP header-like information.

### Properties
- **httpEquiv** (string) - Required - One of the following values: `'content-security-policy'`, `'content-type'`, `'default-style'`, `'x-ua-compatible'`, `'refresh'`.
- **name** (undefined) - Optional - Must be undefined for this type.
- **property** (undefined) - Optional - Must be undefined for this type.

### Example Usage
```typescript
import type { HTTPEquivMetaTag } from 'svelte-meta-tags';

const refreshMetaTag: HTTPEquivMetaTag = {
  httpEquiv: 'refresh',
  content: '5;url=http://example.com'
};

const cspMetaTag: HTTPEquivMetaTag = {
  httpEquiv: 'content-security-policy',
  content: "default-src 'self'"
};
```
```

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

### Define Base Meta Tags in Layout TS

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/usage/index.mdx

Define default meta tags for your application in a +layout.ts file using `defineBaseMetaTags`.

```typescript
import { defineBaseMetaTags } from 'svelte-meta-tags';

export const load = ({ url }) => {
  const baseTags = defineBaseMetaTags({
    title: 'Default',
    titleTemplate: '%s | Svelte Meta Tags',
    description: 'Svelte Meta Tags is a Svelte component for managing meta tags and SEO in your Svelte applications.',
    canonical: new URL(url.pathname, url.origin).href, // creates a cleaned up URL (without hashes or query params) from your current URL
    openGraph: {
      type: 'website',
      url: new URL(url.pathname, url.origin).href,
      locale: 'en_IE',
      title: 'Open Graph Title',
      description: 'Open Graph Description',
      siteName: 'SiteName',
      images: [
        {
          url: 'https://www.example.ie/og-image.jpg',
          alt: 'Og Image Alt',
          width: 800,
          height: 600,
          secureUrl: 'https://www.example.ie/og-image.jpg',
          type: 'image/jpeg'
        }
      ]
    }
  });

  return { ...baseTags };
};
```

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

### OpenGraphAudio Interface

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/types/additional-types/open-graph-audio.md

The OpenGraphAudio type defines the structure for including audio content in Open Graph meta tags. It includes the URL of the audio file and optional fields for a secure URL and the MIME type.

```APIDOC
## OpenGraphAudio Type

### Description

Represents an audio object for Open Graph meta tags.

### Properties

- **url** (string) - Required - The URL of the audio file.
- **secureUrl** (string) - Optional - The HTTPS URL of the audio file.
- **type** (string) - Optional - The MIME type of the audio file (e.g., "audio/mpeg").
```

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

### HTML5MetaTag Interface

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/types/additional-types/html5-meta-tag.md

Defines the structure for an HTML5 meta tag. It requires a 'name' property and ensures that 'property' and 'httpEquiv' are not used.

```APIDOC
## Interface: HTML5MetaTag

### Description
Represents a standard HTML5 meta tag.

### Properties
- **name** (string) - Required - The name attribute of the meta tag.
- **property** (undefined) - Not allowed - This property is explicitly undefined for HTML5MetaTag.
- **httpEquiv** (undefined) - Not allowed - This property is explicitly undefined for HTML5MetaTag.

### Type Definition
```ts
interface HTML5MetaTag extends BaseMetaTag {
  name: string;
  property?: undefined;
  httpEquiv?: undefined;
}
```
```

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

### Run Playwright Tests

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/CONTRIBUTING.md

Execute end-to-end tests using Playwright. This command should be run after making modifications to ensure code integrity.

```bash
pnpm test
```

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

### Add Mobile Alternate Link

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/meta-tags-properties/alternate.md

Use this property to specify a mobile version of your website. This is useful for search engines to understand the relationship between desktop and mobile sites.

```js
mobileAlternate={
  media: 'only screen and (max-width: 640px)',
  href: 'https://m.canonical.ie'
}
```

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

### HTTPEquivMetaTag Interface

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/ja/types/additional-types/http-equiv-meta-tag.md

Defines the structure for an HTTPEquivMetaTag, which includes the 'httpEquiv' property with a specific set of allowed string values. The 'name' and 'property' fields are explicitly disallowed for this type.

```APIDOC
## Interface: HTTPEquivMetaTag

### Description
Represents a meta tag that uses the `http-equiv` attribute. This type enforces that the `httpEquiv` property must be one of the predefined values and that `name` and `property` attributes are not used.

### Properties
- **httpEquiv** (string) - Required - One of the following values: 'content-security-policy', 'content-type', 'default-style', 'x-ua-compatible', 'refresh'.
- **name** (undefined) - Not allowed.
- **property** (undefined) - Not allowed.

### Example Usage (Conceptual)
```typescript
import { HTTPEquivMetaTag } from 'svelte-meta-tags';

const refreshMetaTag: HTTPEquivMetaTag = {
  httpEquiv: 'refresh',
  content: '5;url=http://example.com'
};

const cspMetaTag: HTTPEquivMetaTag = {
  httpEquiv: 'content-security-policy',
  content: "default-src 'self'"
};
```
```

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

### Add Custom Meta Tags

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/meta-tags-properties/additional-meta-tags.md

Use `additionalMetaTags` to include custom meta tags. Ensure each object has `content` and exactly one of `name`, `property`, or `httpEquiv`.

```javascript
additionalMetaTags={
  [
    {
      property: 'dc:creator',
      content: 'Jane Doe'
    },
    {
      name: 'application-name',
      content: 'Svelte-Meta-Tags'
    },
    {
      httpEquiv: 'x-ua-compatible',
      content: 'IE=edge; chrome=1'
    }
  ]
}
```

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

### Handling Duplicate Meta Tags

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/meta-tags-properties/additional-meta-tags.md

The component only supports unique tags. If duplicate `name`, `property`, or `httpEquiv` values are provided, the last one defined will be rendered.

```javascript
additionalMetaTags={
  [
    {
      property: 'dc:creator',
      content: 'John Doe'
    },
    {
      property: 'dc:creator',
      content: 'Jane Doe'
    }
  ]
}
```

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

### MobileAlternate Interface

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/types/mobile-alternate.md

Defines the structure for mobile alternate links, including the media query and the URL.

```APIDOC
## MobileAlternate Interface

### Description
Represents an alternate version of a page optimized for mobile devices. This is often used in conjunction with media queries to specify conditions under which the alternate URL should be used.

### Interface Definition
```ts
interface MobileAlternate {
  media: string; // A string representing a media query (e.g., "(max-width: 600px)").
  href: string;  // The URL of the alternate mobile page.
}
```

### Usage Example
```javascript
const mobileAlternates: MobileAlternate[] = [
  {
    media: "(max-width: 600px)",
    href: "/mobile/page.html"
  }
];
```
```

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

### Add Language Alternates

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/meta-tags-properties/alternate.md

Specify different language versions of your webpage. This helps search engines serve the correct language version to users based on their locale.

```js
languageAlternates=[
  {
    hrefLang: 'de-AT',
    href: 'https://www.canonical.ie/de'
  }
]
```

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

### OpenGraphVideos Interface

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/types/additional-types/open-graph-videos.md

The OpenGraphVideos interface defines the structure for video objects used in Open Graph meta tags. It includes properties for the video URL, secure URL, type, and dimensions.

```APIDOC
## Interface: OpenGraphVideos

### Description
Defines the structure for video metadata used in Open Graph tags.

### Properties
- **url** (string) - Required - The URL of the video.
- **secureUrl** (string) - Optional - The secure URL (HTTPS) of the video.
- **type** (string) - Optional - The MIME type of the video (e.g., 'video/mp4').
- **width** (number) - Optional - The width of the video in pixels.
- **height** (number) - Optional - The height of the video in pixels.

### Example
```json
{
  "url": "https://www.example.com/video.mp4",
  "secureUrl": "https://www.example.com/secure_video.mp4",
  "type": "video/mp4",
  "width": 1280,
  "height": 720
}
```
```

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

### OpenGraphProfile Interface

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/types/additional-types/open-graph-profile.md

Defines the structure for Open Graph profile information.

```APIDOC
## OpenGraphProfile

### Description

Represents a profile object for Open Graph meta tags. This interface allows you to define user-specific profile details that can be shared on social media platforms.

### Interface Definition

```typescript
interface OpenGraphProfile {
  firstName?: string;
  lastName?: string;
  username?: string;
  gender?: string;
}
```

### Properties

- **firstName** (string) - Optional - The first name of the profile owner.
- **lastName** (string) - Optional - The last name of the profile owner.
- **username** (string) - Optional - The username of the profile owner.
- **gender** (string) - Optional - The gender of the profile owner.
```

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

### Add Custom Link Tags

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/meta-tags-properties/additional-link-tags.md

Use the `additionalLinkTags` prop to define custom link tags. Ensure `rel` and `href` are provided for each tag. Supports additional attributes like `sizes`.

```javascript
additionalLinkTags={[
  {
    rel: 'icon',
    href: 'https://www.test.ie/favicon.ico'
  },
  {
    rel: 'apple-touch-icon',
    href: 'https://www.test.ie/touch-icon-ipad.jpg',
    sizes: '76x76'
  },
  {
    rel: 'manifest',
    href: 'https://www.test.ie/manifest.json'
  }
]}
```

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

### Define OpenGraphImage Interface

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/types/additional-types/open-graph-image.md

Use this interface to define the structure for image objects in Open Graph meta tags. It includes properties for the image URL, secure URL, type, dimensions, and alt text.

```typescript
interface OpenGraphImage {
  url: string;
  secureUrl?: string;
  type?: string;
  width?: number;
  height?: number;
  alt?: string;
}
```

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

### OpenGraphVideos Interface

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/ja/types/additional-types/open-graph-videos.md

The OpenGraphVideos interface defines the structure for video objects used in Open Graph metadata. It includes properties for the video URL, secure URL, type, and dimensions.

```APIDOC
## OpenGraphVideos Type

### Description

Defines the structure for video objects to be used in Open Graph metadata.

### Properties

- **url** (string) - Required - The URL of the video.
- **secureUrl** (string) - Optional - The HTTPS URL of the video.
- **type** (string) - Optional - The MIME type of the video (e.g., 'video/mp4').
- **width** (number) - Optional - The width of the video in pixels.
- **height** (number) - Optional - The height of the video in pixels.

### Example

```json
{
  "url": "https://www.example.com/video.mp4",
  "secureUrl": "https://www.example.com/secure_video.mp4",
  "type": "video/mp4",
  "width": 1280,
  "height": 720
}
```
```

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

### Suffix Title Template

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/meta-tags-properties/title-template.md

Use this pattern to append a site-wide title to your page titles. Replace %s with your actual page title.

```javascript
title = 'This is my title'
titleTemplate = '%s | Svelte Meta Tags'
// outputs: This is my title | Svelte Meta Tags
```

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

### RDFaMetaTag Interface

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/ja/types/additional-types/rdfa-meta-tag.md

The RDFaMetaTag interface extends BaseMetaTag and is used for meta tags that utilize RDFa properties. It requires a `property` and does not allow `name` or `httpEquiv`.

```APIDOC
## RDFaMetaTag Interface

### Description

This interface defines a meta tag specifically for use with RDFa (Resource Description Framework in Attributes). It inherits from `BaseMetaTag` and requires a `property` field, which specifies the RDFa property.

It explicitly disallows the use of `name` and `httpEquiv` attributes, ensuring that this type is solely for RDFa-related metadata.

### Interface Definition

```typescript
interface RDFaMetaTag extends BaseMetaTag {
  property: string;
  name?: undefined;
  httpEquiv?: undefined;
}
```

### Fields

- **property** (string) - Required - The RDFa property name (e.g., 'og:title', 'article:published_time').
- **name** (undefined) - Not allowed - This field is explicitly undefined for RDFaMetaTag.
- **httpEquiv** (undefined) - Not allowed - This field is explicitly undefined for RDFaMetaTag.
```

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

### Define Page-Specific Meta Tags in Svelte Page Load Function

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/deep-merge-function/index.md

Define meta tags specific to a particular page in a SvelteKit page's load function using `definePageMetaTags`. This allows for overriding or adding to the base meta tags.

```typescript
import { definePageMetaTags } from 'svelte-meta-tags';

export const load = () => {
  const pageTags = definePageMetaTags({
    title: 'TOP',
    description: 'Description TOP',
    openGraph: {
      title: 'Open Graph Title TOP',
      description: 'Open Graph Description TOP'
    }
  });

  return { ...pageTags };
};

```

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

### Update Twitter Handle Property

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/migration-guide/index.md

In v4, `twitter.handle` is renamed to `twitter.creator` to align with the actual property name.

```svelte
<MetaTags
  twitter={{
    handle: '@handle',
    site: '@site',
    cardType: 'summary_large_image',
    title: 'Twitter',
    description: 'Twitter',
    image: 'https://www.example.ie/twitter-image.jpg',
    imageAlt: 'Twitter image alt'
  }}
/>
```

```svelte
<MetaTags
  twitter={{
    creator: '@handle',
    site: '@site',
    cardType: 'summary_large_image',
    title: 'Twitter',
    description: 'Twitter',
    image: 'https://www.example.ie/twitter-image.jpg',
    imageAlt: 'Twitter image alt'
  }}
/>
```

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

### Merging Meta Tags in Svelte Component

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/AGENTS.md

Demonstrates how to merge base meta tags with page-specific meta tags using the deepMerge utility in a Svelte component's derived state.

```typescript
// +layout.svelte
let metaTags = $derived(deepMerge(data.baseMetaTags, page.data.pageMetaTags));
<MetaTags {...metaTags} />
```

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

### RDFaMetaTag Interface

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/types/additional-types/rdfa-meta-tag.md

Defines the structure for an RDFa meta tag. It requires a 'property' field and explicitly excludes 'name' and 'httpEquiv' to ensure correct RDFa usage.

```APIDOC
## RDFaMetaTag Interface

### Description
Represents a meta tag specifically for RDFa attributes. This type enforces the use of the `property` attribute, which is standard in RDFa, and disallows `name` and `httpEquiv` to avoid conflicts and ensure semantic correctness.

### Interface Definition
```ts
interface RDFaMetaTag extends BaseMetaTag {
  property: string;
  name?: undefined;
  httpEquiv?: undefined;
}
```

### Fields
- **property** (string) - Required - The RDFa property attribute.
- **name** (undefined) - Optional - This field is explicitly undefined for RDFaMetaTag.
- **httpEquiv** (undefined) - Optional - This field is explicitly undefined for RDFaMetaTag.
```

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

### Define OpenGraphVideos Type

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/ja/types/additional-types/open-graph-videos.md

Use this TypeScript interface to define the structure for video metadata in Open Graph tags. It includes optional fields for secure URL, type, width, and height.

```typescript
interface OpenGraphVideos {
  url: string;
  secureUrl?: string;
  type?: string;
  width?: number;
  height?: number;
}
```

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

### AdditionalRobotsProps Interface

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/types/additional-robots-props.md

The `AdditionalRobotsProps` interface defines the available properties for controlling search engine crawler behavior.

```APIDOC
## Interface: AdditionalRobotsProps

### Description
Defines the available properties for customizing robots meta tags.

### Properties
- **nosnippet** (boolean) - Optional - If true, prevents search engines from displaying a snippet of the page content in search results.
- **maxSnippet** (number) - Optional - Specifies the maximum number of characters allowed in a snippet.
- **maxImagePreview** ('none' | 'standard' | 'large') - Optional - Controls the size of the image preview shown in search results. Can be 'none', 'standard', or 'large'.
- **maxVideoPreview** (number) - Optional - Specifies the maximum number of seconds allowed for a video preview.
- **noarchive** (boolean) - Optional - If true, prevents search engines from caching a copy of the page.
- **unavailableAfter** (string) - Optional - Specifies a date and time after which the page should no longer be shown in search results.
- **noimageindex** (boolean) - Optional - If true, prevents search engines from indexing images on the page.
- **notranslate** (boolean) - Optional - If true, prevents search engines from providing a translated version of the page.
```

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

### Define a Remote Function for Fetching Data

Source: https://github.com/oekazuma/svelte-meta-tags/blob/main/docs/src/content/docs/usage/index.mdx

Create a server-only remote function to fetch post data based on a slug. This function uses `valibot` for validation and interacts with a database.

```typescript
import { query } from '$app/server';
import * as v from 'valibot';
import * as db from '$lib/server/database';

export const getPost = query(v.string(), async (slug) => {
  return await db.getPost(slug);
});
```