Open-Graph-Tags - vollstaendiger Guide zu og:title, Bild und Twitter Cards (2026)

Wenn jemand Ihre URL in Facebook, LinkedIn, Slack, Discord oder iMessage einfuegt, raten diese Apps nicht vom sichtbaren Inhalt. Sie suchen Open-Graph-Tags im HTML-Head: Titel, Beschreibung, Bild, Typ und kanonische URL. Stimmen die, sieht die Karte wie eine gestaltete Vorschau aus. Fehlen sie, kommt ein Zufallsbild, ein abgeschnittener Titel oder gar keine Karte. Dieser Guide geht das Protokoll durch, die Tags, die zaehlen, den Unterschied zu HTML-Title und Meta-Description, und die Fehler, die Vorschauen zerstoeren. Wenn Sie Markup zum Einfuegen wollen, nutzen Sie den Open-Graph-Tag-Generator - er laeuft im Browser und laedt die Felder nie hoch.

Was Open-Graph-Tags sind

Open Graph ist ein kleines Vokabular aus Meta-Tags. Jeder Tag ist ein Name/Wert-Paar im Head. Der Name nutzt das Prefix og:. Crawler der Social-Apps holen die oeffentliche URL, lesen die Tags und bauen eine Karte: Bild oben oder daneben, Titel, Beschreibung, oft der Site-Name. Das Protokoll stammt von Facebook. Es ist heute das Standard-Share-Format im Web.

• Facebook und Instagram lesen og:* zuerst bei Link-Vorschauen.
• LinkedIn, Slack, Discord, Telegram und iMessage nutzen dieselben Tags.
• X (Twitter) kann auf Open Graph zurueckfallen, aber twitter:* gewinnt, wenn beide da sind.
• Suchmaschinen nutzen weiter HTML-Title und Meta-Description fuer die SERP. OG ist fuer Shares, nicht fuer den blauen Link bei Google.

Ein Tag sieht so aus: meta property="og:title" content="Ihr Share-Titel". property ist der Schluessel. content ist der Wert. Sonderzeichen im Wert muessen escaped werden, damit das HTML gueltig bleibt. Der Generator macht das Escaping fuer Sie.

Die vier Tags, die jede Seite braucht

Facebooks Basisobjekt braucht vier Properties. Fehlt eine oder ist sie leer, erfinden viele Crawler einen Fallback - oder zeigen eine kaputte Karte.

• og:title - die Ueberschrift auf der Karte. Kurz und konkret. Sie darf vom HTML-Title abweichen, den Sie bei Google wollen.
• og:type - welche Art Objekt das ist. website ist der Default fuer Home oder Landing. article passt zu einem Blogpost.
• og:image - eine absolute https-URL zum Vorschaubild. Relative Pfade (/images/og.png) scheitern, weil der Crawler keinen Seitenkontext hat.
• og:url - die kanonische URL dieses Objekts. Sie muss zur geteilten oeffentlichen URL passen, inklusive https und bevorzugtem Host (www oder Apex).

Diese vier sind das Minimum. Eine Karte nur mit Titel und ohne Bild wirkt unfertig. Eine Karte mit Bild und vagem Titel verschwendet den Klick.

Empfohlene Extras

• og:description - ein oder zwei Saetze unter dem Titel. Etwa 70 bis 200 Zeichen. Das muss nicht derselbe String sein wie Ihre Meta-Description.
• og:site_name - Ihre Marke. LinkedIn und Slack zeigen sie oft unter dem Titel, damit die Quelle klar ist.
• og:locale - Sprache und Region mit Underscore, zum Beispiel en_US, es_ES oder pt_BR. Nutzen Sie das, wenn die Seite nicht Englisch ist.

Spaeter koennen Sie typspezifische Felder ergaenzen (article:author, product:price:amount). Starten Sie mit dem Kernset. Ein vollstaendiges Basisobjekt schlaegt ein halb gefuelltes product-Objekt.

og:type-Werte, die Sie wirklich nutzen

Der Typ sagt dem Crawler, wie er die URL behandeln soll. Falsche Typen zerstoeren die Karte selten, aendern aber, welche Extras Sinn ergeben und wie manche Apps das Objekt gruppieren.

• website - Homepages, Kategorie-Indexe und generische Landings.
• article - Blogposts, News und How-to-Guides. Dazu eine datierte URL und ein eigenes Bild.
• product - eine Produkt- oder Preisseite. Klarer Titel und Hero-Bild.
• profile - Personen- oder Autorenseite.

Im Zweifel ist website sicher. Erfinden Sie keine Custom-Typen. Crawler ignorieren unbekannte Namen.

og:image-Regeln

Das Bild ist das Erste, das Leute sehen. Ein schwaches oder fehlendes Bild ist der haeufigste Grund, warum ein Share billig wirkt.

• Nutzen Sie 1200 x 630 Pixel fuer eine Querformat-Karte. Dieses Verhaeltnis (etwa 1.91:1) erwarten Facebook und LinkedIn.
• Bleiben Sie ueber 600 x 315, damit der Crawler nicht auf ein Mini-Thumbnail faellt.
• Die URL muss absolut und https sein. Hosteen Sie die Datei auf einem oeffentlichen CDN oder Ihrer Origin. Login-Walls und robots.txt-Sperren verstecken das Bild.
• Halten Sie die Datei klein (deutlich unter 8 MB). PNG oder JPEG reicht. Vermeiden Sie WebP, wenn aeltere Facebook-Caches es noch holen muessen.
• Legen Sie das Motiv in die Mitte. Manche Apps beschneiden die Seiten auf Mobilgeraeten.

Twitter Cards vs Open Graph

X kann og:title, og:description und og:image lesen. Es hat auch eigene twitter:*-Tags. Sind beide da, gewinnt twitter:* auf X und og:* ueberall sonst. Deshalb geben die meisten Seiten beide aus.

• twitter:card - summary_large_image bei einem breiten Bild, sonst summary.
• twitter:title, twitter:description, twitter:image - meist dieselben Werte wie die passenden og:*-Tags.
• Sie brauchen keinen Twitter-Handle fuer eine einfache Large-Image-Karte.

Wenn Sie nur Open Graph veroeffentlichen, zeigt X oft trotzdem eine Karte. Wenn Sie nur Twitter-Tags veroeffentlichen, tun Facebook und LinkedIn das nicht. Open Graph ist die gemeinsame Basis. Twitter-Tags sind die Extra-Schicht fuer X.

OG vs HTML-Title vs Meta-Description

Drei Strings, drei Aufgaben. Wer sie mischt, bekommt ein starkes SERP-Snippet und eine schwache Slack-Karte - oder umgekehrt.

• HTML-Title - der Suchtitel und der Browser-Tab. Hier gehoeren transaktionale oder informative Queries hin.
• Meta-Description - das SERP-Snippet unter diesem Titel. Google kann es umschreiben.
• og:title und og:description - die Social-Karte. Schreiben Sie fuer jemanden, der den Link schon hat, nicht fuer ein Keyword.

Eine Tool-Seite kann einen transaktionalen HTML-Title behalten (Kostenloser Open-Graph-Tag-Generator) und einen klareren og:title nutzen (Open-Graph-Tags fuer diesen Artikel erzeugen). Ein Blogpost kann das Gegenteil tun. Pruefen Sie das SERP-Snippet mit dem Meta-Description-Checker und SERP-Vorschau. Pruefen Sie die Share-Karte mit OG-Tags.

Durchgerechnetes Beispiel

Ein Beitrag ueber Open Graph selbst koennte diese Werte nutzen. Nach dem Einfuegen in den Head der oeffentlichen URL sollte ein Crawler ein vollstaendiges Objekt sehen.

• og:title - Open-Graph-Tags erklaert
• og:description - Was og:title, og:image, og:url und og:type tun, plus Twitter Cards und Bildgroesse.
• og:type - article
• og:url - https://www.toolsminify.com/blog/open-graph-tags-complete-guide
• og:image - ein 1200 x 630 PNG oder JPEG unter https
• og:site_name - ToolsMinify
• og:locale - de_DE
• twitter:card - summary_large_image, mit demselben Titel, Beschreibung und Bild

Anfuehrungszeichen und Und-Zeichen in einem Titel muessen im content-Attribut zu " und & werden. Wenn Sie Tags von Hand schreiben und die Seite nicht mehr parst, ist dieses Escaping die erste Stelle zum Pruefen.

Haeufige Fehler

• Relative og:image oder og:url. Beide muessen absolut sein.
• og:url, die nicht zum geteilten Link passt (http vs https, Apex vs www, fehlendes Locale-Prefix).
• Ein Bild unter 200 x 200, oder ein 1:1-Zuschnitt, den LinkedIn dann einrahmt.
• Tags im Body statt im Head. Crawler schauen in den Head.
• Bild oder Seite in robots.txt sperren. Social-Crawler muessen sie trotzdem holen koennen.
• Alter Facebook-Cache. Nach Aenderungen die URL im Sharing Debugger neu scrapen. Andere Apps haben eigene Caches.
• Doppelte, widerspruechliche og:title-Tags. Meist gewinnt der erste, und das ist selten der gewollte.
• Geheimnisse oder unveroffentlichten Draft-Text in og:description. Die Tags sind oeffentlich, sobald die URL es ist.

Haeufige Fragen

Sind Open-Graph-Tags ein Google-Rankingfaktor?

Nicht direkt. Google nutzt HTML-Title, Meta-Description und den Seiteninhalt fuer die Suche. OG-Tags helfen Menschen, die Seite mit einer sauberen Karte zu teilen. Bessere Shares koennen Links und Besuche bringen. Das ist ein indirekter Effekt, kein Ranking-Schalter.

Welche Open-Graph-Tags sind Pflicht?

Starten Sie mit og:title, og:type, og:image und og:url. Ergaenzen Sie og:description, og:site_name und og:locale, wenn Sie sie haben. Leere Tags sind schlechter als weggelassene Tags.

Welche Groesse sollte og:image haben?

1200 x 630 Pixel ist das uebliche Querformat. Bleiben Sie ueber 600 x 315. Nutzen Sie eine absolute https-URL. Zentrieren Sie das Motiv, damit Mobile-Crops den Text auf dem Bild nicht abschneiden.

Brauche ich Twitter Cards, wenn ich schon Open Graph habe?

X kann OG-Tags lesen, aber twitter:card plus Titel, Beschreibung und Bild geben Ihnen explizite Kontrolle auf diesem Netz. Facebook und LinkedIn ignorieren twitter:* und brauchen weiter og:*. Geben Sie beides aus, wenn Sie koennen.

Warum zeigt Facebook noch das alte Bild?

Facebook cached den ersten Scrape. Aendern Sie die Bild-URL (oder warten Sie), dann die URL im Facebook Sharing Debugger neu scrapen lassen. LinkedIn und Slack haben aehnliche Caches. Nur die Dateibytes unter derselben URL zu aendern reicht oft nicht.

Wohin kommt das HTML?

In den Head des oeffentlichen HTML-Dokuments, oder in die Metadata-API Ihres Frameworks, damit es im Head landet. Die Tags muessen auf der exakten URL sichtbar sein, die Sie als og:url gesetzt haben. Fuer die Klick-Anleitung zum Generator siehe So verwenden Sie den Open-Graph-Tag-Generator.

Tags im Browser bauen

Titel, Beschreibung, URL und Bild eintragen, dann das Live-HTML kopieren. Nichts wird hochgeladen:

• Open-Graph-Tag-Generator - og:* und optionale Twitter-Card-Tags bauen, mit Social-Vorschau.
• So verwenden Sie den Open-Graph-Tag-Generator - Schritt-fuer-Schritt-Guide zum selben Tool.
• Meta-Description-Checker und SERP-Vorschau - das Such-Snippet pruefen, nicht die Share-Karte.
• Slug-Generator - saubere URL-Slugs fuer die Seite, die Sie teilen.
• Alle SEO-Tools - der vollstaendige Kategorie-Index.