在 sveltekit 中向动态页面添加元标记

Question

我有一个用 Sveltekit an Sanity 构建的博客，主页的元标记有效，但是当我尝试在动态页面中使用元标记时，它们没有显示。 我尝试过 svelte:head 甚至 svelte-meta-tags 库

我的路线是站点名称/帖子/[slug]

这是我的动态页面：

<script lang="ts">
    import { PortableText } from '@portabletext/svelte';
    import { formatDate } from '$lib/utils';
    import { urlFor } from '$lib/utils/image';
    import type { PageData } from './$types';

    import SvelteSeo from 'svelte-seo';

    import { page } from '$app/stores';

    export let data: PageData;

    console.log('data', $page);
    console.log(data);
    
</script>
<SvelteSeo
    title={$page.data.title}
    description={$page.data.excerpt}
    canonical={`site.com/post/${$page.data.slug.current}`}
    openGraph={{
        url: `site.com/post/${$page.data.slug.current}`,
        title: $page.data.title,
        description: $page.data.excerpt,
        images: $page.data.mainImage ? [{ url: urlFor($page.data.mainImage).url() }] : [],
        site_name: 'Site'
    }}
    twitter={{
        title: $page.data.title,
        description: $page.data.excerpt,

        image: $page.data.mainImage ? urlFor($page.data.mainImage).url() : undefined
    }}
    keywords={$page.data.tags ?? [].join(', ')}
/>

<section>
...
</section>

请帮忙

Answer 1

尝试将 SEO 组件包装在

{#key}

块内。 https://svelte.dev/docs/logic-blocks#key 为了简单的解释，该指令用于高效更新 DOM 元素。

{#key $page.pathname.url}
   <SvelteSeo.../>
{/key}