Generate JSON-LD structured data for an article page in Astro

Use the LayoutForArticle component to generate JSON-LD structured data for an article page in Astro, including the headline, description, author information, and more.

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
datePublished
Type
string
Required
required
Description
The publication date of the article.
Name
dateModified
Type
string
Required
required
Description
The last modification date of the article.
Name
authorName
Type
string
Required
required
Description
The name of the author of the article.
Name
authorUrl
Type
string
Required
required
Description
The URL of the author of the article.

Usage

Add the file to your project

Copy the LayoutForArticle.astro file to your project's layouts folder.

Edit the `siteConfig` object

Update the siteConfig object in the LayoutForArticle.astro file with your site's base URL, name and default URL of the Open Graph image.

LayoutForArticle.astro

const siteConfig: SiteConfig = {
  baseUrl: "https://novajs.dev",
  siteName: "Nova.js",
  defaultOgImg: "/og-default.png",
};

Import the `LayoutForArticle` component

Import the LayoutForArticle component into every article page where you want to generate metadata and the JSON-LD structured data.

src/pages/index.astro

---
import Layout from "../layouts/Layout.astro";
---

<LayoutForArticle
  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"
  datePublished="2024-01-06"
  dateModified="2025-01-06"
  authorName="Daniel Castillo"
  authorUrl="https://dlcastillop.com"
>
  <h1>Nova.js</h1>
</LayoutForArticle>