Разметка FAQ с Schema.org для расширенных сниппетов
FAQPage schema позволяет Google отображать вопросы и ответы прямо в поисковой выдаче в виде раскрываемых блоков. Это увеличивает кликабельность и занимает больше места в SERP.
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": "Интегрируем ЮKassa, Тинькофф, 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 рабочий день.