Dynamisches FAQ-Markup per JavaScript einbinden

In diesem Beitrag zeige ich dir, wie du FAQ-Rich-Snippets für deine Website nutzen kannst und wie wir das Ganze mit einem einfachen JavaScript vollautomatisch in Webflow umsetzen, direkt aus deiner CMS Collection. So bleiben deine FAQs immer dynamisch, ohne dass du bei Änderungen manuell in den Code eingreifen musst.

Was ist FAQ-Markup und warum ist es so wirkungsvoll?

Wenn du eine Frage bei Google eingibst, siehst du manchmal direkt unter einem Suchergebnis einen Bereich mit aufklappbaren Fragen und Antworten. Das ist ein sogenanntes Rich Snippet für FAQs.
‍

Diese erweiterten Einträge sind kein Zufall. Sie werden von Websites generiert, die Google mithilfe von strukturierten Daten gezielt darauf hinweisen, dass auf der Seite relevante Fragen und Antworten zu finden sind.

Das Ergebnis: Deine Seite nimmt mehr Raum in den Suchergebnissen ein, wirkt vertrauenswürdiger und generiert mehr Klicks.

‍
Schritt-für-Schritt-Anleitung: Automatisches FAQ-Markup in Webflow

In Webflow lassen sich strukturierte Daten leider nicht standardmäßig dynamisch aus der CMS Collection in ein Embed-Element einfügen. Aber keine Sorge, mit dem folgenden JavaScript-Snippet umgehen wir diese Hürde elegant.

Schritt 1: FAQs in der Webflow CMS Collection anlegen

Zuerst legst du deine Fragen und Antworten wie gewohnt in einer CMS Collection in Webflow an. Stelle sicher, dass du mindestens zwei Felder hast: eines für die Frage (Plain Text) und eines für die Antwort (Plain Text oder Rich Text).

Wichtiger Hinweis: Google liest für das Markup nur reinen Text (Plain Text) aus. Wenn du einen Rich Text-Block für die Antwort verwendest, um Formatierungen auf deiner Seite darzustellen, musst du zusätzlich ein Plain Text-Feld für die Antwort pflegen und dieses für das Markup verwenden.

Schritt 2: Die richtigen Klassen und Attribute vergeben

Damit unser Skript die richtigen Inhalte findet, müssen wir ein paar kleine Anpassungen im Webflow Designer vornehmen.

1. Das übergeordnete Element: Finde das div-Element, das alle deine FAQ-Einträge umschließt. Gib diesem Element die Klasse faq_accordion. Wenn du ein Element aus einer Bibliothek (z. B. Relume) verwendest, das bereits eine Klasse wie faq4_accordion hat, kannst du entweder die Klasse umbenennen oder den Namen später im Skript anpassen.
2. Die Frage: Klicke auf das Textelement, das die Frage aus deiner CMS Collection anzeigt. Gehe zu den Einstellungen (Settings) und füge unter Custom Attributes ein neues Attribut hinzu:
   • Name: data-question
   • Value: Verbinde dieses Feld mit dem Frage-Feld aus deiner CMS Collection.
3. Die Antwort: Mache dasselbe für das Antwort-Textelement:
   • Name: data-answer
   • Value: Verbinde dieses Feld mit dem (Plain Text-)Antwort-Feld aus deiner CMS Collection.

Schritt 3: Das JavaScript einfügen

Füge nun ein Custom Embed-Element auf deiner Seite hinzu und kopiere den folgenden Code hinein.

<script>
  (function () {
    const processed = new Set();

    function generateFAQSchema() {
      const questions = document.querySelectorAll('[data-question]');
      const mainEntity = [];

      questions.forEach(questionEl => {
        if (processed.has(questionEl)) return;

        const questionText = questionEl.getAttribute('data-question')?.trim();
        const answerEl = questionEl.closest('.faq_accordion')?.querySelector('[data-answer]');
        const answerText = answerEl?.getAttribute('data-answer')?.trim();

        if (questionText && answerText) {
          mainEntity.push({
            "@type": "Question",
            "name": questionText,
            "acceptedAnswer": {
              "@type": "Answer",
              "text": answerText
            }
          });
          processed.add(questionEl);
        }
      });

      if (mainEntity.length > 0) {
        const existingScript = document.querySelector('script[type="application/ld+json"][data-faq-schema]');
        if (existingScript) existingScript.remove();

        const scriptEl = document.createElement('script');
        scriptEl.type = 'application/ld+json';
        scriptEl.setAttribute('data-faq-schema', 'true');
        scriptEl.textContent = JSON.stringify({
          "@context": "https://schema.org",
          "@type": "FAQPage",
          "mainEntity": mainEntity
        }, null, 2);

        document.body.appendChild(scriptEl);
      }
    }

    // Initialer Aufruf mit Verzögerung für Webflow CMS (nach dem Rendering)
    window.addEventListener('DOMContentLoaded', () => {
      setTimeout(generateFAQSchema, 200); // leichte Verzögerung für CMS-Inhalte
    });

    // Beobachte spätere DOM-Veränderungen durch Tabs, Filter etc.
    const observer = new MutationObserver(() => {
      generateFAQSchema();
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true
    });
  })();
</script>

‍

Anpassung: Falls dein übergeordnetes div-Element nicht faq_accordion heißt, ändere const answerEl = questionEl.closest('.faq_accordion')?.querySelector('[data-answer]'); im Code entsprechend ab.

‍

‍

Schritt 4: Veröffentlichen und testen

Speichere alles und veröffentliche deine Seite. Um zu überprüfen, ob alles geklappt hat, kannst du das Rich Results Test Tool von Google verwenden. Gib die URL deiner FAQ-Seite ein und starte den Test. Wenn alles korrekt ist, sollte Google die erkannten FAQs anzeigen.

Tipp: Halte deine Antworten möglichst kurz und prägnant. Google bevorzugt Antworten mit einer Länge von maximal 300 Zeichen.

‍

Fazit

Mit dieser Methode hast du eine leistungsstarke und vollautomatische Lösung, um deine Webflow-FAQs für Google zu optimieren. Deine Seite hat jetzt die Chance, mit erweiterten Suchergebnissen mehr Aufmerksamkeit zu erregen, was zu mehr Sichtbarkeit und letztendlich mehr Klicks führt.

‍