Open-Graph-Meta-Tags Beispiel zum Kopieren

7 min read

27. Mai 2026

Du brauchst Open-Graph-Tags im HTML und willst nicht die Syntax erraten. Diese Copy-Paste-Vorlagen decken die drei Seitentypen ab, die fast jede Website teilt: Startseite, Artikel und Produkt. Platzhalter ersetzen, Block ins <head>, mit OpenGraph Check prüfen - fertig.

Kurzantwort

Jede Seite braucht og:title, og:description, og:image, og:url und og:type in serverseitigem HTML. Startseiten nutzen og:type website. Blogposts article mit optionalen article:*-Tags. Produktseiten product mit Preis und Verfügbarkeit. Alle URLs absolut und HTTPS. Live-URL in OpenGraph Check einfügen und Output verifizieren.

Bevor du kopierst

Open-Graph-Tags gehören in den <head>. Crawler lesen die erste HTML-Antwort. Tags, die nur per Client-Side-JavaScript gesetzt werden, sieht Facebook, LinkedIn, Slack und die meisten anderen Plattformen nicht.

Regeln für alle Vorlagen:

https://beispiel.de durch deine Domain ersetzen
Absolute URLs für og:image, og:url und alle Bildreferenzen
Bildgröße: 1200 × 630 px empfohlen (siehe Open-Graph-Bildgröße)
og:title unter 60 Zeichen, og:description etwa 80 bis 125 Zeichen
Passende Twitter-Card-Tags für X ergänzen (Block am Ende)

Neu im Thema? Zuerst Open-Graph-Tags erklärt.

Startseite (og:type website)

Für Root-URL, Marketing-Landingpages und allgemeine Seiten, die kein Artikel oder Produkt sind.

<!-- Open Graph - Startseite -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="Dein Markenname">
<meta property="og:title" content="Deine Marke - Kurzes Nutzenversprechen">
<meta property="og:description" content="Ein Satz, der erklärt, was deine Seite bietet und warum Besucher das interessiert.">
<meta property="og:url" content="https://beispiel.de/">
<meta property="og:image" content="https://beispiel.de/images/og-startseite.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:locale" content="de_DE">

Was jedes Feld auf der Startseite bewirkt:

Tag	Tipp
`og:site_name`	Markenname über dem Titel auf Facebook und Discord
`og:title`	Marke oder Hauptangebot, nicht generisches „Startseite"
`og:description`	Elevator Pitch, keine Navigationsliste
`og:url`	Exakt die kanonische Startseiten-URL
`og:image`	Marken-Hero oder Logo auf sauberem Hintergrund

Startseiten-Vorschauen landen in Footer-Links, E-Mail-Signaturen und „Über uns"-Shares. In ein starkes Standardbild investieren.

Blogartikel (og:type article)

Für News, Tutorials, Case Studies und redaktionelle Inhalte mit Datum.

<!-- Open Graph - Artikel -->
<meta property="og:type" content="article">
<meta property="og:site_name" content="Dein Markenname">
<meta property="og:title" content="Fehlende Open-Graph-Tags beheben">
<meta property="og:description" content="Schritt-für-Schritt-Anleitung für og:title, og:description, og:url und og:type, wenn der Vorschau-Text falsch ist.">
<meta property="og:url" content="https://beispiel.de/blog/fehlende-og-tags-beheben">
<meta property="og:image" content="https://beispiel.de/images/og/blog-og-tags.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:locale" content="de_DE">
<!-- Artikel-spezifisch (optional, empfohlen) -->
<meta property="article:published_time" content="2026-06-19T08:00:00+00:00">
<meta property="article:modified_time" content="2026-06-19T08:00:00+00:00">
<meta property="article:author" content="https://beispiel.de/ueber-uns/max-mustermann">
<meta property="article:section" content="Open Graph">
<meta property="article:tag" content="open graph">
<meta property="article:tag" content="meta tags">

Hinweise für Artikel:

og:title = Post-Überschrift, nicht nur Markenname
og:image = Beitragsbild, wenn vorhanden
article:published_time im ISO-8601-Format mit Zeitzone
article:author als URL oder Profil-Link
Mehrere article:tag-Einträge erlaubt

Mehrsprachige Sites: og:locale auf de_DE oder en_US setzen, og:locale:alternate für Übersetzungen.

Produktseite (og:type product)

Für E-Commerce-Produktdetailseiten, wo Preis und Verfügbarkeit zählen.

<!-- Open Graph - Produkt -->
<meta property="og:type" content="product">
<meta property="og:site_name" content="Dein Shop-Name">
<meta property="og:title" content="Kabellose Kopfhörer Pro - Dein Shop">
<meta property="og:description" content="Over-Ear mit Noise Cancelling und 40 Stunden Akku. Gratis Versand ab 50 Euro.">
<meta property="og:url" content="https://beispiel.de/produkte/kabellose-kopfhoerer-pro">
<meta property="og:image" content="https://beispiel.de/images/produkte/kopfhoerer-pro-og.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:locale" content="de_DE">
<!-- Produkt-spezifisch -->
<meta property="product:price:amount" content="149.99">
<meta property="product:price:currency" content="EUR">
<meta property="product:availability" content="in stock">
<meta property="product:condition" content="new">
<meta property="product:retailer_item_id" content="SKU-KOPFHOERER-PRO">
<meta property="product:brand" content="Deine Marke">

Produkt-Hinweise:

product:price:amount als Dezimalzahl ohne Währungssymbol
product:availability: in stock, out of stock, preorder usw.
Sauberes Produktfoto auf neutralem Hintergrund für og:image
og:description = Hauptvorteil, nicht die SKU wiederholen

Nicht jede Plattform rendert Produktfelder in der Karte, aber Facebook und manche Ad-Tools lesen sie für Kataloge.

Twitter-Card-Block (zu jeder Vorlage)

X (Twitter) liest Open Graph als Fallback, explizite Twitter-Tags geben mehr Kontrolle. Zu jeder Vorlage oben ergänzen:

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@deinhandle">
<meta name="twitter:title" content="Gleich wie og:title">
<meta name="twitter:description" content="Gleich wie og:description">
<meta name="twitter:image" content="https://beispiel.de/images/og-startseite.jpg">

summary_large_image für die große Vorschau-Karte. Vergleich: Open Graph vs. Twitter Card.

Vollständiges Head-Beispiel (Artikel)

Minimales aber vollständiges <head> mit Open Graph neben Standard-Meta-Tags:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Fehlende Open-Graph-Tags beheben | Deine Marke</title>
  <meta name="description" content="og:title, og:description, og:url und og:type reparieren, wenn der Social-Vorschau-Text falsch ist." />
  <link rel="canonical" href="https://beispiel.de/blog/fehlende-og-tags-beheben" />
  <!-- Open Graph - Artikel -->
  <meta property="og:type" content="article" />
  <meta property="og:site_name" content="Deine Marke" />
  <meta property="og:title" content="Fehlende Open-Graph-Tags beheben" />
  <meta property="og:description" content="Schritt-für-Schritt für og:title, og:description, og:url und og:type." />
  <meta property="og:url" content="https://beispiel.de/blog/fehlende-og-tags-beheben" />
  <meta property="og:image" content="https://beispiel.de/images/og/blog-og-tags.jpg" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:locale" content="de_DE" />
  <meta property="article:published_time" content="2026-06-19T08:00:00+00:00" />
  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Fehlende Open-Graph-Tags beheben" />
  <meta name="twitter:description" content="Schritt-für-Schritt für og:title, og:description, og:url und og:type." />
  <meta name="twitter:image" content="https://beispiel.de/images/og/blog-og-tags.jpg" />
</head>
<body>
  <!-- Seiteninhalt -->
</body>
</html>

Drei getrennte Titel/Beschreibungs-Systeme: <title> und Meta Description für SEO, Open Graph für Social, Twitter für X. Copy kann sich ähneln, wird aber unabhängig gesetzt.

Wenn du ein Design-System oder Component Library nutzt, lege die Open-Graph-Vorlage als wiederverwendbare Partial-Datei an. So bleibt das property-Attribut konsistent und niemand verwechselt es mit name bei Twitter-Tags.

Landingpage mit og:type website erweitern

Manche Teams brauchen eine vierte Variante: Conversion-Landingpages ohne Blog-Charakter. Nutze dieselbe website-Vorlage wie für die Startseite, aber mit kampagnenspezifischem og:title, og:description und og:image. Setze og:url auf die exakte URL der Landingpage, nicht auf die Root-Domain. Tracking-Parameter gehören in den Share-Link, nicht in og:url.

Nach dem Deploy:

Seitenquelltext auf der Live-URL - Tags im HTML?
URL in OpenGraph Check für Multi-Plattform-Vorschauen
Vor wichtigen Shares: Open-Graph-Tags testen

Prüfe gezielt, ob og:title auf Mobile gut lesbar ist. Plattformen kürzen lange Überschriften unterschiedlich. Facebook erlaubt mehr Zeichen als Slack in der Kartenansicht. Wenn dein Titel am Ende abgeschnitten wirkt, kürze ihn manuell statt dich auf Auto-Truncation zu verlassen.

Bei Produktseiten zusätzlich testen, ob Preis und Verfügbarkeit im Debugger erscheinen, wenn du Facebook-Kataloge nutzt. Nicht jede Vorschau-Karte zeigt Preise, aber falsche Werte schaden Ads und Shopping-Integrationen.

og:image lädt nicht? Fehlendes OG-Bild beheben. Text-Tags leer? Fehlende Open-Graph-Tags beheben.

Häufige Vorlagen-Fehler

Relative Bildpfade

Falsch: content="/images/og.jpg"

Richtig: content="https://beispiel.de/images/og.jpg"

og:url und Canonical-Link passen nicht zusammen

og:url und <link rel="canonical"> sollten auf dieselbe URL zeigen. Abweichungen verwirren Crawler und Cache.

name statt property

Open Graph nutzt property, nicht name:

Falsch: <meta name="og:title" ...>

Richtig: <meta property="og:title" ...>

Ein globales Bild für alle Seiten

Ein site-weites og:image als Fallback ist OK, Artikel und Produkte sollten es mit seiten-spezifischen Bildern überschreiben.

FAQ

Brauche ich unterschiedliche Vorlagen für Facebook und LinkedIn?

Nein. Beide lesen Standard-Open-Graph-Tags. Eine korrekte Vorlage reicht für Facebook, LinkedIn, Slack, Discord und WhatsApp.

Kann ich og:image:width und og:image:height weglassen?

Ja, optional. Sie helfen manchen Plattformen, Layout-Platz vor dem Bildladen zu reservieren.

Welches og:type für Preis- oder Kontaktseiten?

website. article und product nur für passende Inhalte.

Muss og:title exakt dem HTML-Titel entsprechen?

Nein. SEO-Titel haben oft Marken-Suffixe, die in Social-Vorschauen stören. Jeweils für den Zweck schreiben.

Mehrsprachige Sites?

og:locale pro Sprachversion. og:locale:alternate auf übersetzte URLs. Jede Locale eigene og:url.

Wo setze ich das in Next.js oder WordPress?

Next.js: generateMetadata oder Metadata-Export. WordPress: Yoast- oder Rank-Math-Social-Felder. Entscheidend ist das HTML-Output, nicht die Konfigurationsoberfläche.

Vorlagen auf localhost testen?

Social Crawler erreichen kein localhost. Erst auf öffentlicher HTTPS-URL deployen, dann OpenGraph Check.

Wie pflege ich Vorlagen bei vielen tausend Seiten?

Globaler Default im Layout oder Theme, pro Seitentyp Overrides im CMS. Blogposts und Produkte brauchen individuelle og:title, og:description und og:image. Automatisierung über CMS-Felder oder generateMetadata in Next.js.

Was passiert, wenn og:type falsch ist?

Meist nur ein falscher Inhaltstyp in der Karte, selten ein Totalausfall. article statt website auf Blogposts setzen, damit optionale Artikel-Felder greifen.

Fazit

Vorlage für deinen Seitentyp kopieren, echte URLs und Texte einsetzen, im Seitenquelltext bestätigen. Drei Blöcke decken die meisten Sites ab: website für Startseiten, article für Blogposts, product für Shops. Jede neue Vorlage vor dem Teilen mit OpenGraph Check scannen.