Svelte中动态社交分享卡片元标签无法被社交媒体识别的问题

问题根源 #

社交分享预览工具（比如OpenGraph检测）的爬虫不会执行前端JavaScript，只会抓取页面的原始HTML。你在开发者工具里看到的正常内容，是浏览器执行Svelte客户端代码后渲染出的DOM，但爬虫拿到的是页面加载时的初始HTML——这时候你的store变量还没被填充，所以显示undefined。

可行解决方案 #

1. 用SvelteKit的静态站点生成（SSG）或服务器端渲染（SSR）

这是最直接的解决办法，让页面在构建时（SSG）或请求时（SSR）就把博文数据注入到HTML里，生成静态的meta标签：

• 在博文页面的+page.server.js中编写数据加载逻辑，从Supabase获取博文内容：

export async function load({ params }) {
  const post = await supabase
    .from('posts')
    .select('title, description, cover_image')
    .eq('slug', params.slug)
    .single();
  
  return { post: post.data };
}

• 在+page.svelte的svelte:head里直接用预加载好的数据渲染meta标签，不需要{#await}或{#if}：

<svelte:head>
  <title>{data.post.title}</title>
  <meta property="og:title" content={data.post.title} />
  <meta property="og:description" content={data.post.description} />
  <meta property="og:image" content={data.post.cover_image} />
</svelte:head>

这样构建或请求时，meta标签就已经是填充好内容的静态HTML，爬虫能直接读取到。

2. 纯客户端渲染的补救方案（不推荐）

如果没法用SSG/SSR，只能做一个服务端中间件：当检测到是爬虫请求时，先从Supabase拉取对应博文的数据，动态生成包含正确meta标签的HTML返回。但这种方式需要额外的后端逻辑，维护成本高。

测试技巧 #

别用开发者工具的Elements面板验证，那是JS执行后的DOM。应该：

• 右键页面选「查看页面源代码」，看原始HTML里的meta标签是否有内容
• 用curl命令请求页面，比如curl https://your-blog.com/posts/xxx，查看返回的原始内容

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