Generate JSON-LD structured data for a breadcrumb page in Astro
Use the LayoutForBreadcrumb component to generate JSON-LD structured data for a breadcrumb navigation list in Astro.
Props
- Name
title- Type
- string
- Required
- required
- Description
The title of the page.
- Name
description- Type
- string
- Required
- required
- Description
The description of the page.
- Name
pageRoute- Type
- string
- Required
- required
- Description
The URL route for the page.
- Name
ogImg- Type
- string
- Description
The URL of the Open Graph image.
- Name
itemList- Type
- Array<Object>
- Required
- required
- Description
The list of breadcrumb items.
- Name
itemList[].name- Type
- string
- Required
- required
- Description
The name of the breadcrumb item.
- Name
itemList[].item- Type
- string
- Required
- required
- Description
The URL of the breadcrumb item.
Usage
Add the file to your project
Copy the LayoutForBreadcrumb.astro file to your project's layouts folder.
Edit the siteConfig object
Update the siteConfig object in the LayoutForBreadcrumb.astro file with your site's base URL, name and default URL of the Open Graph image.
LayoutForBreadcrumb.astro
const siteConfig: SiteConfig = {
baseUrl: "https://novajs.dev",
siteName: "Nova.js",
defaultOgImg: "/og-default.png",
};
Import the LayoutForBreadcrumb component
Import the LayoutForBreadcrumb component into every article page where you want to generate metadata and the JSON-LD structured data.
src/pages/index.astro
---
import LayoutForBreadcrumb from "../layouts/LayoutForBreadcrumb.astro";
---
<LayoutForBreadcrumb
title="Nova.js - A collection of dependency-free React hooks"
description="Carefully developed React hooks that you can copy and paste into your project."
pageRoute="/"
ogImg="/og-landing.png"
itemList={[
{ name: "useArray", item: "https://novajs.dev/react-hook-array" },
{ name: "useAsync", item: "https://novajs.dev/react-hook-async" },
]}
>
<h1>Nova.js</h1>
</LayoutForBreadcrumb>