Kodokon kodokon.com

Technisches SEO: Open Graph und strukturierte Daten

Steuere mit Open Graph, wie deine Seiten in sozialen Netzwerken in der Vorschau erscheinen, und strebe mit schema.org in JSON-LD nach Rich Results.

8 Min. · 3 Fragen

Diese Lektion in Kodokon öffnen

Wenn eine URL in einem sozialen Netzwerk oder in einer Messaging-App geteilt wird, liest ein Scraper das HTML, um die Vorschaukarte zu bauen. Das Open-Graph-Protokoll steuert diese Karte: og:title, og:description, og:type, og:url und vor allem og:image, das eine absolute URL sein muss (relative Pfade werden von den meisten Plattformen ignoriert). Eine Falle aus der Praxis: Diese Scraper führen kein JavaScript aus. Wenn deine Tags clientseitig von deinem Framework eingefügt werden, bleibt die Vorschau leer; sie müssen im ursprünglich ausgelieferten HTML vorhanden sein (SSR oder statische Generierung).

HTML
<meta property="og:title"
      content="The filter coffee guide">
<meta property="og:type" content="article">
<meta property="og:url"
      content="https://example.com/cafe-filtre">
<meta property="og:image"
      content="https://example.com/cover-1200.jpg">
<meta property="og:description"
      content="Ratios and techniques for a clean cup.">
Die Open-Graph-Grundausstattung, mit einem absoluten og:image

Zwei Ergänzungen vervollständigen die Grundausstattung. <link rel="canonical"> bestimmt die Referenz-URL, wenn eine Seite unter mehreren Adressen erreichbar ist (Tracking-Parameter, Paginierung): Es ist deine Verteidigung gegen Duplicate Content. Und die Twitter-Cards-Tags: Die Plattform greift für den Inhalt auf Open Graph zurück, aber twitter:card wird trotzdem gebraucht, um das Anzeigeformat zu wählen, insbesondere summary_large_image.

HTML
<link rel="canonical"
      href="https://example.com/cafe-filtre">
<meta name="twitter:card"
      content="summary_large_image">
Canonical und Kartenformat: zwei Zeilen, die sich auszahlen

Strukturierte Daten von schema.org beschreiben Suchmaschinen die Bedeutung deines Inhalts: Artikel, Produkt, Rezept, Brotkrümel, FAQ. Es gibt drei Syntaxen (Microdata, RDFa, JSON-LD), aber Google empfiehlt JSON-LD: einen in sich geschlossenen Block innerhalb eines <script type="application/ld+json">, entkoppelt vom visuellen Markup und daher leicht zu erzeugen und zu pflegen. Dieses Markup macht deine Seite erst für Rich Results geeignet: Bewertungssterne, Preise und Termindaten direkt auf der Ergebnisseite.

HTML
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "The filter coffee guide",
  "datePublished": "2026-05-12",
  "author": {
    "@type": "Person",
    "name": "Ana Costa"
  }
}
</script>
Ein Article in JSON-LD: von Suchmaschinen gelesen, nie gerendert

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

  1. Welche Einschränkung gilt für den Wert von og:image?
    • Es muss eine absolute URL sein, Domain inklusive
    • Es muss auf eine Datei im WebP-Format zeigen
    • Es muss base64-kodiert im Tag stehen
  2. Warum empfiehlt Google JSON-LD gegenüber Microdata?
    • JSON-LD wird als JavaScript ausgeführt und ist daher schneller
    • JSON-LD ist ein in sich geschlossener Block, entkoppelt vom sichtbaren Markup und leicht zu erzeugen
    • Microdata wird von Suchmaschinen nicht mehr gelesen
  3. Was garantiert gültiges, vollständiges schema.org-Markup?
    • Jedes Mal angezeigte Rich Results
    • Einen direkten Schub für das Ranking der Seite
    • Eignung für Rich Results, ohne Anzeigegarantie