Meta

Call initMeta in your root component's script. In SvelteKit, use the root layout. Pass any shared defaults here.

Place QMetaHead after your page content so SSR includes its metadata.

<script lang="ts">
  import { initMeta, QMetaHead } from "@quaffui/quaff/meta";

  let { children } = $props();

  initMeta({ title: "My site" });
</script>

{@render children()}
<QMetaHead />

Call useMeta in a child component's script. Pass an object for fixed values or a getter for reactive values.

<script lang="ts">
  import { useMeta } from "@quaffui/quaff/meta";

  let title = $state("About");

  useMeta(() => ({
    title,
    meta: {
      description: { name: "description", content: "Meet our team." },
    },
  }));
</script>

<input aria-label="Page title" bind:value={title} />

For each key, the last registered value wins. Removing a component restores earlier values. Set a tag to null to remove it: meta: { description: null }.

• titleTemplate: Function that formats the title.
• meta: Meta tags by key. Each value holds HTML attributes and an optional template function to format its content.
• link: Link tags by key, such as a canonical URL.

SSR and prerendering include metadata in the HTML. Load data before rendering, for example with SvelteKit's load. For awaited metadata in experimental async components, use native svelte:head.

Keep charset and viewport in your app template. Avoid duplicating managed tags in svelte:head.