SEO-Tools · läuft in Ihrem Browser

Open-Graph-Vorschau

Facebook Open Graph, Twitter Cards und Bild-Metadaten in der Vorschau prüfen

Keine Anmeldung Kein Dateilimit Nichts wird hochgeladen

Open-Graph-Vorschau

So wird es benutzt 3 Schritte
  1. Geben Sie Social-Titel, Social-Beschreibung und Social-Bild-URL ein.
  2. Drücken Sie Social-Vorschauen generieren.
  3. Prüfen Sie vor der Veröffentlichung, wie die Vorschaukarte in jedem Netzwerk aussieht.
Facebook- & Twitter-Card-Vorschauen

So funktioniert dieses Werkzeug

Es baut eine Vorschau aus den Werten, die Sie eintragen; die bereits auf einer Seite vorhandenen Tags liest es nicht. Schreiben Sie Titel und Beschreibung, geben Sie das Bild an, und sehen Sie die Form der Karte, bevor Sie veröffentlichen – nicht erst, nachdem jemand sie geteilt hat.

Das Layout nähert sich dem an, was Facebook und LinkedIn für eine Karte mit großem Bild darstellen: oben das Bild, darunter die Domain, die Überschrift und eine kurze Beschreibung. Jede Plattform zeichnet das etwas anders und ändert es ohne Ankündigung; die Vorschau ist deshalb ein Anhaltspunkt für Proportion und Länge, keine pixelgenaue Nachbildung einer bestimmten.

Eine Vorschau, der man trauen kann

  • 1200 mal 630 ist die sichere Bildgröße: also nahe 1,91 zu 1. Unterhalb von etwa 600 mal 315 weichen die meisten Plattformen auf ein kleines quadratisches Vorschaubild neben dem Text aus, das im Feed deutlich weniger auffällt.
  • Halten Sie die Überschrift kurz: etwa sechzig Zeichen, dann wird abgeschnitten. Die Karte gibt Ihnen weniger Raum als ein Suchergebnis.
  • Das Bild muss öffentlich erreichbar sein: eine absolute URL, kein Login, nicht per robots.txt gesperrt. Die Plattform ruft es von ihren eigenen Servern ab, nicht aus Ihrem Browser.
  • Rechnen Sie damit, dass Text im Bild beschnitten wird: Jede Plattform beschneidet auf ihr eigenes Seitenverhältnis, deshalb verschwindet Text nahe am Rand auf mindestens einer von ihnen.

What happens when someone pastes your link

The platform fetches your page from its own servers, reads a handful of tags out of the head, downloads the image those tags point at, and builds a card. Then it stores the result. Everything that goes wrong with link previews goes wrong in one of those four steps, and knowing which one narrows the fix considerably.

Note that the fetch comes from the platform, not from the person sharing. Their browser session, their login and their cookies are irrelevant. If the platform's crawler cannot reach the page or the image anonymously, there is no card.

The tags that are read

og:title, og:description, og:image, og:url and og:type do the work. Facebook, LinkedIn, WhatsApp, Slack, Discord and most messaging apps read them. X reads them too when Twitter-specific tags are absent, so the only Twitter tag genuinely worth adding is twitter:card, which selects the large image layout rather than the small thumbnail.

When Open Graph tags are missing entirely, platforms fall back to the title tag and the meta description, which is why a page with no Open Graph markup at all still produces a card — usually a poor one with no image.

The five reasons it is wrong

  1. It is cached. The most common by far. The platform scraped your page once, kept what it found, and is still showing that. Updating the tags changes nothing until the cache is cleared.
  2. The image is unreachable. A relative path, a URL behind a login, an image blocked in robots.txt, or a file on a host that refuses the platform's crawler. The card renders without it.
  3. The image is too small. Below roughly 600 by 315 pixels most platforms drop to a small square thumbnail beside the text, which is a fraction as visible in a feed.
  4. The tags are written by JavaScript. Social crawlers do not run scripts. A head assembled client-side is, to them, an empty head.
  5. Two plugins are both emitting tags. Duplicate og:image tags mean the platform picks one, and it will not consult you about which.

Clearing a cached preview

This is the fix people cannot find, so it is worth stating plainly: you cannot clear it from your own site. Each platform caches independently, sometimes for weeks, and each provides its own re-scrape tool. Facebook's Sharing Debugger, LinkedIn's Post Inspector, and X's card validator all take a URL and fetch it again on demand.

Run the debugger, look at what it reports it found, and fix that rather than what you believe is on the page. The two differ more often than you would expect, usually because of caching at your own end — a CDN or a page cache serving the crawler an older copy of your HTML.

Sizing the image

1200 by 630 pixels, close to a 1.91 to 1 ratio, is the size that works everywhere. PNG or JPEG, comfortably under five megabytes, because very large files time out during scraping and the card falls back to no image at all.

Expect cropping. Each platform trims to its own ratio, and several crop differently on mobile than on desktop, so any wording near an edge will disappear on at least one of them. Keep text away from the margins and away from the exact centre-bottom, where a play button or a duration badge is sometimes overlaid.

Also give the image an absolute URL. A path beginning with a slash resolves against the platform's own domain, not yours, which is why the tag looks correct in your template and produces nothing in the feed.

Drafting the card before you publish

The useful moment to look at a card is before the link exists, while the headline and the image are still editable and before any platform has cached anything. That is what the [msm_tool slug="open-graph-checker"] is for: type the values you are considering and see the shape they make.

What you are judging is proportion and length. Does the headline survive at around sixty characters, which is less room than a search result gives you? Does the description add something rather than repeating the headline? Does the image still read at feed size, which on a phone is roughly the width of a thumb?

What you are not judging is alignment or exact pixels. Platforms redraw their cards without notice and render differently across devices, so no preview anywhere can promise a match. Treat a composed card as a proof of the copy, then verify the real thing with the platform's own debugger once the page is live.

A short checklist before sharing

Absolute image URL, at least 1200 by 630, publicly reachable without a login. A headline that fits. A description that is not a duplicate of the headline. One of each tag rather than two. Tags present in the server-rendered HTML, not built on load. And a re-scrape run through the platform debugger if the page has ever been shared before, because otherwise you are looking at whatever it saw the first time.

Häufig gestellte Fragen

Speziell zum Open-Graph-Vorschau. Allgemeinere Fragen zu dieser Kategorie werden auf der Kategorieseite beantwortet.

Nein. Es erzeugt eine Vorschau aus dem, was Sie eintragen. Um zu sehen, was eine Plattform tatsächlich von einer Live-URL liest, nutzen Sie deren eigenes Werkzeug – den Sharing Debugger von Facebook, den Post Inspector von LinkedIn oder das jeweilige Gegenstück.
Plattformen speichern zwischen, was sie beim ersten Teilen einer URL ausgelesen haben, teils wochenlang. Ihre Debugging-Werkzeuge bieten ein erneutes Auslesen an – der einzige verlässliche Weg, das zu leeren.
X liest Open Graph, wenn Twitter-Tags fehlen; die Karte funktioniert also trotzdem. Das eine Tag, das sich lohnt, ist twitter:card – es wählt zwischen dem Layout mit großem und dem mit kleinem Bild.
1200 mal 630 Pixel, als PNG oder JPEG und deutlich unter fünf Megabyte. Sehr große Dateien laufen beim Auslesen in eine Zeitüberschreitung, und die Karte bleibt ohne Bild.
Nein, und das kann nichts versprechen. Plattformen ändern ihre Kartenlayouts häufig und stellen auf Mobilgerät und Desktop unterschiedlich dar. Nutzen Sie es, um zu beurteilen, ob Text und Bild passen, nicht zur Prüfung der Ausrichtung.

Abonniere Benachrichtigungen zu neuen Tools, Funktionen und Produktivitätstipps.