https://github.com/ryohidaka/react-breadcrumbs-jsonld

Dynamically generates JSON-LD structured for breadcrumbs in React.
https://github.com/ryohidaka/react-breadcrumbs-jsonld

json-ld react react-component schema-org seo

Last synced: about 1 month ago
JSON representation

Dynamically generates JSON-LD structured for breadcrumbs in React.

• Host: GitHub
• URL: https://github.com/ryohidaka/react-breadcrumbs-jsonld
• Owner: ryohidaka
• License: mit
• Created: 2024-01-10T10:41:50.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-11-01T18:38:16.000Z (about 2 months ago)
• Last Synced: 2024-11-10T23:37:36.602Z (about 1 month ago)
• Topics: json-ld, react, react-component, schema-org, seo
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-breadcrumbs-jsonld
• Size: 683 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-breadcrumbs-jsonld

[![npm version](https://badge.fury.io/js/react-breadcrumbs-jsonld.svg)](https://badge.fury.io/js/react-breadcrumbs-jsonld)

[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)

## Overview

Dynamically generates JSON-LD structured for breadcrumbs in React.

## Installation

You can install this library using npm:

```shell

npm install react-breadcrumbs-jsonld

```

## Usage

- `url` must be an absolute path.

  - Must begin with either `http` or `https`.

- URLs must be recursively nested.

### Example

```tsx

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 (

    <>

      

    >

  );

}

```

### Output

```html

  {

    "@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"

        }

      }

    ]

  }

```

### Schema.org Test Result



## Link

- [Breadcrumb (BreadcrumbList) structured data](https://developers.google.com/search/docs/appearance/structured-data/breadcrumb)

- [Schema.org](http://schema.org/)

- [schema-dts](https://github.com/google/schema-dts)

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.