JSON-LD

JsonLd renders a <script type="application/ld+json"> block from a plain object, an array of objects, or a schema-dts typed object.

<script>
  import { JsonLd } from 'svelte-meta-tags';
</script>

<JsonLd
  schema={{
    '@type': 'Organization',
    name: 'Example Corp',
    url: 'https://www.example.com'
  }}
/>
<!-- outputs: <script type="application/ld+json">{"@context":"https://schema.org","@type":"Organization",...}</script> -->

@context: "https://schema.org" is added automatically — you never need to include it yourself.

output: “head” vs “body”

output defaults to "head", which renders the <script> tag inside <svelte:head>. Set output="body" to render it inline at the component’s location instead (useful when you need the structured data to appear at a specific point in the DOM, e.g. next to the content it describes):

<JsonLd output="body" schema={{ '@type': 'Organization', name: 'Example Corp' }} />

Multiple schemas

Pass an array to render multiple JSON-LD objects within the same <script> block, or wrap them in { '@graph': [...] } to represent them as a single linked graph instead of a plain array (recommended — some tools, like Safari, log a console error for the array form even though it works correctly). See JSON-LD Multiple Examples.

TypeScript support

This library uses schema-dts for the schema prop’s types, so every schema.org type — beyond the examples in this section — is available and type-checked. To discover available schema types, see Google’s Search Gallery.