用途:在 Svelte/SvelteKit 项目中首次添加 svelte-meta-tags,以支持 SEO、meta 标签、Open Graph(OGP)与社交预览。
主要能力与用法:
- 安装:先检查 package.json 是否已含该包;未含则按项目锁文件选择命令,pnpm-lock.yaml 用 pnpm add -D svelte-meta-tags;package-lock.json 用 npm install --save-dev svelte-meta-tags;yarn.lock 用 yarn add --dev svelte-meta-tags;bun.lock 或 bun.lockb 用 bun add --dev svelte-meta-tags。无锁文件时回退看 packageManager 字段,仍无则询问而非猜测。作为 dev dependency 安装,组件编译进应用,运行时无需该包。
- 判断是否 SvelteKit:检查 package.json 中的 @sveltejs/kit 与 src/routes/。非 SvelteKit 项目直接 import { MetaTags } 并传 props,不引入 deepMerge、defineBaseMetaTags、definePageMetaTags。
- SvelteKit:在 src/routes/+layout.ts(或 +layout.server.ts)用 defineBaseMetaTags 返回基础标签,已有 load 返回数据时合并而非覆盖。
- 嵌套布局:用 deepMerge 链式组合,而非重复 defineBaseMetaTags;若嵌套布局覆盖 baseMetaTags,需从 page.data.baseMetaTags 读取。
- 页面级:在 +page.ts 或 +page.server.ts 用 definePageMetaTags 返回覆盖,仅需要的路由添加。
- 在 +layout.svelte 中从 $app/state 导入 page(非 $app/stores),用 deepMerge 合并后传给 MetaTags 并渲染 children。
- JSON-LD 可选:<JsonLd schema={...} /> 为独立组件,细节见 https://oekazuma.github.io/svelte-meta-tags/json-ld/,不在本流程内设计 schema。
- 校验:运行项目类型检查命令(如 pnpm check、svelte-check)确认无新错误。
限制:仅面向 Svelte/SvelteKit;官网未提供收费、平台、效果等信息;未提及运行时依赖与具体版本要求,暂未提供。