[{"template":"item","lang":"en","langs":["en","zh-CN"],"summary":{"raw":"Using SvelteKit it is very easy to create web applications with SSR, but for SEO we need to add some metadata like JSON-LD to the page.This article will explain how to use JSON-LD in SvelteKit applications.","html":"

Using SvelteKit it is very easy to create web applications with SSR, but for SEO we need to add some metadata like JSON-LD to the page.This article will explain how to use JSON-LD in SvelteKit applications.

\n"},"visible":true,"routable":true,"title":"Using JSON-LD in SvelteKit Applications","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":"Dallas Lu","lang":"en","user":"dallaslu"}],"contributor":[],"sponsor":[],"image":[],"audio":[],"video":[],"photo":[],"content":{"html":"

\n\n

What is JSON-LD

JSON-LD is a data structure that uses the JSON format to describe the semantics of data. It is a format used to add structured data to web pages, which helps search engines to better understand the content of web pages. JSON-LD is a very important technique when it comes to SEO. JSON-LD\ndefines an embedded syntax for embedding structured data in HTML documents. Generally we use the data structure provided by Schema.org to describe the data.

Current Status of JSON-LD Use in SvelteKit

The +layout in SvelteKit adds a layout to each page. Adding JSON-LD data to the layout adds structured data to the structure of the entire site. Adding JSON-LD\ndata to a page adds structured data to the content of the page. But at the same time, JSON-LD data can be added to +page.svelte, which describes the content of the page. SvelteKit doesn't automatically handle the relationship between the two for us automatically, we need to work around this manually.

Practices for adding JSON-LD data to SvelteKit

We can pre-organize the JSON-LD data in +layout.ts and then add the JSON-LD data for the page in +page.svelte. This is a good solution to the problem of JSON-LD data. We can add in +page.svelte the JSON-LD output:

<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

Where ldjson is the generic JSON-LD data from the parent layout and creativeWork is the JSON-LD data for the current page. We can add our own JSON-LD data to the page and merge it into ldjson. This is a good solution to the JSON-LD data problem. In +layout.ts, you can:

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

Use schema-dts

In TypeScript, we can use Schema type definitions to describe JSON-LD data.This allows for better organization of JSON-LD data.We can use the schema-dts maintained by Google

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

Then use it in +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

Conclusion

Using JSON-LD in SvelteKit applications can help search engines better understand page content.We can pre-organize the JSON-LD data in +layout.ts and then add the JSON-LD data of the page in +page.svelte.This is a good solution to the problem of JSON-LD data.We can use schema-dts to better organize JSON-LD data. This can better describe the semantics of the data. Some of my previous reviews have used JSON-LD data, and my ratings have been shown in Google search results.

\n","headings":[{"level":2,"text":"What is JSON-LD","id":"what-is-json-ld"},{"level":2,"text":"Current Status of JSON-LD Use in SvelteKit","id":"current-status-of-json-ld-use-in-sveltekit"},{"level":2,"text":"Practices for adding JSON-LD data to SvelteKit","id":"practices-for-adding-json-ld-data-to-sveltekit"},{"level":2,"text":"Use schema-dts","id":"use-schema-dts"},{"level":2,"text":"Conclusion","id":"conclusion"}],"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/"}]

Tag: SvelteKit

Using JSON-LD in SvelteKit Applications

2024