0Pricing
HTML Academy · Lektion

Grundlagen strukturierter Daten mit JSON-LD

Fügen Sie mit JSON-LD maschinenlesbare strukturierte Daten hinzu

Grundlagen strukturierter Daten mit JSON-LD ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was sind strukturierte Daten?

Strukturierte Daten sind maschinenlesbares JSON, das beschreibt, worum es auf der Seite geht – um einen Artikel, ein Rezept, ein Produkt oder ein Ereignis. Suchmaschinen verwenden sie, um erweiterte Suchergebnisse (Sternebewertungen, Rezeptkarten, Breadcrumbs) anstelle einfacher blauer Links darzustellen.

JSON-LD ist das empfohlene Format

Googles bevorzugtes Format ist JSON-LD: ein einzelner <script type="application/ld+json">-Block im Head oder Body, der ein oder mehrere schema.org-Objekte enthält. Es ist vom sichtbaren HTML entkoppelt, sodass Sie es hinzufügen oder aktualisieren können, ohne das Template neu schreiben zu müssen.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Learn HTML",
  "author": { "@type": "Person", "name": "Ada Lovelace" },
  "datePublished": "2024-05-01"
}
</script>

@context und @type

Jedes JSON-LD-Objekt benötigt @context (fast immer "https://schema.org") und @type (die schema.org-Klasse: Article, Recipe, Product, FAQPage). @context teilt Parsern mit, aus welchem Vokabular die Eigenschaftsnamen stammen.

Gängige Article-Eigenschaften

Geben Sie für Article headline, image (URL oder Array), datePublished, dateModified, author (ein Person- oder Organization-Objekt) und publisher (Organization mit logo) an. Dies sind die Mindestfelder, die Google benötigt, damit die Seite für das Top-Stories-Karussell berücksichtigt wird.

Product-Schema

Product-Seiten deklarieren @type Product mit name, image, description, brand, sku und einem offers-Unterobjekt mit price, priceCurrency und availability. Zusammen mit aggregateRating kann Google Sternebewertungen und Preisausschnitte direkt im Suchergebnis anzeigen.

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Coddy Plus",
  "offers": { "@type": "Offer", "price": "29.00", "priceCurrency": "USD" }
}

Breadcrumb-Schema

BreadcrumbList beschreibt die Navigationshierarchie. Jedes itemListElement ist ein ListItem mit position, name und item (der URL). Wenn diese Angaben vorhanden sind, ersetzt Google die URL-Zeile im Snippet durch den beschrifteten Breadcrumb-Pfad, was mehr Klicks bringt.

FAQ und HowTo

FAQPage- und HowTo-Schemas schalteten früher Rich-Result-Widgets in der SERP frei. Google hat Rich Results für FAQs inzwischen auf wenige Website-Kategorien (gov, edu) beschränkt, aber das Markup ist für Sprachassistenten und andere Konsumenten weiterhin wertvoll – belassen Sie es auf echten FAQ-Seiten.

Sichtbare Seite muss übereinstimmen

Google bestraft Markup, das nicht dem entspricht, was Nutzer sehen. Geben Sie keine 5-Sterne-Bewertung an, die nicht auf der Seite erscheint, und listen Sie keinen Preis von $9.99 auf, den der Nutzer nicht sieht. Strukturierte Daten müssen den gerenderten Inhalt korrekt beschreiben.

Validierung mit dem Rich Results Test

Googles Rich Results Test (search.google.com/test/rich-results) analysiert jede URL oder eingefügten Code, listet erkannte Schema-Typen auf und warnt vor fehlenden erforderlichen Properties. Führen Sie den Test aus, bevor Sie Änderungen an strukturierten Daten ausrollen.

Mehrere Schemas pro Seite

Sie können mehrere JSON-LD-Blöcke auf derselben Seite deklarieren, zum Beispiel Article + BreadcrumbList + Organization, oder sie in einem einzelnen @graph-Array kombinieren. Beide Formen sind gültig. Wählen Sie die Form, die sich in Ihrer Build-Pipeline leichter als Template umsetzen lässt.

Aktualisieren ohne erneutes Rendern

JSON-LD befindet sich in einem von sichtbaren Inhalten getrennten script-Tag. Um es zu aktualisieren, generieren Sie den JSON-Block neu – injizieren Sie strukturierte Daten niemals ausschließlich über clientseitiges JavaScript, da Googlebot JavaScript vor der Indexierung nicht immer zuverlässig ausführt.

Wissensfrage

Welche beiden Properties auf oberster Ebene muss jedes JSON-LD-Objekt enthalten, damit es gültige strukturierte Daten darstellt?

Zusammenfassung

JSON-LD deklariert strukturierte Daten in einem einzelnen application/ld+json-Script-Block, wobei @context und @type jedes Objekt identifizieren. Gängige Schemas wie Article, Product und BreadcrumbList schalten Rich Search Results frei, wenn das Markup die sichtbare Seite korrekt widerspiegelt. Validieren Sie die Daten vor dem Ausrollen mit dem Rich Results Test.

Häufig gestellte Fragen

Ist die Lektion „Grundlagen strukturierter Daten mit JSON-LD“ kostenlos?

Ja — der vollständige Text von „Grundlagen strukturierter Daten mit JSON-LD“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Grundlagen strukturierter Daten mit JSON-LD“?

Fügen Sie mit JSON-LD maschinenlesbare strukturierte Daten hinzu Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Grundlagen strukturierter Daten mit JSON-LD“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. OpenGraph: og:title og:description og:image
  2. Twitter-Card-Meta-Tags
  3. Grundlagen strukturierter Daten mit JSON-LD
  4. Hreflang für internationale Seiten
← Zurück zu HTML Academy