FAQ Markup with Schema.org for Rich Snippets
FAQPage schema allows Google to display questions and answers directly in search results as expandable blocks. This increases click-through rate and takes up more space in SERPs.
JSON-LD Markup
<!-- In <head> or at end of <body> -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "How long does website development take?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Timeline depends on project complexity: simple shop on template takes 2–4 weeks, custom with integrations takes 2–4 months."
}
},
{
"@type": "Question",
"name": "Which payment systems do you integrate?",
"acceptedAnswer": {
"@type": "Answer",
"text": "We integrate Stripe, PayPal and other systems depending on client requirements."
}
}
]
}
</script>
Dynamic Generation in Laravel
// FaqSchemaHelper
class FaqSchemaHelper
{
public function generate(Collection $faqs): string
{
$schema = [
'@context' => 'https://schema.org',
'@type' => 'FAQPage',
'mainEntity' => $faqs->map(fn($faq) => [
'@type' => 'Question',
'name' => $faq->question,
'acceptedAnswer' => [
'@type' => 'Answer',
'text' => strip_tags($faq->answer),
],
])->values()->all(),
];
return '<script type="application/ld+json">' . json_encode($schema, JSON_UNESCAPED_UNICODE) . '</script>';
}
}
{{-- In page template --}}
{!! app(FaqSchemaHelper::class)->generate($page->faqs) !!}
Accordion Component with Semantic Markup
// FaqAccordion.tsx
interface FaqItem { question: string; answer: string; }
export function FaqAccordion({ items }: { items: FaqItem[] }) {
const [open, setOpen] = useState<number | null>(null);
return (
<section>
<h2 className="text-2xl font-bold mb-6">Frequently Asked Questions</h2>
<dl className="space-y-3">
{items.map((item, i) => (
<div key={i} className="border rounded-lg overflow-hidden">
<dt>
<button onClick={() => setOpen(open === i ? null : i)}
aria-expanded={open === i}
className="w-full flex justify-between items-center p-4 text-left font-medium hover:bg-gray-50">
{item.question}
<span className={`transition-transform ${open === i ? 'rotate-180' : ''}`}>▾</span>
</button>
</dt>
{open === i && (
<dd className="px-4 pb-4 text-gray-600 text-sm leading-relaxed"
dangerouslySetInnerHTML={{ __html: item.answer }} />
)}
</div>
))}
</dl>
</section>
);
}
Google Requirements
- Answers must be complete, not "Read more"
- One FAQPage markup per page
- Markup content must match visible content
- Don't use for ads or marketing materials
Validate markup: Google Rich Results Test (search.google.com/test/rich-results).
Timeframe
FAQ accordion implementation with proper Schema.org markup: 1 business day.