Strukturierte Daten mit JavaScript generieren

Moderne Websites verwenden JavaScript, um viele dynamische Inhalte anzuzeigen. Wenn du JavaScript nutzt, um strukturierte Daten auf deinen Websites zu generieren, musst du einige Dinge beachten. Dieser Leitfaden zeigt dir Best Practices und Implementierungsstrategien. Falls du mit strukturierten Daten noch nicht vertraut bist, findest du hier weitere Informationen dazu, wie sie funktionieren.

Es gibt verschiedene Möglichkeiten, strukturierte Daten mit JavaScript zu generieren. Am häufigsten werden jedoch diese verwendet:

Mit Google Tag Manager JSON-LD dynamisch generieren

Google Tag Manager ist eine Plattform, mit der du Tags auf deiner Website verwalten kannst, ohne den Code bearbeiten zu müssen. So erstellst du strukturierte Daten mit Google Tag Manager:

  1. Installiere Google Tag Manager auf deiner Website und richte ihn ein.
  2. Füge dem Container ein neues benutzerdefiniertes HTML-Tag hinzu.
  3. Füge den gewünschten Block mit strukturierten Daten in den Tag-Inhalt ein.
  4. Installiere den Container wie unter Google Tag Manager installieren im Administratormenü des Containers beschrieben.
  5. Veröffentliche den Container in der Google Tag Manager-Oberfläche, damit das Tag auf deiner Website eingefügt wird.
  6. Teste deine Implementierung.

Variablen in Google Tag Manager verwenden

Google Tag Manager (GTM) unterstützt Variablen, mit denen Informationen auf der Seite in deine strukturierten Daten eingebunden werden. Verwende Variablen zum Extrahieren der Daten, statt die Informationen in GTM zu duplizieren. Beim Duplizieren steigt nämlich das Risiko einer Diskrepanz zwischen dem Seiteninhalt und den strukturierten Daten, die über GTM eingefügt wurden.

Du kannst beispielsweise dynamisch einen JSON-LD-Block Recipe generieren, bei dem der Seitentitel als Rezeptname verwendet wird. Dazu erstellst du einfach die folgende benutzerdefinierte Variable namens recipe_name: 

function() { return document.title; }

Anschließend kannst du {{recipe_name}} in dein benutzerdefiniertes HTML-Tag einfügen.

Mit Variablen lassen sich am besten alle erforderlichen Informationen von der Seite abrufen.

Hier ein Beispiel für den Inhalt des benutzerdefinierten HTML-Tags:

<script type="application/ld+json">
  {
    "@context": "https://schema.org/",
    "@type": "Recipe",
    "name": "{{recipe_name}}",
    "image": [ "{{recipe_image}}" ],
    "author": {
      "@type": "Person",
      "name": "{{recipe_author}}"
    }
  }
</script>

Strukturierte Daten mit benutzerdefiniertem JavaScript generieren

Eine weitere Möglichkeit, strukturierte Daten zu generieren, besteht darin, mit JavaScript entweder alle strukturierten Daten zu erstellen oder den serverseitig gerenderten strukturierten Daten weitere Informationen hinzuzufügen. In beiden Fällen kann die Google-Suche strukturierte Daten verstehen und verarbeiten, die beim Rendern der Seite im DOM verfügbar sind. Mehr darüber, wie JavaScript von der Google-Suche verarbeitet wird, erfährst du in der Anleitung zu den Grundlagen von JavaScript-SEO.

Hier ein Beispiel für durch JavaScript generierte strukturierte Daten:

  1. Suche nach dem gewünschten Typ strukturierter Daten.
  2. Bearbeite den HTML-Code deiner Website so, dass er ein JavaScript-Snippet wie im folgenden Beispiel enthält. Wenn du mehr wissen möchtest, sieh in der Dokumentation deines CMS- oder Hostanbieters nach oder wende dich an deine Entwickler.
    fetch('https://api.example.com/recipes/123')
.then(response => response.text())
.then(structuredDataText => {
  const script = document.createElement('script');
  script.setAttribute('type', 'application/ld+json');
  script.textContent = structuredDataText;
  document.head.appendChild(script);
});
  3. Teste deine Implementierung mit dem Test für Rich-Suchergebnisse.

Serverseitiges Rendering verwenden

Wenn du serverseitiges Rendering verwendest, kannst du die gewünschten strukturierten Daten auch in die gerenderte Ausgabe einschließen. Wenn du Informationen dazu benötigst, wie du die JSON-LD für den entsprechenden Typ strukturierter Daten generierst, sieh in der Dokumentation deines Frameworks nach.

Die Implementierung testen

Prüfe deine Implementierung, um sicherzustellen, dass die Google-Suche deine strukturierten Daten crawlen und indexieren kann:

  1. Öffne den Test für Rich-Suchergebnisse.
  2. Gib die URL ein, die du testen möchtest.
  3. Klicke auf URL testen.

    Erfolgreich: Wenn du alles richtig gemacht hast und dein Typ strukturierter Daten im Tool unterstützt wird, siehst du die Meldung „Rich-Suchergebnisse für diese Seite möglich“.
    Falls du einen Typ strukturierter Daten testest, der nicht vom Test für Rich-Suchergebnisse unterstützt wird, prüfe den gerenderten HTML-Code. Wenn der gerenderte HTML-Code die strukturierten Daten enthält, kann er von der Google Suche verarbeitet werden.

    Noch einmal versuchen: Wenn Fehlermeldungen oder Warnungen angezeigt werden, handelt es sich höchstwahrscheinlich um einen Syntaxfehler oder eine fehlende Property. Lies dir die Dokumentation für deinen Typ strukturierter Daten durch und achte darauf, dass du alle Properties hinzugefügt hast. Wenn das Problem weiterhin besteht, findest du hier eine Anleitung dazu, wie du für die Suche relevante JavaScript-Probleme beheben kannst.