← Help

SvelteKit

Get started with integrating Mosaic into your SvelteKit project.

Step 1

For static pages (e.g., src/routes/+page.svelte)

<script lang="ts">
</script>

<svelte:head>
  <title>Your Site Name</title>
  <meta property="og:title" content="Your Site Name" />
  <meta property="og:description" content="Your site description" />
  <meta property="og:image" content="https://mosaicimg.com/use?url=yourwebsite.com/your_slug" />
  <meta property="og:type" content="website" />
  <meta name="twitter:card" content="summary_large_image" />
</svelte:head>

<!-- Your page content -->

Step 2

For dynamic pages (e.g., src/routes/blog/[slug]/+page.svelte)

<script lang="ts">
  export let data; // your page data from +page.server.ts
</script>

<svelte:head>
  <title>{data.title}</title>
  <meta property="og:title" content={data.title} />
  <meta property="og:description" content={data.description} />
  <meta property="og:image" content={`https://mosaicimg.com/use?url=yourwebsite.com/${data.slug}`} />
  <meta property="og:type" content="article" />
  <meta name="twitter:card" content="summary_large_image" />
</svelte:head>

<!-- Your page content -->

Step 3

Remember to replace the placeholder value (like 'yourwebsite.com' and 'your_slug') with your actual website URL and slug.