feat: add a property that allows selection of whether to output JSON-LD in the head or in the body

2025-12-11 20:15:14 +01:00 · 2022-03-13 00:20:55 +09:00 · 2022-03-13 00:20:55 +09:00 · 91c9c3861d
commit 91c9c3861d
parent d5a97215e1
7 changed files with 171 additions and 11 deletions
--- a/README.md
+++ b/README.md
@ -19,7 +19,7 @@ This library is inspired by [next-seo](https://github.com/garmeeh/next-seo)

 - [Installing](#-installing)
 - [Usage](#-usage)
- [Properties](#properties)
+- [MetaTags Properties](#metatags-properties)
  - [Twitter](#twitter)
  - [Facebook](#facebook)
  - [robotsProps](#robotsprops)
@ -35,6 +35,7 @@ This library is inspired by [next-seo](https://github.com/garmeeh/next-seo)
    - [Profile](#profile)
 - [JSON-LD](#json-ld)
  - [Using schema-dts](#using-schema-dts)
+  - [JSON-LD Properties](#json-ld-properties)
  - [JSON-LD Examples](#json-ld-examples)
    - [Article](#article)
    - [Breadcrumb](#breadcrumb)
@ -123,7 +124,7 @@ pnpm add -D svelte-meta-tags
 />
 ```

-### Properties
+### MetaTags Properties

 | Property                           | Type                    | Description                                                                                                                                                                                                                                                                                                                                           |
 | ---------------------------------- | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@ -564,6 +565,13 @@ It is also possible to use multiple `<JsonLd />` components in a single page.

 This plugin uses [schema-dts](https://github.com/google/schema-dts), so it also provides types other than the usage examples below.

+### JSON-LD Properties
+
+| Property | Type                  | Description                                                                                          |
+| -------- | --------------------- | ---------------------------------------------------------------------------------------------------- |
+| `output` | string (default head) | Sets whether json-ld is output to `<head>` or `<body>`. Possible values are either `head` or `body`. |
+| `schema` | Object                | Data in `ld+json` format. [See Examples](#json-ld-examples)                                          |
+
 ### JSON-LD Examples

 #### Article
--- a/cypress/integration/spec.js
+++ b/cypress/integration/spec.js
@ -512,14 +512,14 @@ describe('Svelte Meta Tags', () => {
    cy.get('head meta[name="twitter:card"]').should('have.attr', 'content', 'summary_large_image');
  });

-  it('JSON-LD SEO loads correctly', () => {
-    cy.visit('/jsonld');
-    cy.get('h1').should('contain', 'JSON-LD SEO');
-    cy.get('head title').should('contain', 'JSON-LD Page Title | Svelte Meta Tags');
+  it('JSON-LD Head SEO loads correctly', () => {
+    cy.visit('/jsonldHead');
+    cy.get('h1').should('contain', 'JSON-LD Head SEO');
+    cy.get('head title').should('contain', 'JSON-LD Head Page Title | Svelte Meta Tags');
    cy.get('head meta[name="description"]').should(
      'have.attr',
      'content',
-      'Description of JSON-LD page'
+      'Description of JSON-LD Head page'
    );
    cy.get('head meta[name="robots"]').should('have.attr', 'content', 'index,follow');
    cy.get('head meta[name="googlebot"]').should('have.attr', 'content', 'index,follow');
@ -582,6 +582,77 @@ describe('Svelte Meta Tags', () => {
      });
  });

+  it('JSON-LD Body SEO loads correctly', () => {
+    cy.visit('/jsonldBody');
+    cy.get('h1').should('contain', 'JSON-LD Body SEO');
+    cy.get('head title').should('contain', 'JSON-LD Body Page Title | Svelte Meta Tags');
+    cy.get('head meta[name="description"]').should(
+      'have.attr',
+      'content',
+      'Description of JSON-LD Body page'
+    );
+    cy.get('head meta[name="robots"]').should('have.attr', 'content', 'index,follow');
+    cy.get('head meta[name="googlebot"]').should('have.attr', 'content', 'index,follow');
+    cy.get('body')
+      .find('script[type="application/ld+json"]')
+      .should('have.length', 2)
+      .then((tags) => {
+        const breadcrumbJsonLD = JSON.parse(tags[0].innerHTML);
+        expect(breadcrumbJsonLD).to.deep.equal({
+          '@context': 'https://schema.org',
+          '@type': 'BreadcrumbList',
+          itemListElement: [
+            {
+              '@type': 'ListItem',
+              position: 1,
+              name: 'Books',
+              item: 'https://example.com/books'
+            },
+            {
+              '@type': 'ListItem',
+              position: 2,
+              name: 'Science Fiction',
+              item: 'https://example.com/books/sciencefiction'
+            },
+            {
+              '@type': 'ListItem',
+              position: 3,
+              name: 'Award Winners'
+            }
+          ]
+        });
+        const articleJsonLD = JSON.parse(tags[1].innerHTML);
+        expect(articleJsonLD).to.deep.equal({
+          '@context': 'https://schema.org',
+          '@type': 'NewsArticle',
+          mainEntityOfPage: {
+            '@type': 'WebPage',
+            '@id': 'https://google.com/article'
+          },
+          headline: 'Article headline',
+          image: [
+            'https://example.com/photos/1x1/photo.jpg',
+            'https://example.com/photos/4x3/photo.jpg',
+            'https://example.com/photos/16x9/photo.jpg'
+          ],
+          datePublished: '2015-02-05T08:00:00+08:00',
+          dateModified: '2015-02-05T09:20:00+08:00',
+          author: {
+            '@type': 'Person',
+            name: 'John Doe'
+          },
+          publisher: {
+            '@type': 'Organization',
+            name: 'Google',
+            logo: {
+              '@type': 'ImageObject',
+              url: 'https://google.com/logo.jpg'
+            }
+          }
+        });
+      });
+  });
+
  it('Types SEO loads correctly', () => {
    cy.visit('/types');
    cy.get('h1').should('contain', 'Types SEO');
--- a/src/lib/JsonLd.svelte
+++ b/src/lib/JsonLd.svelte
@ -1,11 +1,18 @@
 <script>
+  export let output = 'head';
  export let schema = undefined;
 </script>

 <svelte:head>
-  {#if schema}
+  {#if schema && output === 'head'}
    {@html `<script type="application/ld+json">${
      JSON.stringify({ '@context': 'https://schema.org', ...schema }) + '<'
    }/script>`}
  {/if}
 </svelte:head>
+
+{#if schema && output === 'body'}
+  {@html `<script type="application/ld+json">${
+    JSON.stringify({ '@context': 'https://schema.org', ...schema }) + '<'
+  }/script>`}
+{/if}
--- a/src/lib/types.d.ts
+++ b/src/lib/types.d.ts
@ -153,5 +153,6 @@ export interface MetaTagsProps {
 }

 export interface JsonLdProps {
+  output?: 'head' | 'body';
  schema?: Thing | WithContext<Thing>;
 }
--- a/src/routes/_Links.svelte
+++ b/src/routes/_Links.svelte
@ -21,7 +21,10 @@
    <a href="/profile"> Profile SEO </a>
  </li>
  <li>
-    <a href="/jsonld"> JSON-LD SEO </a>
+    <a href="/jsonldHead"> JSON-LD Head SEO </a>
+  </li>
+  <li>
+    <a href="/jsonldBody"> JSON-LD Body SEO </a>
  </li>
  <li>
    <a href="/types"> Types SEO </a>
--- a/src/routes/jsonldBody.svelte
+++ b/src/routes/jsonldBody.svelte
@ -0,0 +1,67 @@
+<script>
+  import { MetaTags, JsonLd } from 'svelte-meta-tags';
+</script>
+
+<MetaTags
+  title="JSON-LD Body Page Title | Svelte Meta Tags"
+  description="Description of JSON-LD Body page"
+/>
+
+<JsonLd
+  output="body"
+  schema={{
+    '@type': 'BreadcrumbList',
+    itemListElement: [
+      {
+        '@type': 'ListItem',
+        position: 1,
+        name: 'Books',
+        item: 'https://example.com/books'
+      },
+      {
+        '@type': 'ListItem',
+        position: 2,
+        name: 'Science Fiction',
+        item: 'https://example.com/books/sciencefiction'
+      },
+      {
+        '@type': 'ListItem',
+        position: 3,
+        name: 'Award Winners'
+      }
+    ]
+  }}
+/>
+
+<JsonLd
+  output="body"
+  schema={{
+    '@type': 'NewsArticle',
+    mainEntityOfPage: {
+      '@type': 'WebPage',
+      '@id': 'https://google.com/article'
+    },
+    headline: 'Article headline',
+    image: [
+      'https://example.com/photos/1x1/photo.jpg',
+      'https://example.com/photos/4x3/photo.jpg',
+      'https://example.com/photos/16x9/photo.jpg'
+    ],
+    datePublished: '2015-02-05T08:00:00+08:00',
+    dateModified: '2015-02-05T09:20:00+08:00',
+    author: {
+      '@type': 'Person',
+      name: 'John Doe'
+    },
+    publisher: {
+      '@type': 'Organization',
+      name: 'Google',
+      logo: {
+        '@type': 'ImageObject',
+        url: 'https://google.com/logo.jpg'
+      }
+    }
+  }}
+/>
+
+<h1>JSON-LD Body SEO</h1>
--- a/src/routes/jsonldHead.svelte
+++ b/src/routes/jsonldHead.svelte
@ -2,7 +2,10 @@
  import { MetaTags, JsonLd } from 'svelte-meta-tags';
 </script>

-<MetaTags title="JSON-LD Page Title | Svelte Meta Tags" description="Description of JSON-LD page" />
+<MetaTags
+  title="JSON-LD Head Page Title | Svelte Meta Tags"
+  description="Description of JSON-LD Head page"
+/>

 <JsonLd
  schema={{
@ -59,4 +62,4 @@
  }}
 />

-<h1>JSON-LD SEO</h1>
+<h1>JSON-LD Head SEO</h1>