SuperAPI AI 工具集

svelte-meta-tags-companion

前端与建站

查看项目

更新于 10-16 02:35

技能介绍

用途:这是 svelte-meta-tags 的参考技能,用于在编写或审查导入 MetaTags、JsonLd、deepMerge、defineBaseMetaTags、definePageMetaTags 的代码时,捕捉常见错误。它不是安装指南。

常见错误:一是在 SvelteKit 3 中从 $app/stores 导入 page,应改用 $app/state,并配合 Svelte 5 的 $props 与 $derived。二是手动浅合并或引入第三方深合并库,应使用库自带的 deepMerge;它会深合并嵌套对象(如 openGraph 各字段独立合并)、替换而非拼接数组(如 openGraph.images),并保留目标上已有的 Date 或函数。三是把合并对象当作 metaTags 属性传入,正确做法是展开为属性:<MetaTags {...metaTags} />。四是自行实现 Twitter/OpenGraph 回退链,MetaTags 内部已处理 twitter.title → openGraph.title → title。五是向 deepMerge 传超过两个对象,它只接受 (target, source),多余参数被忽略,应链式调用。

标签不渲染的原因:og:* 与 twitter:* 需要对应属性对象存在,仅设置 title 和 description 不会输出社交标签,需传入 openGraph={{}} 等。只设 titleTemplate 不会渲染 <title>,缺少 title 时整个 title 元素被跳过。additionalRobotsProps 中值为假值(如 0)的指令会被丢弃,-1 可用。robots={false} 会移除 robots 标签,与 additionalRobotsProps 同用时警告来自 $effect,SSR 时不显示。openGraph.image 是单图快捷方式,会前置到 images。

建议:load 函数返回普通对象可改用 defineBaseMetaTags/definePageMetaTags 以获得类型安全与不可变性,但这是可选项。