React Structured Data provides an easy way to add structured data to your React apps
Home Page: https://bentaylor2.github.io/react-structured-data/
License: MIT License
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.
Would be cool with TypeScript typings.
Currently, React 16 is the major supported version of react in the peerDependencies.
Could you also add support for React 17?
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):
Additional context
I did notice a few tickets from February saying this was handled, the bug has resurfaced.
Describe the bug
A clear and concise description of what the bug is.
To Reproduce
react-helmet<Helmet> around <JSONLD> (or <Head> from next/head for no result)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
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">{"@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>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
Add new content types :
Article
Book
Course
Dataset
Event
Fast Check...
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
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'
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?
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>
Describe the bug
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
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):
Smartphone (please complete the following information):
Additional context
Add any other context about the problem here.
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"}}]]}
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:
"react-structured-data": "0.0.11",Uncaught [TypeError: Cannot read property 'type' of null]node_modules/react-structured-data/Expected behavior
I would expect the actual version 0.0.11 to be installed.
Desktop:
Unable to understand how to add JSONLD data for sitelinks searchbox using this module
Steps to reproduce the behavior:
Expected behaviour
We should be able to add any type of structured data in app, whatever is defined by google.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.