OpenGraph: og:title og:description og:image
Steuern Sie, wie Ihre Seite beim Teilen in sozialen Netzwerken erscheint
OpenGraph: og:title og:description og:image ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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 ist OpenGraph?
OpenGraph ist ein Metadatenprotokoll, das von Facebook eingeführt wurde, damit jede Seite beschreiben kann, wie sie beim Teilen auf einer sozialen Plattform dargestellt werden soll. Die Tags stehen im <head> als <meta property="og:..." content="...">-Paare und werden von allen großen sozialen Netzwerken ausgelesen.
Zentrale Tags
Die vier in der Praxis erforderlichen Tags sind og:title, og:description, og:image und og:url. Fehlt eines davon, entsteht eine unattraktive Vorschaukarte oder, schlimmer noch, eine Karte ganz ohne Vorschau, die Benutzerinnen und Benutzer meist überspringen.
<meta property="og:title" content="Learn HTML">
<meta property="og:description" content="From DOCTYPE to Web Components.">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:url" content="https://example.com/learn">og:title
Die Überschrift auf der Vorschaukarte. Halten Sie sie unter etwa 60 Zeichen, damit sie in eine Zeile passt und vom sozialen Netzwerk nicht abgeschnitten wird. Stimmen Sie sie auf den <title>-Tag der Seite ab, optimieren Sie sie aber ruhig für die Klickrate.
og:description
Eine ein- oder zweisätzige Zusammenfassung unter dem Titel. Zielen Sie auf 120–160 Zeichen – lang genug, um Interesse zu wecken, und kurz genug, um auf jeder Plattform vollständig angezeigt zu werden. Vermeiden Sie Clickbait; ehrliche Beschreibungen sorgen langfristig für mehr Interaktion.
og:image
Das Hauptbild. Verwenden Sie ein 1200x630 Pixel großes JPG oder PNG (unter ~5 MB). Verwenden Sie immer eine absolute URL – relative URLs funktionieren nicht, weil der Scraper kein Konzept von "dieser Seite" hat. Geben Sie og:image:width und og:image:height an, um bei der Erstellung der Vorschau eine zusätzliche Anfrage zu vermeiden.
og:url
Die kanonische URL der Seite. Setzen Sie sie auch dann, wenn die Seite bereits ein <link rel="canonical"> enthält – manche Scraper bevorzugen den OG-Tag. Entfernen Sie Tracking-Parameter, damit geteilte URLs in der Datenbank der sozialen Plattform nicht als viele "verschiedene" Seiten erscheinen.
og:type
Teilt der Plattform mit, um welche Art von Inhalt es sich handelt: "website", "article", "product", "video.movie", "book" usw. Article ist die häufigste Wahl für Blogbeiträge und schaltet zusätzliche Tags wie article:published_time und article:author frei.
og:locale
Die BCP-47-Locale des Inhalts (z. B. "en_US", "tr_TR"). Zusammen mit og:locale:alternate teilt sie dem Netzwerk mit, in welchen anderen Sprachen die Seite verfügbar ist. So entscheidet Facebook, ob eine Vorschau übersetzt werden soll.
og:site_name
Der Anzeigename der veröffentlichenden Website. Manche Netzwerke zeigen ihn als Untertitel auf der Karte an. Halten Sie ihn kurz und verwenden Sie ihn auf jeder Seite einheitlich, damit die Marke unabhängig vom geteilten Artikel gleich erscheint.
Vorschaukarten testen
Verwenden Sie Facebooks Sharing Debugger und LinkedIns Post Inspector, um die Seite so abzurufen, wie der Scraper sie sieht, die ausgelesenen Tags anzuzeigen und die zwischengespeicherte Vorschau zu aktualisieren. Nach dem Veröffentlichen eines neuen og:image ist ein erneutes Auslesen erforderlich, sonst sehen Benutzerinnen und Benutzer tagelang das alte Bild.
Häufige Stolperfallen
Serverseitig gerenderte Tags sind zwingend erforderlich – die meisten Scraper führen kein JavaScript aus, daher sind von React auf dem Client eingefügte OG-Tags für sie unsichtbar. Rendern Sie sie im initialen HTML, idealerweise mit SSR oder SSG, sonst bleiben die Vorschaukarten dauerhaft generisch.
Wissenscheck
Warum muss og:image eine absolute URL und darf keinen relativen Pfad verwenden?
Zusammenfassung
OpenGraph-Tags (og:title, og:description, og:image mit absoluter URL, og:url, og:type, og:locale, og:site_name) bestimmen, wie jede Seite beim Teilen aussieht. Rendern Sie sie serverseitig, halten Sie Titel unter 60 Zeichen und Beschreibungen bei etwa 150 Zeichen, verwenden Sie Bilder im Format 1200x630 und testen Sie vor dem Start mit dem Facebook Sharing Debugger.
Häufig gestellte Fragen
Ist die Lektion „OpenGraph: og:title og:description og:image“ kostenlos?
Ja — der vollständige Text von „OpenGraph: og:title og:description og:image“ 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 „OpenGraph: og:title og:description og:image“?
Steuern Sie, wie Ihre Seite beim Teilen in sozialen Netzwerken erscheint 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 1 von 4.
Wie lange dauert die Lektion „OpenGraph: og:title og:description og:image“?
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
- OpenGraph: og:title og:description og:image
- Twitter-Card-Meta-Tags
- Grundlagen strukturierter Daten mit JSON-LD
- Hreflang für internationale Seiten