Skip to content

Deep Merge function

Provides a function to deeply merge the enumerable properties of two or more objects.

Use this when you want to override the default values on child pages, as in the following example.

+layout.svelte

<script>
import { page } from '$app/state';
import { MetaTags, deepMerge } from 'svelte-meta-tags';
let { data, children } = $props();
let metaTags = $derived(deepMerge(data.baseMetaTags, page.data.pageMetaTags));
</script>
<MetaTags {...metaTags} />
{@render children()}

+layout.ts

import type { MetaTagsProps } from 'svelte-meta-tags';
export const load = ({ url }) => {
const baseMetaTags = Object.freeze({
title: 'Default',
titleTemplate: '%s | Svelte Meta Tags',
description: 'Svelte Meta Tags is a Svelte component for managing meta tags and SEO in your Svelte applications.',
canonical: new URL(url.pathname, url.origin).href,
openGraph: {
type: 'website',
url: new URL(url.pathname, url.origin).href,
locale: 'en_IE',
title: 'Open Graph Title',
description: 'Open Graph Description',
siteName: 'SiteName',
images: [
{
url: 'https://www.example.ie/og-image.jpg',
alt: 'Og Image Alt',
width: 800,
height: 600,
secureUrl: 'https://www.example.ie/og-image.jpg',
type: 'image/jpeg'
}
]
}
}) satisfies MetaTagsProps;
return {
baseMetaTags
};
};

+page.ts

import type { MetaTagsProps } from 'svelte-meta-tags';
export const load = () => {
const pageMetaTags = Object.freeze({
title: 'TOP',
description: 'Description TOP',
openGraph: {
title: 'Open Graph Title TOP',
description: 'Open Graph Description TOP'
}
}) satisfies MetaTagsProps;
return {
pageMetaTags
};
};