feat(seo): implement AI SEO and structured data schema
All checks were successful
Build & Deploy / 🔍 Prepare (push) Successful in 49s
Build & Deploy / 🧪 QA (push) Successful in 2m27s
CI - Lint, Typecheck & Test / quality-assurance (pull_request) Successful in 3m28s
Build & Deploy / 🏗️ Build (push) Successful in 3m13s
Build & Deploy / 🚀 Deploy (push) Successful in 47s
Build & Deploy / 🧪 Post-Deploy Verification (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 1s
All checks were successful
Build & Deploy / 🔍 Prepare (push) Successful in 49s
Build & Deploy / 🧪 QA (push) Successful in 2m27s
CI - Lint, Typecheck & Test / quality-assurance (pull_request) Successful in 3m28s
Build & Deploy / 🏗️ Build (push) Successful in 3m13s
Build & Deploy / 🚀 Deploy (push) Successful in 47s
Build & Deploy / 🧪 Post-Deploy Verification (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 1s
- Add robust JSON-LD schema generators (LocalBusiness, FAQ, Service, Event) - Refactor JsonLd component to use @graph pattern for merging global/local schemas - Create FaqBlock component with automatic FAQPage schema injection - Inject specific JSON-LD schemas into mdx pages (home, kompetenzen, messen) - Add structured AI SEO content (hard facts, stats, clear definitions)
This commit is contained in:
64
components/blocks/FaqBlock.tsx
Normal file
64
components/blocks/FaqBlock.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
import React from 'react';
|
||||
import { getFAQSchema } from '@/lib/schema';
|
||||
import JsonLd from '@/components/JsonLd';
|
||||
|
||||
export interface FAQItem {
|
||||
question: string;
|
||||
answer: string;
|
||||
}
|
||||
|
||||
interface FaqBlockProps {
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
questions: FAQItem[];
|
||||
}
|
||||
|
||||
export const FaqBlock: React.FC<FaqBlockProps> = ({
|
||||
title = "Häufig gestellte Fragen",
|
||||
subtitle,
|
||||
questions
|
||||
}) => {
|
||||
if (!questions || questions.length === 0) return null;
|
||||
|
||||
return (
|
||||
<section className="py-12 md:py-16">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<div className="mb-10 text-center">
|
||||
{subtitle && (
|
||||
<span className="text-sm font-bold text-accent uppercase tracking-wider block mb-2">
|
||||
{subtitle}
|
||||
</span>
|
||||
)}
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-text-primary">
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{questions.map((item, index) => (
|
||||
<details
|
||||
key={index}
|
||||
className="group border border-neutral-200 bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow"
|
||||
>
|
||||
<summary className="flex items-center justify-between cursor-pointer p-6 font-semibold text-lg text-text-primary hover:text-primary transition-colors select-none">
|
||||
{item.question}
|
||||
<span className="ml-4 flex-shrink-0 transition-transform duration-300 group-open:-rotate-180 text-accent">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div className="px-6 pb-6 text-text-secondary leading-relaxed border-t border-neutral-100 pt-4 prose prose-p:my-2 prose-a:text-primary">
|
||||
{/* Parse simple HTML or just text if answer has formatting */}
|
||||
<div dangerouslySetInnerHTML={{ __html: item.answer }} />
|
||||
</div>
|
||||
</details>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Inject FAQ Schema automatically */}
|
||||
<JsonLd data={getFAQSchema(questions)} />
|
||||
</section>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user