SvelteKit SEO: 6 checks and how to fix them

Move data fetching to a load function:

// src/routes/products/+page.server.ts
export async function load({ fetch }) {
  const products = await fetch('/api/products').then(r => r.json());
  return { products };
}

<!-- src/routes/products/+page.svelte -->
<script>
  export let data;
</script>

{#each data.products as product}
  <div>{product.name}</div>
{/each}

Add svelte:head to your layout:

<!-- src/routes/+layout.svelte -->
<script>
  import { page } from '$app/stores';
</script>

<svelte:head>
  <title>{$page.data.title ?? 'Your Site'}</title>
  <meta name="description" content={$page.data.description ?? 'Default description'} />
  <link rel="canonical" href={$page.url.href} />
</svelte:head>

<slot />

Add prerender to static pages:

// src/routes/about/+page.ts
export const prerender = true;

Or set default in svelte.config.js:

kit: {
  prerender: {
    default: true
  }
}

Set in svelte.config.js:

kit: {
  trailingSlash: 'never' // or 'always'
}

Install enhanced images:

npm install @sveltejs/enhanced-img

<script>
  import { Image } from '@sveltejs/enhanced-img';
  import heroImage from '$lib/images/hero.jpg';
</script>

<Image src={heroImage} alt="Hero" />

Option 1: Use svelte-sitemap

npm install svelte-sitemap
npx svelte-sitemap --domain https://yoursite.com

Option 2: Create src/routes/sitemap.xml/+server.ts:

export async function GET() {
  const pages = ['/', '/about', '/products'];
  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
      ${pages.map(page => `
        <url>
          <loc>https://yoursite.com${page}</loc>
        </url>
      `).join('')}
    </urlset>`;
  return new Response(sitemap, {
    headers: { 'Content-Type': 'application/xml' }
  });
}