Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

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

License

NotificationsYou must be signed in to change notification settings

bentaylor2/react-structured-data

Repository files navigation

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 athttp://schema.org/.

Installation

Yarn

yarn add react-structured-data

NPM

npm install react-structured-data --save

Code Example

The following JSX:

<JSONLD><Productname="Product Name"><AggregateRatingratingValue={4.3}reviewCount={197}/><GenericCollectiontype="review"><Reviewname="It's awesome"reviewBody="This is Great! My family loves it"datePublished="11/22/1963"><Authorname="Jerry"/><Locationname="Chicago, IL"/><RatingratingValue={5}/></Review><Reviewname="Very cool"reviewBody="I like this a lot. Very cool product"datePublished="11/22/1963"><Authorname="Cool Carl"/><Locationname="Chicago, IL"/><RatingratingValue={4}/></Review></GenericCollection></Product></JSONLD>

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

<scripttype="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

PropTypeValueDescription
typeStringThe @type description in the json-ld body:"@type": "Product"
jsonldtypeStringThe value of the @type description in the json-ld body:"@type": "Product"
schemaObject (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

PropTypeValueDescription
dangerouslyExposeHtmlBooleanSet this to render the json within script tag usingdangerouslySetInnerHTML

Schema node PropTypes

PropTypeValueDescription
parentIDStringSets the id of the schema that becomes a reference that the children point to"@id": "product-x"
idStringsimilar 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><Generictype="review"jsonldtype="Review"schema={{name:"It is awesome",reviewBody:"This is great!"}}><Generictype="itemReviewed"jsonldtype="Product"schema={{"@id":"product-x"}}/><Generictype="author"jsonldtype="Person"schema={{name:"Cool Carl"}}/><Generictype="locationCreated"jsonldtype="AdministrativeArea"schema={{name:"Chicago, IL"}}/></Generic></JSONLD>

This will output (minified):

<scripttype="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, visithttps://developers.google.com/search/docs/guides/intro-structured-data, and alsohttp://schema.org/.You can also validate the structured data here:https://search.google.com/structured-data/testing-tool.

Contributors

TBA

License

MIT License

[8]ページ先頭
©2009-2025 Movatter.jp