[{"template":"item","lang":"zh-CN","langs":["en","zh-CN"],"summary":{"raw":"使用 SvelteKit 可以很轻松地创建 SSR 的网站应用，但是在 SEO 方面，我们需要在页面中添加一些元数据，比如 JSON-LD。本文将介绍如何在 SvelteKit 应用中使用 JSON-LD。","html":"

使用 SvelteKit 可以很轻松地创建 SSR 的网站应用，但是在 SEO 方面，我们需要在页面中添加一些元数据，比如 JSON-LD。本文将介绍如何在 SvelteKit 应用中使用 JSON-LD。

\n"},"visible":true,"routable":true,"title":"在 SvelteKit 应用中使用 JSON-LD","comment":{"enabled":true,"reply":true},"discuss":{"enabled":true},"keywords":["SvelteKit JSON-LD","JSON-LD"],"webmention":{"enabled":true,"accept":true,"callback":{"secret":{"hash":{"sha256":"44bb9da44b424c6dfc9233819e907029ff2ccdfaa89919d3696ddf8db7ff6647"}}}},"pingback":{"enabled":true,"accept":true},"slug":"json-ld-in-sveltekit-app","taxonomy":{"category":["Internet"],"tag":["SEO","SvelteKit"],"series":[]},"route":"/json-ld-in-sveltekit-app/","toc":{"enabled":true},"published":{"date":"2024-05-14 05:14"},"modified":{"date":"2024-05-14T07:45:47.304Z"},"data":{},"license":"CC-BY-NC-SA-4.0","author":[{"email":{"value":{"encrypted":"ODgyZjdiZDg4OTVmMjllOGZkNmFmYg==","algorithm":"aes-256-gcm","iv":"067f6d66f2ba5dd50c8443be"},"hash":{"md5":"8770854a9222b6bf1ee195220793bcf1"}},"url":"https://dallas.lu","name":"达拉斯・卢","lang":"zh-CN","user":"dallaslu"}],"contributor":[],"sponsor":[],"image":[],"audio":[],"video":[],"photo":[],"content":{"html":"

\n\n

JSON-LD 是什么

JSON-LD 是一种使用 JSON 格式的数据结构，用于描述数据的语义。它是一种用于在网页上添加结构化数据的格式，可以帮助搜索引擎更好地理解网页内容。在 SEO 方面，JSON-LD 是一种非常重要的技术。JSON-LD\n定义了一种嵌入式的语法，用于在 HTML 文档中嵌入结构化数据。一般我们使用 Schema.org 提供的数据结构来描述数据。

SvelteKit 中使用 JSON-LD 的现状

SvelteKit 中的 +layout 可以为每个页面添加一个 layout。在 layout 中添加 JSON-LD 数据，可以为整个网站的结构添加结构化数据。在页面中添加 JSON-LD\n数据，可以为页面的内容添加结构化数据。但与此同时， +page.svelte 中也可以添加 JSON-LD 数据，用于描述页面的内容。SvelteKit 并不能为我们自动处理二者之间的关系。我们需要手动解决这个问题。

在 SvelteKit 中添加 JSON-LD 数据的实践

我们可以在 +layout.ts 中预先组织 JSON-LD 数据，然后在 +page.svelte 中添加页面的 JSON-LD 数据。这样可以很好地解决 JSON-LD 数据的问题。我们可在 +page.svelte 中加入\nJSON-LD 的输出：

<script lang=\"ts\">\n    export let data;\n\n    $: ({ ldjson } = data);\n\n    let ldjson = () => {\n        let creativeWork = {\n            \"@context\": \"https://schema.org\",\n            \"@type\": \"CreativeWork\",\n            \"name\": \"Example Creative Work\",\n            \"author\": {\n                \"@type\": \"Person\",\n                \"name\": \"Jane Doe\"\n            }\n        };\n        return Object.assign({}, ldjson, creativeWork);\n    }\n</script>\n\n<svelte:head>\n    {@html `<script type=\"application/ld+json\">${JSON.stringify(\n        json(),\n    )}</script>`}\n</svelte:head>\n

其中 ldjson 是来自父级 layout 的通用 JSON-LD 数据，creativeWork 是当前页面的 JSON-LD 数据。我们可以在页面中添加自己的 JSON-LD 数据，然后合并到 ldjson 中。这样就可以很好地解决 JSON-LD 数据的问题。在 +layout.ts 中，可以:

import type { Load } from '@sveltejs/kit';\n\nexport const load: Load = async ({ fetch, params, depends, data }) => {\n\n    const ldjson: any = {\n        '@context': 'https://schema.org',\n    };\n\n    ldjson.issn = '1234-5678';\n\n    return { ldjson };\n}\n

使用 schema-dts

在 TypeScript 中，我们可以使用 Schema 类型定义来描述 JSON-LD 数据。这样可以更好地组织 JSON-LD 数据。我们可以使用由 Google 维护的 schema-dts

npm install -D --save schema-dts\n

然后在 +page.svelte 中使用：

import type {\n    WithContext,\n    Article as SchemeArticle,\n    Review,\n    CreativeWork,\n    WebPage,\n} from \"schema-dts\";\n\nlet post: any = {};\n\nlet json = () => {\n    \n    let creativeWork: CreativeWork = {\n        \"@type\": \"CreativeWork\",\n        headline: post.title,\n        image: post.image,\n        datePublished: new Date(post.date).toISOString(),\n        url: post.url,\n    };\n\n    if (post.authors) {\n        let author = post.authors.map((author: any) =>\n            Object.assign(\n                {\n                    \"@type\": \"Person\",\n                    name: author.name || author.account || author,\n                },\n                author.url\n                    ? {\n                          url: author.url,\n                      }\n                    : {},\n            ),\n        );\n        if (author.length === 1) {\n            author = author[0];\n        }\n        creativeWork.author = author;\n    }\n\n    if (post.modified?.date) {\n        creativeWork.dateModified = new Date(\n            post.modified.date,\n        ).toISOString();\n    }\n    if (post.summary) {\n        creativeWork.description = post.summary;\n    }\n\n    if (post.aggregateRating) {\n        creativeWork.aggregateRating = {\n            \"@type\": \"AggregateRating\",\n            ratingValue: post.aggregateRating.value,\n            reviewCount: post.aggregateRating.count,\n            bestRating: post.aggregateRating.best || 10,\n            worstRating: post.aggregateRating.worst || 1,\n        };\n    }\n\n    if (post.template == \"item\") {\n        if (post.review) {\n            creativeWork = Object.assign(creativeWork, {\n                \"@type\": \"Review\",\n                itemReviewed: {\n                    \"@type\": post.review.item?.type,\n                    name: post.review.item?.name,\n                    url: post.review.item?.url,\n                    image: post.review.item?.image,\n                },\n                reviewRating: {\n                    \"@type\": \"Rating\",\n                    ratingValue: post.review.rating,\n                    bestRating: 10,\n                    worstRating: 1,\n                },\n                reviewBody: post.review.body || post.summary,\n            } as Review);\n        } else {\n            creativeWork = Object.assign(creativeWork, {\n                \"@type\": \"Article\",\n            } as SchemeArticle);\n        }\n    } else if (post.template == \"links\") {\n        creativeWork = creativeWork as WithContext<CreativeWork>;\n    } else if (post.template == \"default\") {\n        creativeWork = Object.assign(creativeWork, {\n            \"@type\": \"WebPage\",\n        } as WebPage);\n    } else {\n        creativeWork = creativeWork as WithContext<CreativeWork>;\n    }\n\n    let schema: WithContext<any> = Object.assign(creativeWork, {\n        \"@context\": \"https://schema.org\",\n    });\n\n    return Object.assign({}, ldjson, schema);\n};\n

结语

在 SvelteKit 应用中使用 JSON-LD 可以帮助搜索引擎更好地理解网页内容。我们可以在 +layout.ts 中预先组织 JSON-LD 数据，然后在 +page.svelte 中添加页面的 JSON-LD 数据。这样可以很好地解决 JSON-LD 数据的问题。我们可以使用 schema-dts 来更好地组织 JSON-LD 数据。这样可以更好地描述数据的语义。我之前写的一些评测文章，也使用了 JSON-LD 数据，在 Google 的搜索结果中已经显示了我给出的评分数据。

\n","headings":[{"level":2,"text":"JSON-LD 是什么","id":"json-ld-是什么"},{"level":2,"text":"SvelteKit 中使用 JSON-LD 的现状","id":"sveltekit-中使用-json-ld-的现状"},{"level":2,"text":"在 SvelteKit 中添加 JSON-LD 数据的实践","id":"在-sveltekit-中添加-json-ld-数据的实践"},{"level":2,"text":"使用 schema-dts","id":"使用-schema-dts"},{"level":2,"text":"结语","id":"结语"}],"meta":{"prism":true},"links":[{"href":"https://www.npmjs.com/package/schema-dts","type":"mention"}]},"newer":"/is-the-internet-collapsing-and-then-what/","earlier":"/how-to-write-print-styles-for-webpages/"}]

标签: SvelteKit

在 SvelteKit 应用中使用 JSON-LD

2024