Define default meta tags, title etc. and have the option to override it

I want to define default meta tags, title etc. and have the option to override it per page. For example: I have 10 generic pages where I just want to use the default ones and then I have 5 pages where I want to set individual meta keywords, description, title etc.

In the app.html I can define those default tags, but if I set new tags via svelte:head it just appends those new tags and doesn’t replace the existing ones.

I also tried playing around with __layout.svelte (since this is somehow a root component at the moment) and Context API etc. but this didn’t work for me.

At the moment, the only solution I can find is creating a root component (e. g. App.svelte) and every page will import and call it. This root component will then export those meta tags and title and will have default values. Then I remove those tags from the app.html and pass it 1x from the root component with svelte:head

<App keywords="test1, test2, test3" description="this is a test" title="test title">
    The actual content of the site
</App>

But this seems to be cumbersome and would mean that in my case, I have to update more than 100 pages.

Is there a better way of doing that?

the easiest way of doing it would be to have an “override” mode for svelte:head:

<svelte:head|override>
    // override existing content
</svelte:head>

edit: there is also a realted Svelte issue: https://github.com/sveltejs/svelte/issues/4990

It would also be a nice solution to have some sort of named slots here (in the app.html, the __layout.svelte or somewhere else).

Using a store (https://github.com/svelte-society/sveltesociety-2021/blob/main/src/lib/stores/metatags.ts) can also be a solution, but the “override” solution seems to be easier to read and write.

[benmccann]

Yes, I think we can for now and see how well that solves the problem for people. We’ve also documented it here: https://kit.svelte.dev/docs/seo

[e0]

With the recent addition of stuff, should this be closed now?

Following is a TypeScript example.

In src/app.d.ts:

declare namespace App {
  interface Locals {}

  interface Platform {}

  interface Session {}

  interface Stuff {
    description: string;
  }
}

In src/routes/my-page.svelte:

<script context="module" lang="ts">
  export const load = () => ({
    stuff: {
      description: 'Description from page'
    }
  });
</script>

In src/routes/__layout.svelte:

<script context="module" lang="ts">
  export const load = () => ({
    stuff: {
      description: 'Default description from layout'
    }
  });
</script>

<script lang="ts">
  import { page } from '$app/stores';
</script>

<svelte:head>
  <meta name="description" content={$page.stuff.description} />
</svelte:head>

Edit: Updated code based on https://github.com/sveltejs/kit/issues/1540#issuecomment-1068232079