Interactive FAQ: Accordion-Pattern für bessere UX und SEO

FAQs sind Content-Gold: Sie beantworten echte User-Fragen, ranken für Long-Tail-Keywords und können mit Schema Markup Rich Results auslösen. Kombiniert mit einem Accordion wird die UX noch besser.

Warum FAQ + Accordion?

FAQ Schema Markup

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Was kostet SEO?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "SEO kostet zwischen 500€ und 5.000€ pro Monat, abhängig vom Umfang."
      }
    }
  ]
}

Accessibility-konformes Accordion

ARIA-Attribute

<div class="faq">
  <button
    aria-expanded="false"
    aria-controls="answer-1"
    id="question-1"
  >
    Was kostet SEO?
  </button>
  <div
    id="answer-1"
    role="region"
    aria-labelledby="question-1"
    hidden
  >
    SEO kostet zwischen 500€ und 5.000€ pro Monat...
  </div>
</div>

Keyboard-Navigation

• Enter/Space: Öffnet/schließt das Accordion
• Arrow Down: Nächste Frage
• Arrow Up: Vorherige Frage
• Home: Erste Frage
• End: Letzte Frage

Progressive Disclosure

Das Konzept: Zeige nur, was der User gerade braucht.

Ohne Accordion:

• 10 FAQs = 10× lange Seite
• User muss scrollen
• Overwhelming

Mit Accordion:

• Alle Fragen auf einen Blick
• User wählt, was relevant ist
• Fokussiert

Live-Beispiel

Analytics-Tracking

Tracken Sie, welche FAQs geklickt werden:

accordion.addEventListener('click', (e) => {
  const question = e.target.closest('[aria-expanded]');
  if (question) {
    gtag('event', 'faq_click', {
      question: question.textContent,
      action: question.getAttribute('aria-expanded') === 'true' ? 'open' : 'close'
    });
  }
});

Was Sie lernen:

• Welche Fragen werden am häufigsten geklickt?
• Welche Fragen werden nie geklickt? (→ Entfernen)
• In welcher Reihenfolge klicken User?

Mobile UX

Auf Mobile sind Accordions besonders wichtig:

• Weniger Scrolling nötig
• Größere Touch-Targets
• Klarere Struktur

Fazit

FAQ + Accordion + Schema ist eine Dreifach-Win-Situation:

1. SEO: FAQ Schema für Rich Results
2. UX: Progressive Disclosure für bessere Übersicht
3. Analytics: Insights, welche Fragen relevant sind

Implementieren Sie es auf Ihren wichtigsten Seiten – der ROI ist hoch.