react-schema-markup
is a simple and flexible Node package that allows React developers to easily generate structured data for Google Search and other search engines. It provides React components for various schema types, helping you to enrich your website with structured data and enhance your presence in search results, including rich results like carousels, product listings, and more.
This package aims to streamline the integration of Google's Structured Data into your React app with pre-built React components that generate valid JSON-LD markup.
- Easy to Use: Integrates seamlessly with React, with no extra setup or boilerplate.
-
Supports Multiple Schema Types: Provides components for various types of structured data (e.g.,
Product
,Breadcrumb
,FAQ
, etc.). - SEO-Optimized: Helps improve your website's visibility in search engines with structured data, enabling rich snippets, carousels, and more.
- Fully Customizable: You can customize the schema data for your specific needs while using the components.
- Small & Lightweight: The package is optimized for performance with minimal dependencies.
- Automatic Breadcrumbs: Using the will automatically generate breadcrumb schema data for your website.
You can install react-schema-markup
via npm or yarn:
npm install react-schema-markup
Here are some of the schema types that react-schema-markup currently supports:
The below are clientside only:
- Breadcrumbs
- Photos
You can easily integrate any of these schema types into your React components by importing the respective components from react-schema-markup.
There are more to come!
Each component in react-schema-markup accepts props that are used to populate the structured data in JSON-LD format.
Below is an example of RichBreadCrumbs
.
For more examples and usages please see the tests folder.
Each component takes a Wrapper component ScriptWrap
this is to allow to pass in custom scrip tags:
import Script from 'next/script'
import { RichBreadCrumbs } from 'react-schema-markup'
...
<RichBreadCrumbs ScriptWrap={Script} />
RichBreadCrumbs
Component
The Breadcrumbs component generates structured breadcrumb data for a website.
import { RichBreadCrumbs } from 'react-schema-markup'
...
<RichBreadCrumbs/>
Given this url: https://www.example.com/tester/big/spender
This will produce:
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://www.example.com"
},
{
"@type": "ListItem",
"position": 2,
"name": "Tester",
"item": "https://www.example.com/tester"
},
{
"@type": "ListItem",
"position": 3,
"name": "Big",
"item": "https://www.example.com/tester/big"
},
{
"@type": "ListItem",
"position": 4,
"name": "Spender",
"item": "https://www.example.com/tester/big/spender"
}
]
}
Given this url which has a locale of en: https://www.example.com/en/tester
This will produce:
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://www.example.com/en"
},
{
"@type": "ListItem",
"position": 2,
"name": "Tester",
"item": "https://www.example.com/en/tester"
}
]
}
Props:
-
supportedLocales
(string[]): Optional parameter, to take into consideration locales. -
includeTrailingSlash
(boolean): By default this is false.
If your url is like: https://www.example.com/subdirectory/cat
and you expect it to return:
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://www.example.com"
},
{
"@type": "ListItem",
"position": 2,
"name": "Cat",
"item": "https://www.example.com/subdirectory/cat"
}
]
}
Then this isn't for you and you're not invited to my birthday party, sort your directories out.
I welcome contributions to improve this project! If you’d like to contribute:
Fork the repository.
- Clone your fork and create a new branch for your feature or bugfix.
- Install dependencies and make your changes.
- Write tests for new features and ensure all tests pass and that the test data is not in the least bit professional.
- Open a pull request with a clear description of your changes.