1. Objective
Automatically generate and inject a JSON-LD FAQPage schema into the <head> of any page that utilizes the FAQ/Accordion component. The data must be synchronized with the actual content displayed in the UI.
2. Data Source
The script must pull data from the same source used to render the FAQ UI components (e.g., a .json file, a Content Collection in Astro, or a CMS).
Required Fields:
question: The string displayed in the accordion header.
answer: The string (or HTML) displayed in the accordion body.
3. Implementation Logic
A. Architecture (Recommended for Astro/Vue)
Instead of scraping the DOM, the schema should be generated during the Build Phase (SSG).
- Component Level: Create a helper function or a dedicated SEO component (e.g., SchemaFAQ.astro).
- Logic: Loop through the array of FAQ items and format them into the Schema.org JSON structure.
- Injection: Use the
<script type="application/ld+json"> tag.
// Function to format the FAQ items function generateFAQSchema(faqData) { const schema = { "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": faqData.map(item => ({ "@type": "Question", "name": item.question, "acceptedAnswer": { "@type": "Answer", "text": stripHtmlTags(item.answer) // Clean HTML if necessary } })) }; return JSON.stringify(schema); }
4 .Acceptance Criteria
[ ] Validation: The generated code passes the Google Rich Results Test.
[ ] Consistency: The content in the JSON-LD is identical to the content visible to the user.
[ ] Performance: The injection does not block rendering (use type="application/ld+json" which is non-blocking).
[ ] SEO: The page shows the "FAQ" enhancement in Google Search Console after re-indexing.
For example for this page : https://kestra.io/vs/n8n
We should have for the first FAQ
<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [ { "@type": "Question", "name": "How is Kestra different from n8n?", "acceptedAnswer": { "@type": "Answer", "text": "Kestra is a code-first orchestration platform for data pipelines, infrastructure automation, and AI workloads at enterprise scale. n8n is a visual-first automation tool for connecting apps and building AI agent workflows. Kestra uses declarative YAML, runs on a distributed architecture with namespace isolation, and deploys through CI/CD. n8n uses a drag-and-drop canvas, runs on Node.js, and builds workflows in the browser. n8n gets you from zero to working automation fast. Kestra carries those workflows into production across teams." } },
1. Objective
Automatically generate and inject a JSON-LD FAQPage schema into the
<head>of any page that utilizes the FAQ/Accordion component. The data must be synchronized with the actual content displayed in the UI.2. Data Source
The script must pull data from the same source used to render the FAQ UI components (e.g., a .json file, a Content Collection in Astro, or a CMS).
Required Fields:
question:The string displayed in the accordion header.answer:The string (or HTML) displayed in the accordion body.3. Implementation Logic
A. Architecture (Recommended for Astro/Vue)
Instead of scraping the DOM, the schema should be generated during the Build Phase (SSG).
<script type="application/ld+json">tag.// Function to format the FAQ items function generateFAQSchema(faqData) { const schema = { "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": faqData.map(item => ({ "@type": "Question", "name": item.question, "acceptedAnswer": { "@type": "Answer", "text": stripHtmlTags(item.answer) // Clean HTML if necessary } })) }; return JSON.stringify(schema); }4 .Acceptance Criteria
[ ] Validation: The generated code passes the Google Rich Results Test.
[ ] Consistency: The content in the JSON-LD is identical to the content visible to the user.
[ ] Performance: The injection does not block rendering (use type="application/ld+json" which is non-blocking).
[ ] SEO: The page shows the "FAQ" enhancement in Google Search Console after re-indexing.
For example for this page : https://kestra.io/vs/n8n
We should have for the first FAQ
<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [ { "@type": "Question", "name": "How is Kestra different from n8n?", "acceptedAnswer": { "@type": "Answer", "text": "Kestra is a code-first orchestration platform for data pipelines, infrastructure automation, and AI workloads at enterprise scale. n8n is a visual-first automation tool for connecting apps and building AI agent workflows. Kestra uses declarative YAML, runs on a distributed architecture with namespace isolation, and deploys through CI/CD. n8n uses a drag-and-drop canvas, runs on Node.js, and builds workflows in the browser. n8n gets you from zero to working automation fast. Kestra carries those workflows into production across teams." } },