FAQ Page Demo
FAQPage schema with question/answer pairs that appear as rich results in Google Search.
Frequently Asked Questions
These questions are also rendered as FAQPage structured data for search engines.
What is react-ssr-seo?
A framework-agnostic SEO utility library for React SSR applications. It provides meta tag builders, Open Graph & Twitter Card support, JSON-LD structured data generators, and React components — all with zero dependencies and full TypeScript support.
Does it work with Next.js?
Yes! Use the builder functions (buildTitle, buildOpenGraph, etc.) with Next.js generateMetadata, or use the SEOHead component in Pages Router. JSON-LD can be rendered via the JsonLd component or safeJsonLdSerialize utility.
Does it work with React Router 7?
Yes. Use the SEOHead component in your root/layout SSR document component. All functions are SSR-safe and work with React Router's server-side rendering.
Is it SSR-safe?
Absolutely. No browser globals (window, document) are used. All output is deterministic and hydration-safe, meaning no mismatches between server and client renders.
Does it support JSON-LD structured data?
Yes. It includes generators for Organization, Website, Article, Product, Breadcrumb, and FAQ schemas. You can compose multiple schemas using composeSchemas() for a single @graph-based script tag.
What schemas are supported?
Organization, WebSite, Article, Product, BreadcrumbList, and FAQPage. Each has a dedicated generator function (createOrganizationSchema, createArticleSchema, etc.) that returns a properly structured JSON-LD object.
Does it have any dependencies?
Zero. The only peer dependency is React >= 18.0.0. The library itself has no runtime dependencies, keeping your bundle lightweight.
Can I use it without React?
The core builder functions (buildTitle, buildOpenGraph, buildCanonicalUrl, etc.) and schema generators work without React. Import from "react-ssr-seo/schema" for tree-shaken schema-only usage.
SEO Tags Generated
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "What is react-ssr-seo?",
"acceptedAnswer": {
"@type": "Answer",
"text": "A framework-agnostic SEO utility library..."
}
},
{
"@type": "Question",
"name": "Does it work with Next.js?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes! Use the builder functions..."
}
},
// ... more Q&A pairs
]
}
</script>Rich Results: When Google detects valid FAQPage structured data, it can display expandable question/answer snippets directly in search results, increasing your page's visibility and click-through rate.
Source Code
import {
mergeSEOConfig,
buildCanonicalUrl,
createFAQSchema,
SEOHead,
JsonLd,
} from "react-ssr-seo";
import { siteConfig, SITE_URL } from "../config/seo";
// Define your FAQ data
const faqs = [
{
question: "What is react-ssr-seo?",
answer: "A framework-agnostic SEO utility library...",
},
{
question: "Does it work with Next.js?",
answer: "Yes! Use the builder functions with generateMetadata...",
},
// ... more Q&A pairs
];
// Create page config
const pageConfig = mergeSEOConfig(siteConfig, {
title: "FAQ",
description: "Frequently asked questions about react-ssr-seo.",
canonical: buildCanonicalUrl(SITE_URL, "/faq"),
});
// Generate FAQPage schema — just pass your Q&A array!
const faqSchema = createFAQSchema(faqs);
// Render
<head>
<SEOHead {...pageConfig} />
<JsonLd data={faqSchema} />
</head>
// Display your FAQs
{faqs.map((faq, i) => (
<div key={i}>
<h2>{faq.question}</h2>
<p>{faq.answer}</p>
</div>
))}Features Demonstrated
createFAQSchema
Takes a simple array of { question, answer } objects and generates valid FAQPage JSON-LD.
Rich Results
FAQPage schema enables expandable Q&A snippets in Google Search results.
Simple API
Just pass your existing FAQ data — no manual schema construction needed.
Right-click → View Page Source to see the FAQPage JSON-LD schema with all 8 question/answer pairs in the actual HTML.