在 SvelteKit 应用中使用 JSON-LD
内容提要
本文介绍如何在SvelteKit应用中使用JSON-LD提升SEO。通过+layout.ts组织通用数据，在+page.svelte合并页面特定数据，并利用schema-dts类型定义增强结构化描述，帮助搜索引擎理解内容。
延伸解读
布局与页面数据合并
在 SvelteKit 中，+layout.ts 负责提供全站通用的 JSON-LD 数据，而 +page.svelte 则负责页面特有的数据。通过手动合并，可以避免重复定义公共字段，同时确保每个页面都有完整的结构化数据。这种模式适合需要统一品牌信息或站点级属性的场景，但需注意合并时的优先级，避免覆盖关键字段。
schema-dts 的类型安全
使用 schema-dts 可以为 JSON-LD 提供 TypeScript 类型定义，减少拼写错误和结构错误。文章展示了如何根据页面模板动态调整类型（如 Article、Review、WebPage），这有助于保持数据的一致性。但需注意，类型定义并不保证数据完全符合 Schema.org 规范，仍需手动验证输出。
动态数据的处理
文章中的示例根据文章内容动态生成 JSON-LD，包括作者、日期、评分等。这要求数据源（如 CMS）提供准确的字段。若数据缺失或格式不正确，可能导致结构化数据不完整，影响搜索引擎展示。建议在生成前进行数据校验，并设置合理的默认值。
Q&A
JSON-LD 是什么？在 SEO 中有什么作用？
JSON-LD 是一种使用 JSON 格式的数据结构，用于描述数据的语义，是用于在网页上添加结构化数据的格式。它可以帮助搜索引擎更好地理解网页内容，是 SEO 中非常重要的技术。
在 SvelteKit 中如何组织 JSON-LD 数据？
可以在 +layout.ts 中预先组织通用的 JSON-LD 数据，然后在 +page.svelte 中添加页面特定的 JSON-LD 数据，并通过合并的方式将两者结合，从而解决 SvelteKit 不自动处理二者关系的问题。
如何在 SvelteKit 的 +page.svelte 中输出 JSON-LD？
在 +page.svelte 中，可以通过 <svelte:head> 标签输出 JSON-LD，例如：<svelte:head>{@html `<script type="application/ld+json">${JSON.stringify(json())}</script>`}</svelte:head>，其中 json() 函数返回合并后的 JSON-LD 对象。
schema-dts 是什么？如何在 SvelteKit 中使用它？
schema-dts 是由 Google 维护的 TypeScript 类型定义库，用于描述 JSON-LD 数据。在 SvelteKit 中，可以通过 npm install -D --save schema-dts 安装，然后在 +page.svelte 中导入类型（如 WithContext, Article, Review 等）来增强 JSON-LD 数据的类型安全。
在 SvelteKit 中，如何合并 layout 和页面级别的 JSON-LD 数据？
在 +layout.ts 中返回通用的 ldjson 数据，在 +page.svelte 中通过 data 获取该数据，然后使用 Object.assign({}, ldjson, creativeWork) 将页面特定的 JSON-LD 数据合并到通用数据上，最终输出合并后的 JSON-LD。
使用 JSON-LD 对 SvelteKit 应用的 SEO 有什么实际好处？
使用 JSON-LD 可以帮助搜索引擎更好地理解网页内容，提升 SEO。例如，文章中提到作者之前写的评测文章使用 JSON-LD 后，在 Google 搜索结果中显示了评分数据，这有助于提高搜索结果的丰富性和点击率。
