Skip to content
SvelteMetaTags
English
Esc
navigateopen⌘Jpreview
On this page

Define Meta Tags

defineBaseMetaTags and definePageMetaTags are thin wrappers used in SvelteKit load functions. Each one just freezes your input object and wraps it under a named property:

const defineBaseMetaTags = (obj: MetaTagsProps) => ({ baseMetaTags: Object.freeze(obj) });
const definePageMetaTags = (obj: MetaTagsProps) => ({ pageMetaTags: Object.freeze(obj) });

They exist purely to type and shape your load return value — there’s no other behavior. You can skip them entirely and write the equivalent by hand:

// +layout.ts, without defineBaseMetaTags
export const load = () => {
  return { baseMetaTags: Object.freeze<MetaTagsProps>({ title: 'Default' }) };
};

Usage

// +layout.ts
import { defineBaseMetaTags } from 'svelte-meta-tags';

export const load = () => {
  const baseTags = defineBaseMetaTags({
    title: 'Default',
    description: 'Welcome to my application'
  });

  return { ...baseTags };
};
// +page.ts
import { definePageMetaTags } from 'svelte-meta-tags';

export const load = () => {
  const pageTags = definePageMetaTags({
    title: 'About Us',
    description: 'Learn more about our company'
  });

  return { ...pageTags };
};

Combine the two with deepMerge in your root +layout.svelte.

Was this page helpful?