bentaylor2 / react-structured-data

React Structured Data provides an easy way to add structured data to your React apps

React Structured Data

React Structured Data provides an easy way to add structured data to your React apps. Structured data is a standardized format for providing information about a page and classifying the page content. This library follows guidelines specified at http://schema.org/.

Installation

Yarn

yarn add react-structured-data

NPM

npm install react-structured-data --save

Code Example

The following JSX:

  <JSONLD>
    <Product name="Product Name">
      <AggregateRating ratingValue={4.3} reviewCount={197}/>
      <GenericCollection type="review">
        <Review name="It's awesome" reviewBody="This is Great! My family loves it" datePublished="11/22/1963">
          <Author name="Jerry"/>
          <Location name="Chicago, IL"/>
          <Rating ratingValue={5} />
        </Review>
        <Review name="Very cool" reviewBody="I like this a lot. Very cool product" datePublished="11/22/1963">
          <Author name="Cool Carl"/>
          <Location name="Chicago, IL"/>
          <Rating ratingValue={4} />
        </Review>
      </GenericCollection>
    </Product>
  </JSONLD>

will add the following to your markup (will be minified):

<script type="application/ld+json">
  {
    "@context":"https://schema.org/",
    "@type":"Product",
    "name":"Product Name",
    "aggregateRating": {
      "@type":"AggregateRating",
      "ratingValue":4.3,
      "reviewCount":197
    },
    "review":[
      {
        "@type":"Review",
        "datePublished":"11/22/1963",
        "reviewBody":"This is Great! My family loves it",
        "name":"It's awesome",
        "author": {
          "@type":"Person",
          "name":"Jerry"
        },
        "locationCreated": {
          "@type":"AdministrativeArea",
          "name":"Chicago, IL"
        },
        "reviewRating": {
          "@type": "Rating",
          "ratingValue": 5
        }
      },
      {
        "@type":"Review",
        "datePublished":"11/22/1963",
        "reviewBody":"I like this a lot. Very cool product",
        "name":"Very cool",
        "author":{
          "@type":"Person",
          "name":"Cool Carl"
        },
        "locationCreated": {
          "@type":"AdministrativeArea",
          "name":"Chicago, IL"
        },
        "reviewRating": {
          "@type": "Rating",
          "ratingValue": 4
        }
      }
    ]
  }
</script>

Reference

PropTypes

Generic Component PropTypes

PropType	Value	Description
type	String	The @type description in the json-ld body: "@type": "Product"
jsonldtype	String	The value of the @type description in the json-ld body: "@type": "Product"
schema	Object (json)	This should be the schema that you want for your structured data node: {name: "It is awesome", reviewBody: "This is great!"}

JSONLD node propTypes

PropType	Value	Description
dangerouslyExposeHtml	Boolean	Set this to render the json within script tag using dangerouslySetInnerHTML

Schema node PropTypes

PropType	Value	Description
parentID	String	Sets the id of the schema that becomes a reference that the children point to "@id": "product-x"
id	String	similar to parentID but uses the ID on itself

Preset Components

There are several preset schema components that can be used

• AggregateRating
• Answer
• Author
• ItemReviewed
• Location
• Product
• Question
• Rating
• Review

If you would like to use a component that is not listed, simply use the Generic component and add the prop jsonldtype. Generic and GenericCollection allow you to add your own structured data type.

For example, If Review preset didn't exist, you could write:

<JSONLD>
  <Generic type="review" jsonldtype="Review" schema={{name: "It is awesome", reviewBody: "This is great!"}}>
    <Generic type="itemReviewed" jsonldtype="Product" schema={{"@id":"product-x"}} />
    <Generic type="author" jsonldtype="Person" schema={{name: "Cool Carl"}}/>
    <Generic type="locationCreated" jsonldtype="AdministrativeArea" schema={{name: "Chicago, IL"}}/>
  </Generic>
</JSONLD>

This will output (minified):

<script type="application/ld+json">
  {
    "@context": "http://schema.org/",
    "@type": "Review",
    "name": "It is awesome",
    "reviewBody": "This is great!",
    "itemReviewed": {
      "@type": "Product",
      "@id": "product-x"
    },
    "author": {
      "@type": "Person",
      "name": "Cool Carl"
    },
    "locationCreated": {
      "@type": "AdministrativeArea",
      "name": "Chicago, IL"
    }
  }
</script>

This may seem not as ideal as using the presets, but this allows completely customizable structured data. There will also be more preset components to come in future releases to make implementation easier so stay tuned!

Structured Data and Schema.org

For more information on Structured data, visit https://developers.google.com/search/docs/guides/intro-structured-data, and also http://schema.org/. You can also validate the structured data here: https://search.google.com/structured-data/testing-tool.

Contributors

TBA

License

MIT License

react-structured-data's Issues

return encoded data i.e &quote;

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Unable to understand how to add JSONLD data for sitelinks searchbox using this module

Unable to understand how to add JSONLD data for sitelinks searchbox using this module

Steps to reproduce the behavior:

1. Try to add sitelink searchbox in reacts application using json ld.
2. Using this library couldn't find a way to add it

Expected behaviour
We should be able to add any type of structured data in app, whatever is defined by google.

Can't add schema to <head>

Describe the bug
A clear and concise description of what the bug is.

To Reproduce

1. Use Next.js stack with react-helmet
2. Wrap <Helmet> around <JSONLD> (or <Head> from next/head for no result)
3. Error: You may be attempting to nest <Helmet> components within each other, which is not allowed. Refer to our API for more information.

Expected behavior
I'd like to add the schema to my

GenericCollection jsonldtype not being applied

When using a GenericCollection the jsonldtype doesn't seem to get applied. In my example i'm trying to add a collection of HowTo steps like this:

<GenericCollection type="step" jsonldtype="HowToStep">
    <Generic type="itemListElement" jsonldtype="HowToDirection" schema={{ name: attributes.schemaObject.steps[0].attributes.title, text: attributes.schemaObject.steps[0].attributes.content }} />
    <Generic type="itemListElement" jsonldtype="HowToDirection" schema={{ name: attributes.schemaObject.steps[1].attributes.title, text: attributes.schemaObject.steps[1].attributes.content }} />
    <Generic type="itemListElement" jsonldtype="HowToDirection" schema={{ name: attributes.schemaObject.steps[2].attributes.title, text: attributes.schemaObject.steps[2].attributes.content }} />
</GenericCollection>

But the generated schema is missing the 'HowToStep` type on the step:

{"@context":"https://schema.org/","@type":"HowTo","name":"retgretg","step":[[{"itemListElement":{"@type":"HowToDirection","name":"ertgretg","text":"ertretg tgrtg"}},{"itemListElement":{"@type":"HowToDirection","name":"ertgretg","text":"ertgrtg"}},{"itemListElement":{"@type":"HowToDirection","name":"ertgrtg","text":"ertgretgertgertgretg tyhtyh"}}]]}

React 17 support

Currently, React 16 is the major supported version of react in the peerDependencies.
Could you also add support for React 17?

<JSONLD> - how to put id attribute to <script> tag

Hi,

is there any solution how to write <JSONLD> or some <Generic> to put id into <script> tag to look like this
<script id="some-id" type="application/ld+json">
</script>

TypeScript typings?

Would be cool with TypeScript typings.

SSR showing quotes as unicode quote

Hi Ben -

So far it's been great for easily setting up the structured data for a page in React.

When we inspect the page where this is being utilised it shows the structured data correctly - however, (and I'm not sure if this is an issue as such) we noticed that when using SSR and we view the page source where tool is being used, the quotes in our structured data gets output as Unicode i.e. "

We've written our React component as such:

import React from 'react';
import { JSONLD, Generic } from 'react-structured-data';

const StructuredData = (props) =>  {

  let image = !image ? `https:${props.stageImage}` : `https:${props.office.images[0]}`;
  return (
  
    <JSONLD>
      <Generic type="LocalBusiness" 
        jsonldtype="LocalBusiness" 
        schema={{
          name: props.office.name,
          telephone: props.office.generalNumber,
          openingHours: props.office.openingHours,
          image
        }}>
        <Generic type="address" 
          jsonldtype="PostalAddress"
          schema={{
            streetAddress: props.office.listedAddress2.streetAddress,
            addressCountry: props.office.listedAddress2.country,
            addressLocality: props.office.listedAddress2.addressLocality,
            postalCode: props.office.listedAddress2.postalCode
          }} />
      </Generic>
    </JSONLD>
  );
};
export default StructuredData;

when we inspect the page it looks like this:

<script type="application/ld+json">{"@context":"http://schema.org/","@type":"LocalBusiness","name":"Barcelona","telephone":"933 67 26 00 ","openingHours":"Lunes a Viernes: 09:30 a 20:00","image":"https://mediaqa.ef.com/~/media/centralefcom/contact/ef-headquarters2.png","address":{"@type":"PostalAddress","streetAddress":"Carrer de Balmes 157","addressCountry":"España","addressLocality":"Barcelona","postalCode":"08008"}}</script>

and view page source it looks like this:

<script type="application/ld+json">{&quot;@context&quot;:&quot;http://schema.org/&quot;,&quot;@type&quot;:&quot;LocalBusiness&quot;,&quot;name&quot;:&quot;Barcelona&quot;,&quot;telephone&quot;:&quot;933 67 26 00 &quot;,&quot;openingHours&quot;:&quot;Lunes a Viernes: 09:30 a 20:00&quot;,&quot;image&quot;:&quot;https://mediaqa.ef.com/~/media/centralefcom/contact/ef-headquarters2.png&quot;,&quot;address&quot;:{&quot;@type&quot;:&quot;PostalAddress&quot;,&quot;streetAddress&quot;:&quot;Carrer de Balmes 157&quot;,&quot;addressCountry&quot;:&quot;España&quot;,&quot;addressLocality&quot;:&quot;Barcelona&quot;,&quot;postalCode&quot;:&quot;08008&quot;}}</script>

If I'm not mistaken and according to our SEO team they say that this will be ignored by Google crawlers, making our SEO on the necessary page, redundant.

Any help would be much appreciated!
Gareth

Update http://schema.org references to https://schema.org, or ability to specify protocol

Is your feature request related to a problem? Please describe.
Not really. My Google Chrome testing tool is looking for "@context": "https://schema.org", rather than http. Schema.org is officially https at the moment. https://schema.org/docs/faq.html#19

Describe the solution you'd like
While http://schema.org is totally fine for the unforeseeable future, https is pretty much standard and required today, so it'd be cool if maybe we could add a prop to the main component, like this: <JSONLD protocol="https">, or maybe set https as the default, but allow someone to manually set http as the protocol, in case there are any mixed content issues.

Describe alternatives you've considered
I've just edited the output to be https for my testing tool, or use Google's testing tool which doesn't care.

Additional context
https://schema.org/docs/faq.html#19

Bundle code not up to date

Describe the bug
There seems to be a problem with the bundling or deployment of this package.

The code I downloaded from the yarn registry does not seem to be the version I have installed.

I installed version 0.0.11, but when I look at the source in my npm_modules, it seems to be from an older version, because the fix of #9 is not there. The source of JSONAbstractNode's getChildJSON function shows the following:

_createClass(JSONLDAbstractNode, [{
    key: 'getChildJSON',
    value: function getChildJSON(child, isCollection) {
      var ChildClass = child.type;

      var _child$props = child.props,
          children = _child$props.children,
          type = _child$props.type,
          id = _child$props.id,
          parentID = _child$props.parentID,
          schema = _objectWithoutProperties(_child$props, ['children', 'type', 'id', 'parentID']);

      if (!!parentID) schema = { '@id': parentID };
      if (!!id) schema = _extends({}, schema, {
        "@id": id
      });
      var newChildren = new ChildClass(child.props).getJSON(!!type || isCollection, schema);
      return !!type ? _extends(_defineProperty({}, type, newChildren)) : newChildren;
    }
  }

The line

if(!child) return '';

is missing! But it should be there since version 0.0.10...

The yarn.lock file says I have version 0.0.11 installed, and also the node_modules/react-structured-data/package.json says "version": "0.0.11". So I'm pretty sure, that's not the problem.

To Reproduce
Steps to reproduce the behavior:

1. Install "react-structured-data": "0.0.11",
2. Try to conditionally render children
3. See error Uncaught [TypeError: Cannot read property 'type' of null]
4. Look at source in node_modules/react-structured-data/

Expected behavior
I would expect the actual version 0.0.11 to be installed.

Desktop:

• OS: macOS 10.14.2
• Package manager: Yarn

How to write import statement

Is your feature request related to a problem? Please describe.
Documentation request

Describe the solution you'd like
An example including import statement
Describe alternatives you've considered

Additional context
Getting errors like "Product is not defined" when using the following import statement
import JSONLD from 'react-structured-data'

Unable to conditionally render child components

Describe the bug
I understand this has been touched on in the past, but it's still occurring in .13.

When generating content and rendering it via {variableName}, the content does not render and yields: **
**

To Reproduce
Steps to reproduce the behavior:

<JSONLD>
              <Generic type="thing" jsonldtype="Thing" schema={{ url: link, image, description: overview, name }} />
              {products}
</JSONLD>

where products is an array generated like:

var products = []
for(var i = 0; i < itemCount; i++){
      let product = (<Product>
            <AggregateRating ratingCount={ratingCount} bestRating={bestRating} worstRating={worstRating} ratingValue={ratingValue} reviewCount={reviewCount}  />
      </Product>)
      products.push(product)
}

Expected behavior
This should render out all of the components.

Desktop (please complete the following information):

• OS: MacOS
• Browser Chrome
• Version 75

Additional context
I did notice a few tickets from February saying this was handled, the bug has resurfaced.

Unable to conditionally render child components

In the given example:

<Generic type="localBusiness" jsonldtype="LocalBusiness" schema={localBusinessSchema}>
{ratingCount > 0 && <AggregateRating ratingCount={ratingCount} ratingValue={ratingValue} />}
</Generic>

The following error gets thrown:

Cannot read property 'children' of undefined

I think this should be permissible as certain schemas (e.g. aggregate rating) should not be rendered if there are no ratings, but there are currently no ways of conditionally rendering it.

Add new content types

Add new content types :
Article
Book
Course
Dataset
Event
Fast Check...

Possible from CSR

I've implemented this on a react application. Everything is working fine, but testing with google search tool doesn't actually show any scripts. I've determined that this is likely because my frontend is client side rendered instead of server side. Is it possible to use this with a CSR style app or must it be server side. I imagine google is getting a bit smarter about checking sites with Javascript, but doesn't seem like this tool tests for that yet?