v4

[oekazuma]

Below is a summary of what we need to do in v4.

• migrate Svelte 5 #1197

  • Supports Svelte 5! With this change, we will no longer support Svelte 3 and Svelte 4.

• deepMerge included in package #1119

  • Add deepMerge function that allows deep merging of objects.

• add Twitter properties and rename twitter.handle to twitter.creator

  • Add the rest of the twitter properties. Also rename twitter.handle to twitter.creator to match the actual interface.

Migration Guide

twitter.handle has been renamed twitter.creator
This change aligns with the actual property name.

v3

<MetaTags
  twitter={{
    handle: '@handle',
    site: '@site',
    cardType: 'summary_large_image',
    title: 'Twitter',
    description: 'Twitter',
    image: 'https://www.example.ie/twitter-image.jpg',
    imageAlt: 'Twitter image alt'
  }}
/>

v4

<MetaTags
  twitter={{
    creator: '@handle',
    site: '@site',
    cardType: 'summary_large_image',
    title: 'Twitter',
    description: 'Twitter',
    image: 'https://www.example.ie/twitter-image.jpg',
    imageAlt: 'Twitter image alt'
  }}
/>

Add deepMerge, a function that deeply merges the enumerable properties of two or more objects.

The use of the deepMerge function provided by this library is not mandatory, so you can continue to use whatever you like, but it is recommended because it reduces dependencies.

See Example for details on how to use it.

v3

+layout.svelte

<script>
  import { MetaTags } from 'svelte-meta-tags';
  import { page } from '$app/stores';
  import extend from 'just-extend'; // Use functions that allow deep merging of objects such as lodash.merge, deepmerge, and just-extend

  export let data;

  $: metaTags = extend(true, {}, data.baseMetaTags, $page.data.pageMetaTags);
</script>

<MetaTags {...metaTags} />

<slot />

v4

+layout.svelte

<script>
  import { MetaTags, deepMerge } from 'svelte-meta-tags';
  import { page } from '$app/stores';

  let { data, children } = $props();

  let metaTags = $derived(deepMerge(data.baseMetaTags, $page.data.pageMetaTags));
</script>

<MetaTags {...metaTags} />

{@render children()}

[fromaline]

Thanks for your work! Great package!

[cowboycodr]

What's the status on Svelte 5 support?

[oekazuma]

@cowboycodr
Even at this point, svelte-meta-tags works with Svelte 5 projects.
We plan to release a version with full support for Svelte 5 as soon as possible after Svelte 5 is officially released.