SvelteKit动态页面meta标签不显示问题求助

针对你用SvelteKit+Sanity搭建博客时，动态页面（/post/[slug]）Meta标签不生效的问题，从你的代码里能看到几个关键问题，以下是具体修复方案：

1. 替换$page.data为组件的data变量 #

你已经通过export let data: PageData拿到了load函数返回的页面数据，没必要再用$page.data——后者在客户端hydration阶段可能存在数据延迟，导致Meta标签无法正确渲染。直接使用组件级的data变量更可靠：

<SvelteSeo
    title={data.title}
    description={data.excerpt}
    canonical={`https://site.com/post/${data.slug.current}`}
    openGraph={{
        url: `https://site.com/post/${data.slug.current}`,
        title: data.title,
        description: data.excerpt,
        images: data.mainImage ? [{ url: urlFor(data.mainImage).url() }] : [],
        site_name: 'Site'
    }}
    twitter={{
        title: data.title,
        description: data.excerpt,
        image: data.mainImage ? urlFor(data.mainImage).url() : undefined
    }}
    keywords={data.tags?.join(', ') ?? ''}
/>

2. 给URL添加完整协议 #

Canonical和OG的URL必须包含https://（或http://），否则浏览器和搜索引擎会识别为无效路径，导致Meta标签不生效。

3. 修复Keywords属性的写法 #

原代码中$page.data.tags ?? [].join(', ')的逻辑错误：如果tags不存在，你先返回空数组再join，结果是空字符串，但写法顺序不对。正确的写法是先判断tags是否存在，再执行join，不存在则返回空字符串。

4. 验证load函数的数据返回 #

确保+page.ts（或+page.server.ts）中的load函数正确从Sanity获取了所有需要的字段，示例如下：

// src/routes/post/[slug]/+page.ts
import { error } from '@sveltejs/kit';
import { client } from '$lib/sanity/client';

export async function load({ params }) {
    const post = await client.fetch(`
        *[_type == "post" && slug.current == $slug][0]{
            title,
            excerpt,
            slug,
            mainImage,
            tags
        }
    `, { slug: params.slug });

    if (!post) throw error(404, 'Post not found');

    return post;
}

5. 备选方案：使用原生svelte:head #

如果svelte-seo仍然不生效，可以直接用Svelte原生的svelte:head手动渲染Meta标签，确保SSR时正确输出：

<svelte:head>
    <title>{data.title} | Site</title>
    <meta name="description" content={data.excerpt} />
    <link rel="canonical" href={`https://site.com/post/${data.slug.current}`} />
    
    <!-- Open Graph -->
    <meta property="og:url" content={`https://site.com/post/${data.slug.current}`} />
    <meta property="og:title" content={data.title} />
    <meta property="og:description" content={data.excerpt} />
    {#if data.mainImage}
        <meta property="og:image" content={urlFor(data.mainImage).url()} />
    {/if}
    <meta property="og:site_name" content="Site" />

    <!-- Twitter Card -->
    <meta name="twitter:title" content={data.title} />
    <meta name="twitter:description" content={data.excerpt} />
    {#if data.mainImage}
        <meta name="twitter:image" content={urlFor(data.mainImage).url()} />
    {/if}
    
    <meta name="keywords" content={data.tags?.join(', ') ?? ''} />
</svelte:head>

6. 检查版本兼容性 #

确保你使用的svelte-seo版本支持当前的SvelteKit版本，建议安装最新兼容版：

npm install svelte-seo@latest

完成以上修复后，重启开发服务器，查看动态页面的Meta标签是否正常渲染。

内容的提问来源于stack exchange，提问作者dayo