So setzt du Open-Graph-Tags richtig

Q: Spielt das html-prefix-Attribut eine Rolle?

ogp.me legt den RDFa-Prefix <html prefix="og: https://ogp.me/ns#"> als Teil des Protokolls fest, nimm ihn also auf. X' Cards-Guide merkt an, dass für seine eigenen twitter:-Tags kein solches Markup nötig ist. Erwarte nicht, dass der Prefix eine Card repariert, die aus einem anderen Grund scheitert.

Was sind Open-Graph-Tags?

Eine Seite deklariert Open-Graph-Tags als <meta>-Elemente in ihrem <head>, und diese Elemente sagen einem sozialen Netzwerk, welchen Titel, welchen Typ, welches Bild und welche URL es in die Link-Vorschau setzt, wenn jemand die Seite teilt. Die Protokoll-Startseite ogp.me beginnt mit dem Satz „The Open Graph protocol enables any web page to become a rich object in a social graph.“ Der Mechanismus ist ein Crawler: Das Netzwerk ruft deine URL ab, parst die Meta-Elemente und baut daraus eine Card, statt deinen Fließtext zu erraten. Schreibe die vier Pflicht-Tags in den head jeder Seite, die du teilst, und lass danach den Debugger jedes Netzwerks gegen die Live-URL laufen.

Ein Entwickler tippt Meta-Tags in den Head-Bereich einer Seite auf einem Laptop.

Welche Open-Graph-Tags verlangt das Protokoll?

Das Open-Graph-Protokoll verlangt vier Properties, und ogp.me nennt sie og:title, og:type, og:image und og:url. Jede trägt in der Spezifikation eine einzeilige Definition.

Property	Definition aus ogp.me	Beispielwert
`og:title`	„The title of your object as it should appear within the graph“	Posts über neun Netzwerke planen
`og:type`	„The type of your object, e.g., 'video.movie'“	`article`
`og:image`	„An image URL which should represent your object within the graph“	`https://example.com/preview.png`
`og:url`	„The canonical URL of your object that will be used as its permanent ID“	`https://example.com/guide`

Über diese vier hinaus listet ogp.me optionale Properties auf, darunter og:description, og:site_name, og:locale, og:determiner, og:audio und og:video, dazu strukturierte Kinder wie og:image:secure_url, og:image:type und og:image:alt. Die Spezifikation verlangt außerdem einen RDFa-Prefix am Wurzelelement, <html prefix="og: https://ogp.me/ns#">.

<meta property="og:title" content="Scheduling posts across nine networks" />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://example.com/preview.png" />
<meta property="og:url" content="https://example.com/guide" />
<meta property="og:description" content="What each network reads before it draws a card." />

Welche Netzwerke lesen Open-Graph-Tags und welche nutzen eigene?

Facebook, LinkedIn, Pinterest und Slack lesen og:-Properties direkt, und X liest zuerst seinen eigenen twitter:-Namespace. Diese Aufteilung ist das praktische Problem, sobald eine Seite an mehrere Netzwerke geht, denn ein Tag-Satz, der einen Crawler zufriedenstellt, kann einen anderen mit einer leeren Card zurücklassen.

Ziel	Was es liest	Quelle
Facebook	og:-Properties	Metas Webmaster-Guide nennt og:url, og:title, og:description, og:image, og:type, og:locale, fb:app_id
LinkedIn	og:-Properties	LinkedIns Hilfeseite: Der Quellcode „needs to comply with Open Graph Protocol (OGP)“
Pinterest	og:-Properties oder schema.org	Pinterests Rich-Pins-Überblick: „the most common formats are Open Graph and Schema.org“
X	twitter:-Properties, mit Rückfall auf og:	X' Cards-Guide, archiviert, unten zitiert
Slack	og:-Properties und X-Card-Metadaten	Slacks Doku: Unfurling „looks for common OpenGraph and X (formerly known as Twitter) Card metadata“

Daraus folgen zwei Dinge. Ein Netzwerk liest deine Tags nur, wenn der Post einen abrufbaren Link trägt, ein Caption-Format, das nie eine URL rendert, löst also nie einen Crawl aus. Und ein Netzwerk mit eigenem Namespace bevorzugt ihn, was das Veröffentlichen einer Seite überall zu einem Metadaten-Problem macht, bevor es ein Planungsproblem ist. Dieselbe Sorgfalt gilt wie bei jedem Cross-Posting-Workflow: Der Text reist mit, das Rendering nicht.

Warum muss og:url die kanonische URL sein?

Metas Sharing-Guide definiert og:url als „The canonical URL for your page. This should be the undecorated URL, without session variables, user identifying parameters, or counters.“ Das Protokoll nennt dieselbe Property eine permanente ID, also fällt jeder Share einer getrackten Variante auf die eine Adresse zusammen, die du deklariert hast. Setz og:url auf die saubere kanonische Adresse, halte Kampagnen-Parameter im geteilten Link und aus dem Tag heraus, und wert die Kampagnenseite getrennt aus, wenn du Social-Media-Traffic misst.

Derselbe Guide definiert og:title als „The title of your article without any branding such as your site name,“ weil Facebook die Domain ohnehin auf der Card ausgibt.

Wie fällt X von twitter:-Tags auf og:-Tags zurück?

Der Card-Prozessor von X prüft zuerst die twitter:-Property und nutzt das Open-Graph-Äquivalent, wenn die twitter:-Variante fehlt. X veröffentlicht seinen Cards-Guide nicht mehr, und die alte Entwickler-URL leitet heute auf eine allgemeine Übersichtsseite um, deshalb stammt jedes Zitat hier aus dem archivierten Snapshot dieses Guides vom Dezember 2023 und beschreibt das Verhalten, das X zuletzt dokumentiert hat. Dort stand die Regel so: „When the Twitter card processor looks for tags on a page, it first checks for the Twitter-specific property, and if not present, falls back to the supported Open Graph property.“ Die eine Property ohne Open-Graph-Äquivalent ist twitter:card selbst, beschrieben als „The card type, which will be one of 'summary', 'summary_large_image', 'app', or 'player'.“

Aus diesem Guide folgen zwei Syntax-Details. X braucht keinen RDFa-Prefix, und obwohl seine Tags name und content verwenden, gilt: „Twitter's parser will fall back to using property and content, so there is no need to modify existing Open Graph protocol markup if it already exists.“ Auf einem korrekten Open-Graph-Satz deckt ein einziges zusätzliches Tag X ab.

<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@yourhandle" />

Wie lange cachen Plattformen, was sie gescrapt haben?

Facebook und X cachen den Scrape beide, nach unterschiedlichen Uhren. Metas Best-Practices-Seite bietet den Sharing Debugger für Seiten an, die „need to update them more often than the standard 24 hour update period.“ Der archivierte Cards-Guide sagt: „Content is cached by Twitter for 7 days after a link to a page with card markup has been published in a Tweet.“ Korrigier deine Tags, bevor der Link rausgeht, denn danach wartest du auf fremden Cache.

Eine Hand scrollt durch einen Social-Media-Feed auf einem Smartphone, dem Bildschirm, auf dem eine Link-Vorschaukarte erscheint.

Wie prüfst du, was ein Crawler tatsächlich sieht?

Jedes Netzwerk veröffentlicht einen Debugger, der deine URL als eigener Crawler abruft und die geparsten Tags ausgibt. Metas Dokumentation sagt, ihr Sharing Debugger „will show which meta tags the crawler scrapes as well as any errors or warnings,“ und derselbe Lauf cacht dein Bild vor. Richte ihn auf genau die URL, die du gleich posten willst, nicht auf eine Staging-Kopie, und wiederhol das nach jeder Änderung am head.

Die Crawler sind in Server-Logs und Robots-Regeln erkennbar. Meta listet User-Agents wie facebookexternalhit/1.1 und meta-externalagent/1.1, und X nutzt „the User-Agent of Twitterbot (with version, such as Twitterbot/1.0).“ Sein Guide warnt: „if a page with card markup is blocked, no card will be shown.“

Was geht bei Open-Graph-Tags schief?

Vier Fehlerbilder erklären die meisten leeren oder falschen Vorschauen, und keines davon ist im Browser sichtbar. Ein blockierter Crawler ist das erste, und LinkedIns Hilfeseite benennt es: Wenn ein Bild die Anforderungen erfüllt und trotzdem nicht erscheint, „your website may be blocking us from pulling the image or the image may be located on a protected directory or website.“ Das zweite ist die Platzierung, denn Metas Crawler-Dokumentation stellt fest, dass „any Open Graph properties need to be listed before the first 1 MB of your website or app, or it will be cutoff.“ Das dritte ist ein veralteter Cache. Das vierte ist ein relativer Bildpfad, denn og:image ist als Bild-URL definiert, und ein Crawler auf einem anderen Host hat keine Basis, gegen die er einen relativen Pfad auflösen könnte.

AdaptlyPost

–

Planen Sie Ihre Inhalte für alle Plattformen

7-Tage-Testversion starten

Plattformübergreifende Analysen

Sozialer Posteingang

KI-gestützter Assistent

Pinterest steht neben allen vieren, weil Rich Pins deine Metadaten als strukturierten Inhalt behandeln und nicht nur als Vorschau, eigens behandelt in diesem Guide zu Rich Pins. Den head einmal richtig zu setzen ist der billigste Teil von Social-Media-Optimierung. Wenn derselbe Link an mehrere Ziele geht, veröffentlicht adaptlypost einen Post gleichzeitig auf mehreren Accounts, damit die Tag-Arbeit auf deiner Seite bleibt und die Verteilung an einer Stelle passiert. Das Rendering gehört weiterhin jedem Netzwerk, und genau das ist der Punkt, den du in jede Cross-Posting-Strategie mitnimmst.

Vier Wege, wie eine Vorschau kaputtgeht

Blockierter CrawlerRobots-Regeln oder der Server hindern den Crawler daran, das Bild zu holen

Späte PlatzierungDie Open-Graph-Tags stehen nach dem ersten 1 MB der Seite und werden abgeschnitten

Veralteter CacheDas Netzwerk zeigt noch, was es vor deiner letzten Änderung gescrapt hat

Relativer Bildpfadog:image hat keine Basis-URL, von der aus ein anderer Host auflösen kann

Vier Fehlerarten erklären die meisten leeren oder falschen Link-Vorschauen, und keine davon zeigt sich im Browser.

Häufig gestellte Fragen

Brauche ich og:description, wenn das Protokoll es nicht verlangt?

ogp.me führt og:description als optional, eine Seite ohne dieses Tag erfüllt das Protokoll also trotzdem. Metas Sharing-Guide beschreibt es als den Text unter dem Titel auf Facebook, wer es weglässt, überlässt dem Netzwerk eine Entscheidung, die er selbst hätte treffen können. Schreib es.

Kann ich Open-Graph-Tags und twitter:-Tags auf derselben Seite nutzen?

Ja, und X' archivierter Cards-Guide nannte das den vorgesehenen Aufbau: Beides zu definieren „minimizes the amount of duplicate markup required to describe content and experience.“ Der Prozessor liest die twitter:-Property, wenn sie existiert, und die og:-Property, wenn nicht. twitter:card zusätzlich zu einem vollständigen Open-Graph-Satz reicht für X.

Was passiert, wenn og:url auf etwas anderes zeigt als auf die Seite selbst?

Das Netzwerk baut seine Card für die Adresse in og:url, die ogp.me als „The canonical URL of your object that will be used as its permanent ID“ definiert. Eine Abweichung schickt jeden Teilenden auf eine andere Seite als die, die er gerade gelesen hat. Halte og:url gleich der kanonischen Adresse der Seite, die das Tag trägt.

Warum zeigt meine Vorschau nach der Korrektur immer noch den alten Titel?

Netzwerke cachen den Scrape. Metas Best-Practices-Seite verweist auf eine „standard 24 hour update period“ und bietet den Sharing Debugger für ein früheres Update an, und X' archivierter Cards-Guide nannte 7 Tage ab dem Moment, in dem ein Link in einem Post veröffentlicht wird. Lass den passenden Debugger laufen und teile danach neu.

Spielt das html-prefix-Attribut eine Rolle?

ogp.me legt den RDFa-Prefix <html prefix="og: https://ogp.me/ns#"> als Teil des Protokolls fest, nimm ihn also auf. X' Cards-Guide merkt an, dass für seine eigenen twitter:-Tags kein solches Markup nötig ist. Erwarte nicht, dass der Prefix eine Card repariert, die aus einem anderen Grund scheitert.

Was machen Netzwerke, wenn og:image fehlt?

Das Protokoll definiert keinen Fallback, das Verhalten gehört also jedem Netzwerk und seinem Crawler. Slacks Dokumentation beschreibt klassisches Unfurling als Crawlen der URL nach Open-Graph- und X-Card-Metadaten und das Rendern von „some micro-approximation of the content,“ was ehrlich beschreibt, was ein Netzwerk mit einem unvollständigen Satz macht. Liefere og:image und halte die Wahl aus einer Heuristik heraus.

Was kommt in og:type, wenn die Seite kein Artikel ist?

ogp.me definiert og:type als den Typ des Objekts und nennt video.movie als Beispiel, der Wert sollte also zu dem passen, was die Seite tatsächlich ist. Die Tabelle in diesem Beitrag verwendet article für einen Blogbeitrag, das ist aber nur einer von mehreren Werten, die das Protokoll erlaubt. Setze og:type auf den Typ, der das Objekt auf der Seite wirklich beschreibt.

Sollte og:title meinen Markennamen enthalten?

Metas Sharing-Guide definiert og:title als „den Titel deines Artikels ohne Branding wie den Namen deiner Website", weil Facebook die Domain schon selbst auf der Karte anzeigt. Ein zusätzlicher Markenname dort wiederholt nur, was das Netzwerk ohnehin einblendet. Lass og:title beim reinen Titel und überlass die Domain-Anzeige dem Netzwerk.

Baut ein Netzwerk eine Vorschau aus einem Post ohne Link?

Ein Netzwerk liest deine Tags nur, wenn der Post einen abrufbaren Link enthält, ein Bildunterschriften-Format ohne gerenderte URL löst also nie einen Crawl aus. Ohne Link gibt es für den Crawler nichts zu holen, egal wie vollständig die restlichen Tags sind. Setze die URL direkt in den Post, nicht nur in ein Bild oder den Bildtext.

Wie erkenne ich den Crawler eines Netzwerks in meinen Server-Logs?

Meta listet User-Agents wie facebookexternalhit/1.1 und meta-externalagent/1.1, beide erkennbar in Server-Logs und Robots-Regeln. X nutzt den User-Agent von Twitterbot, mit Version, etwa Twitterbot/1.0. Diese Strings zu prüfen zeigt, ob der Crawler die Seite überhaupt erreicht hat, denn X' Guide warnt, dass eine blockierte Seite keine Karte zeigt.