From 91c9c3861d5cc9168a6b3d90c2cf734f5c03f890 Mon Sep 17 00:00:00 2001 From: "oe.kazuma" Date: Sun, 13 Mar 2022 00:20:55 +0900 Subject: [PATCH] feat: add a property that allows selection of whether to output JSON-LD in the head or in the body --- README.md | 12 ++- cypress/integration/spec.js | 81 +++++++++++++++++-- src/lib/JsonLd.svelte | 9 ++- src/lib/types.d.ts | 1 + src/routes/_Links.svelte | 5 +- src/routes/jsonldBody.svelte | 67 +++++++++++++++ .../{jsonld.svelte => jsonldHead.svelte} | 7 +- 7 files changed, 171 insertions(+), 11 deletions(-) create mode 100644 src/routes/jsonldBody.svelte rename src/routes/{jsonld.svelte => jsonldHead.svelte} (89%) diff --git a/README.md b/README.md index 3292cb0..7feac94 100644 --- 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 `` 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 `` or ``. Possible values are either `head` or `body`. | +| `schema` | Object | Data in `ld+json` format. [See Examples](#json-ld-examples) | + ### JSON-LD Examples #### Article diff --git a/cypress/integration/spec.js b/cypress/integration/spec.js index 4100ad4..4a94901 100644 --- 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'); diff --git a/src/lib/JsonLd.svelte b/src/lib/JsonLd.svelte index ec10d9a..70dd4d5 100644 --- a/src/lib/JsonLd.svelte +++ b/src/lib/JsonLd.svelte @@ -1,11 +1,18 @@ - {#if schema} + {#if schema && output === 'head'} {@html ` + + + + + + + +

JSON-LD Body SEO

diff --git a/src/routes/jsonld.svelte b/src/routes/jsonldHead.svelte similarity index 89% rename from src/routes/jsonld.svelte rename to src/routes/jsonldHead.svelte index 984e5f3..f452d08 100644 --- a/src/routes/jsonld.svelte +++ b/src/routes/jsonldHead.svelte @@ -2,7 +2,10 @@ import { MetaTags, JsonLd } from 'svelte-meta-tags'; - + -

JSON-LD SEO

+

JSON-LD Head SEO