Generate JSON-LD structured data for a FAQ page in Astro.

Use the LayoutForFaq component to generate the metadata and the JSON-LD structured data for a FAQ page 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
faqs
Type
Array<Object>
Required
required
Description
The list of FAQ entries.
Name
faqs[].question
Type
string
Required
required
Description
The question being answered.
Name
faqs[].answer
Type
string
Required
required
Description
The corresponding answer to the question.

Usage

Add the file to your project

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

Edit the `siteConfig` object

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

LayoutForFaq.astro

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

Import the `LayoutForFaq` component

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

src/pages/index.astro

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

<LayoutForFaq
  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"
  faqs={[
    {
      question: "What is Nova.js?",
      answer: "Nova.js is a collection of dependency-free React hooks.",
    },
    {
      question: "Is Nova.js free?",
      answer: "Yes, it's completely free and open-source.",
    },
  ]}
>
  <h1>Nova.js</h1>
</LayoutForFaq>