Skip to main content

Open Graph Preview

Preview how your page looks when shared on Facebook and LinkedIn.

Geprüft von · Zuletzt geprüft

Die Open-Graph-Vorschau verwenden

  1. Füge deine Seiten-URL ein oder tippe Feldwerte - wenn du eine URL eingibst und auf "Abrufen" klickst, zieht das Werkzeug die aktuellen og:*-Meta-Tags von der Seite über einen no-CORS-öffentlichen Proxy; wenn du den Abruf überspringst, beginnt das Formular leer und du füllst jedes Feld von Hand aus.
  2. Fülle og:title, og:description, og:image, og:url, og:site_name - diese fünf decken das Standard-Card-Rendering auf Facebook, LinkedIn, Slack, iMessage, Discord und WhatsApp ab.
  3. Wähle eine Vorschau-Plattform - das rechte Panel baut die Card mit dem tatsächlichen Rahmen jeder Plattform neu auf (Facebooks abgerundete Ecken und zweizeilige Beschreibung, LinkedIns zugeschnittenes Bildverhältnis, Slacks Unfurl-Layout mit Favicon).
  4. Kopiere den HTML-Block - das untere Textarea zeigt die genauen Tags zum Einfügen in <head>, einschließlich og:image:width, og:image:height und og:image:alt.

Wie Open Graph unter der Haube funktioniert

Open Graph ist keine Plattformintegration - es ist ein zustandsloses Metadaten-Protokoll. Wenn ein Link in Facebook Messenger, LinkedIn oder Slack eingefügt wird, stellt ein Bot (facebookexternalhit, LinkedInBot, Slackbot-LinkExpanding) eine einfache HTTP-GET-Anfrage an die URL, parst die erste Antwort als HTML, extrahiert <meta property="og:*">-Tags, lädt das in og:image referenzierte Bild herunter und cached das Ergebnis nach URL. Die Bots führen kein JavaScript aus (Facebooks Scraper führt einen gekürzten Renderer aus, aber sich darauf zu verlassen ist riskant), daher müssen die Tags im server-gerenderten HTML vorhanden sein.

Das Protokoll selbst ist unter ogp.me spezifiziert, von Facebook 2010 verfasst und wird nun locker von der Open-Web-Community verwaltet. Es definiert ein kleines Vokabular erforderlicher Eigenschaften (og:title, og:type, og:image, og:url) und einen größeren Satz optionaler Eigenschaften einschließlich typspezifischer Erweiterungen (og:article:published_time, og:video:duration). Die Vorschau rendert den tatsächlichen Zuschnitt und die Typografie jeder Plattform, sodass du Clipping vor der Veröffentlichung erkennen kannst, nicht danach.

Echte Szenarien, bei denen das hilft

  • Vor der Veröffentlichung eines Blog-Posts überprüfen, ob das Hauptbild Facebooks 1,91:1-Zuschnitt überlebt, ohne das Gesicht der Person zu verlieren.
  • Einen Link debuggen, der in Slack aber nicht in LinkedIn aufgeklappt wird - normalerweise ein og:image, das über HTTP serviert wird oder fehlende Dimensionen hat.
  • Bestätigen, dass A/B-Testvarianten einer Marketingkampagne visuell unterschiedliche Vorschauen statt identischer erzeugen.
  • Sicherstellen, dass eine Paywall-Seite nicht authentifizierten sozialen Besuchern noch eine überzeugende Vorschau zeigt.
  • Validieren, dass serverseitiges Rendering (Next.js, Nuxt, SvelteKit) tatsächlich die OG-Tags in der initialen Antwort enthält und nicht erst nach der Hydratation.

Grenzfälle, die OG-Vorschauen zunichte machen

  • Relative og:image-URLs - das Protokoll schreibt absolute URLs vor. Scraper lösen /images/hero.jpg nicht gegen den Seitenursprung auf.
  • Bild größer als 8 MB - Facebook weigert sich, Bilder über seinem Limit zu cachen, und fällt auf reine Text-Cards zurück. LinkedIns Limit ist 5 MB, Twitters 5 MB, Slacks 10 MB.
  • WebP oder AVIF mit schlechtem Fallback - Facebooks Scraper unterstützte WebP ab 2022, hatte aber jahrelang fleckiges Verhalten davor. JPEG und PNG sind noch immer die sichersten Formate.
  • Fehlendes og:image:width/og:image:height - ohne Dimensionen verzögert Facebook manchmal das Rendering, bis es das Bild erneut abruft, sodass der erste Share eine kaputte oder reine Text-Card zeigt.
  • 301-Weiterleitungen auf der og:url - Scraper folgen Weiterleitungen, cachen dann aber unter der finalen URL. Wenn du og:url auf die kanonische URL setzt, zeigen Reparts der Pre-Redirect-URL die alte Vorschau, bis du eine Neubeschaffung erzwingst.
  • Dynamische OG-Bilder aus Edge-Funktionen - wenn dein og:image on-demand generiert wird (Vercel OG, Cloudflare Workers), können Cold Starts das Timeout des Scrapers überschreiten und das Bild schlägt still fehl.

Das Open-Graph-Protokoll im Detail

Die vier erforderlichen Eigenschaften sind og:title, og:type, og:image und og:url. Das og:type-Vokabular ist aufgezählt und bestimmt, welche optionalen Erweiterungen gültig sind: article öffnet og:article:author, video.movie öffnet og:video:duration, und so weiter. Eigenschaften verwenden RDFa-Style-property-Attribute statt name, weshalb HTML-Validierer manchmal klagen, wenn du kein RDFa-prefix auf <html> deklarierst. In der Praxis funktioniert das Weglassen des Präfixes für jeden Produktions-Scraper. Bilder sollten dem 1,91:1-Seitenverhältnis folgen (1200x630 ist die kanonische Größe) mit einem Minimum von 200x200; darunter entfernt Facebook das Bild vollständig. Lokalisierung wird über og:locale (z.B. en_US, de_DE) und alternative Locales über wiederholtes og:locale:alternate gehandhabt.

Alternativen zu dieser Vorschau

Facebooks Sharing Debugger unter developers.facebook.com/tools/debug/ ist maßgebend für die Frage, wie Facebook selbst deine Card rendern wird - er scrapet tatsächlich deine Live-URL und zeigt Parse-Warnungen. LinkedIns Post Inspector macht dasselbe für LinkedIns Cache. Der Nachteil beider ist, dass sie eine Live, öffentlich zugängliche URL erfordern. Dieser Previewer funktioniert mit Entwurfsinhalten, Localhost-Ausgaben oder Inhalten, die du noch nicht veröffentlicht hast. Für automatisiertes Testen in CI erlauben Bibliotheken wie open-graph-scraper (Node.js) die Bestätigung von OG-Inhalten in Unit-Tests. Dieses Werkzeug gewinnt bei schneller visueller Iteration vor dem Push; die offiziellen Debugger gewinnen bei der Überprüfung, was der Cache einer bestimmten Plattform gerade hält.

Häufig gestellte Fragen

Warum ist 1200x630 die empfohlene Bildgröße?

Es trifft das 1,91:1-Seitenverhältnis, auf das Facebook und LinkedIn zuschneiden, ist groß genug für hochauflösende Displays ohne verschwenderisch zu sein, und bleibt unter dem 8-MB-Dateigrößen-Cap auch als hochqualitatives JPEG. Bilder kleiner als 600x315 werden von Facebook auf reine Text-Cards herabgestuft. Bilder mit sehr unterschiedlichen Seitenverhältnissen werden mittig zugeschnitten, was oft wichtige Inhalte abschneidet.

Was ist der Unterschied zwischen <code>og:url</code> und der Browser-URL?

Sie können legitim abweichen. <code>og:url</code> ist die kanonische URL, die beim Teilen des Links angezeigt werden soll - die Version ohne Tracking-Parameter, Sitzungs-IDs oder UTM-Tags. Browser zeigen die aktuelle URL; Facebook, LinkedIn und Slack zeigen <code>og:url</code>. Setze <code>og:url</code> auf denselben Wert wie dein <code>link rel="canonical"</code>, um Abweichungen zwischen SEO- und Social-Signalen zu vermeiden.

Brauche ich <code>og:type</code>, wenn es mir nur um die Vorschau-Card geht?

Ja - es ist eine Pflicht-Eigenschaft gemäß dem Open-Graph-Protokoll. Die meisten Seiten sollten <code>og:type="website"</code> verwenden, Blog-Posts <code>og:type="article"</code> und Produktseiten <code>og:type="product"</code>. Fehlendes <code>og:type</code> veranlasst Facebook, eine Warnung im Sharing Debugger auszugeben und in seltenen Fällen die Card überhaupt nicht zu rendern.

Welche Plattformen lesen tatsächlich Open Graph?

Facebook, Instagram (für in Stories geteilte Links), LinkedIn, Slack, Discord, iMessage, WhatsApp, Signal, Telegram, Skype, Microsoft Teams, Reddit, Pinterest und die meisten E-Mail-Clients (Gmail, Apple Mail, Outlook.com) beim Vorschauen eingefügter Links. Twitter/X fällt auf Open Graph zurück, wenn Twitter-Card-Tags fehlen, bevorzugt aber seinen eigenen Namensraum.

Warum zeigt meine Share-Vorschau kein Bild?

Prüfe vier Dinge der Reihe nach: Ist die <code>og:image</code>-URL absolut und über HTTPS erreichbar? Ist die Bilddatei unter 8 MB? Überschreitet das Bild das 200x200-Minimum? Gibt dein Server einen 200-Status mit <code>Content-Type: image/jpeg</code> (oder png, webp) zurück? Die meisten fehlenden Vorschauen sind ein 404 auf der Bild-URL oder ein Content-Type-Header von <code>text/html</code> durch eine CDN-Fehlkonfiguration.

Kann ich mehrere <code>og:image</code>-Tags haben?

Ja. Das Open-Graph-Protokoll unterstützt ausdrücklich mehrere Bilder, und Facebook lässt den Teiler auswählen, welches im Share-Dialog angezeigt werden soll. Liste das primäre Bild zuerst auf, gefolgt von Alternativen. Jedes <code>og:image</code> kann sein eigenes <code>og:image:width</code>, <code>og:image:height</code>, <code>og:image:alt</code> und <code>og:image:type</code> dahinter haben.

Wie zwinge ich Facebook, seinen Cache zu aktualisieren?

Füge deine URL in <code>developers.facebook.com/tools/debug/</code> ein und klicke auf "Scrape Again". Das zwingt den Scraper, deine Seite erneut zu laden und den Cache sofort zu leeren. Der Cache ist nach URL verschlüsselt und lebt normalerweise bis zu 30 Tage. LinkedIn hat seinen eigenen Post Inspector für die entsprechende Aktualisierung; Slack cached etwa eine Stunde lang ohne manuelle Leermöglichkeit.

Ist das Abrufen von OG-Daten von einer anderen URL sicher?

Der Fetch geschieht über einen CORS-permissiven Proxy, der nur den HTML-Head-Abschnitt zurückgibt. Deine eigenen Sitzungs-Cookies und Authentifizierung für die Zielseite werden nie angehängt, weil die Anfrage von einem Drittanbieter-Ursprung stammt. Wenn die abgefragte Seite Authentifizierung erfordert, ist das gescrapte Ergebnis das, was nicht authentifizierte Besucher sehen, was genau das ist, was Facebook und LinkedIn erhalten würden.

Wofür ist <code>og:locale</code>?

Es teilt Scrapern mit, in welcher Sprache der Inhalt vorliegt, und steuert sprachspezifisches Rendering. Verwende IETF BCP-47-Tags in Unterstrichform: <code>en_US</code>, <code>pt_BR</code>, <code>pl_PL</code>, <code>ja_JP</code>. Für mehrsprachige Seiten füge <code>og:locale:alternate</code>-Einträge für jedes unterstützte Locale hinzu. Dies ist getrennt von HTML <code>lang</code> und hreflang - diese dienen SEO, OG-Locale dient sozialen Vorschauen.

Sollte ich verschiedene OG-Bilder für Facebook und LinkedIn setzen?

Normalerweise nein - beide rendern denselben 1,91:1-Zuschnitt in ähnlichen Größen. Der eine Fall, in dem du differenzieren könntest, ist, wenn LinkedIn einen konservativeren Zuschnitt macht (es tendiert dazu, mehr der oberen und unteren Kanten zu zeigen) und du sicherstellen möchtest, dass dein Logo auf LinkedIn sichtbar ist. In diesem Fall verwende das LinkedIn-spezifische Namespace-<code>li:</code>- Präfix, obwohl die Unterstützung dafür inkonsistent ist.

Lädt das Vorschau-Werkzeug mein Bild irgendwo hoch?

Nein. Das Werkzeug referenziert deine <code>og:image</code>-URL, indem es sie in einem <code>&lt;img&gt;</code>-Tag im Vorschau-Panel lädt, genauso wie jeder Browser, der die Seite rendert. Deine Bilddatei wird von ihrem aktuellen Host durch deinen eigenen Browser geladen, nicht über einen Zwischenserver dieses Werkzeugs.

Was passiert, wenn ich <code>og:image:alt</code> weglasse?

Die Vorschau rendert trotzdem, aber Screenreader auf Plattformen, die Alt-Text verfügbar machen (LinkedIn tut es, Facebook teilweise), lesen entweder nichts oder fallen auf den <code>og:title</code> zurück. Das Einschließen von <code>og:image:alt</code> mit einer kurzen Beschreibung des Bildinhalts (nicht "Logo-Bild", sondern "Teamfoto beim Produktlaunch 2025") verbessert die Zugänglichkeit für einen nicht unerheblichen Teil des sozialen Publikums.

Mehr SEO & Web Tools

Google SERP Preview

Preview how your page appears in Google search results with character count indicators.

Open tool

Heading Structure Analyzer

Extract and visualize H1-H6 heading hierarchy with SEO issue detection.

Open tool

Hreflang Tag Generator

Generate hreflang link tags for multilingual websites with x-default support.

Open tool

Keyword Density Checker

Analyze word frequency with single words, bigrams and trigrams with density percentages.

Open tool

Meta Tag Generator

Generate complete HTML meta tags including Open Graph and Twitter Card tags.

Open tool

Readability Checker

Free reading level checker and writing grade level analyzer. Flesch-Kincaid, Flesch Reading Ease, Gunning Fog and Coleman-Liau scores in one place.

Open tool