Розмітка FAQ зі Schema.org для розширених сніпетів
FAQPage schema дозволяє Google відображати запитання та відповіді прямо в пошуковій видачі у вигляді розкривних блоків. Це збільшує click-through rate та займає більше місця в SERPs.
JSON-LD розмітка
<!-- У <head> або в кінці <body> -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "Як довго займає розробка веб-сайту?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Терміни залежать від складності проекту: простий магазин на готовому шаблоні — 2–4 тижні, кастомний з інтеграціями — 2–4 місяці."
}
},
{
"@type": "Question",
"name": "Які платіжні системи ви інтегруєте?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Інтегруємо Stripe, PayPal та інші системи залежно від вимог клієнта."
}
}
]
}
</script>
Динамічна генерація в 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>';
}
}
{{-- У шаблоні сторінки --}}
{!! app(FaqSchemaHelper::class)->generate($page->faqs) !!}
Компонент аккордеона зі семантичною розміткою
// 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">Часто задавані питання</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
- Відповіді повинні бути повними, не "Детальніше за посиланням"
- Одна FAQPage розмітка на сторінку
- Контент у розмітці повинен збігатися з видимим контентом
- Не використовуйте для реклами або маркетингових матеріалів
Перевірити розмітку: Google Rich Results Test (search.google.com/test/rich-results).
Терміни
Реалізація FAQ-аккордеона з коректною Schema.org розміткою: 1 робочий день.