Dynamically generates JSON-LD structured for breadcrumbs in React.
You can install this library using npm:
npm install react-breadcrumbs-jsonld-
urlmust be an absolute path.- Must begin with either
httporhttps.
- Must begin with either
- URLs must be recursively nested.
import { BreadcrumbSchema, BreadcrumbItem } from "react-breadcrumbs-jsonld";
function App() {
const breadcrumbs: BreadcrumbItem[] = [
{ url: "https://example.com/", name: "Home" },
{ url: "https://example.com/product/", name: "Products" },
{ url: "https://example.com/product/hoge", name: "Hoge" },
];
return (
<>
<BreadcrumbSchema breadcrumbs={breadcrumbs} />
</>
);
}<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"item": {
"@id": "https://example.com/",
"name": "Home"
}
},
{
"@type": "ListItem",
"position": 2,
"item": {
"@id": "https://example.com/product/",
"name": "Products"
}
},
{
"@type": "ListItem",
"position": 3,
"item": {
"@id": "https://example.com/product/hoge",
"name": "Hoge"
}
}
]
}
</script>
This project is licensed under the MIT License - see the LICENSE file for details.