Generate JSON-LD structured data for a product page in Astro.
Use the LayoutForProduct component to generate the metadata and the JSON-LD structured data for a product page in Astro, including the name, description, and image.
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
image- Type
- string
- Required
- required
- Description
The URL of an image representing the product.
Usage
Add the file to your project
Copy the LayoutForProduct.astro file to your project's layouts folder.
Edit the siteConfig object
Update the siteConfig object in the LayoutForProduct.astro file with your site's base URL, name and default URL of the Open Graph image.
LayoutForProduct.astro
const siteConfig: SiteConfig = {
baseUrl: "https://novajs.dev",
siteName: "Nova.js",
defaultOgImg: "/og-default.png",
};
Import the LayoutForProduct component
Import the LayoutForProduct component into every article page where you want to generate metadata and the JSON-LD structured data.
src/pages/index.astro
---
import LayoutForProduct from "../layouts/LayoutForProduct.astro";
---
<LayoutForProduct
title="Nova.js"
description="A modern collection of dependency-free React hooks."
pageRoute="/"
ogImg="/og-landing.png"
image="https://novajs.dev/logo.png"
>
<h1>Nova.js</h1>
</LayoutForProduct>