WikiPlus

Open-Graph-Vorschau

Sehen Sie, wie Ihre Links in sozialen Netzwerken angezeigt werden. 100% kostenlos, funktioniert im Browser.

Lokale Verarbeitung
1.4s Ø
4.8 von 5 — basierend auf 1,247 Nutzungen

Von Sergio Robles — Gründer

Facebook-Vorschau

example.comSeitentitel eingeben...Seitenbeschreibung eingeben...

Twitter-Vorschau

Seitentitel eingeben...Seitenbeschreibung eingeben...example.com
<meta property="og:type" content="website">

<meta name="twitter:card" content="summary_large_image">
Ihre Dateien werden lokal in Ihrem Browser verarbeitet. Wir laden Ihre Daten nie hoch und speichern sie nicht.

Was ist Open-Graph-Vorschau?

Die OG Preview von WikiPlus zeigt genau, wie dein Link auf Facebook, X, LinkedIn, Slack, Discord, WhatsApp und iMessage aussieht. Sie ruft die aktuellen Open Graph Tags von jeder URL ab und rendert sie. Marketer prüfen eine Kampagne vor dem Launch. Keine Überraschung durch ein fehlendes Bild. Social-Media-Manager debuggen, warum eine Vorschau nach einem CMS-Update kaputt ist. SEO-Berater prüfen Kundenseiten auf fehlende oder zu große og:image Tags. Du kannst den Live-URL-Abruf nutzen oder Meta-Tags direkt einfügen. Vorschauen werden in deinem Browser gerendert. Pre-Launch-URLs und unveröffentlichte Kampagnentexte bleiben privat. Der Abruf holt die HTTP-Antwort der URL. Er wird serverseitig geleitet, um CORS zu umgehen. Dann werden die Head-Meta-Tags geparst und eine pixelgenaue Vorschau für jede Plattform gerendert. Jede Vorschau zeigt das tatsächliche Fallback-Verhalten bei fehlendem, zu großem oder falsch proportioniertem og:image.

Wann sollte ich dieses Werkzeug nutzen?

  • Eine Blogbeitragsvorschau vor der Ankündigung auf Twitter überprüfen
  • Debuggen, warum eine geteilte URL auf LinkedIn das falsche Bild zeigt
  • Bestätigen, dass Facebook nach einem Deployment das aktualisierte Open-Graph-Bild liest
  • Die Vorschau einer Kunden-Landingpage vor einer Marketingkampagne prüfen

Open-Graph-Tags in der Vorschau ansehen

  1. 1Füge die vollständige URL der Seite ein, die du prüfen willst.
  2. 2Klicke auf Abrufen, um die Meta- und Open-Graph-Tags der Seite zu laden.
  3. 3Prüfe die gerenderten Vorschauen für Facebook, Twitter und LinkedIn.
  4. 4Finde fehlende Felder wie og:image oder twitter:card im Bericht.
  5. 5Korrigiere die Meta-Tags auf deiner Seite und starte die Vorschau erneut.

Häufig gestellte Fragen

Was ist eine Open-Graph-Vorschau und warum ist sie wichtig?

An Open Graph preview is the rich link card that appears automatically when you paste a URL into Facebook, LinkedIn, WhatsApp, Discord, Slack, X, iMessage, Telegram, Reddit, or virtually any modern messaging platform that supports link unfurling. Instead of displaying a bare URL, the platform renders a structured card containing a large image, a title, a short description, and the source domain. This transformation is driven entirely by meta tags placed in the HTML head of the linked page — specifically og:title, og:description, og:image, og:url, og:type, and optionally og:image:width and og:image:height. The visual impact on engagement is substantial. Research consistently shows that posts with rich image previews receive two to three times more clicks than posts sharing bare URLs, because the card communicates content, context, and credibility before the user decides whether to follow the link. For marketing teams, a broken or missing OG preview on a campaign URL is a direct revenue leak — every social post, email footer link, or Slack announcement that fails to render a preview loses a significant fraction of its potential click-through traffic. For developers and SEO practitioners, OG previews are also a signal of overall meta-tag health. A page with correctly configured OG tags is also more likely to have a coherent title, description, and canonical setup. The WikiPlus OG Preview tool lets you inspect and debug the OG card for any URL before you share it publicly, catching missing images, truncated titles, and wrong aspect ratios while you can still fix them.

Warum zeigen meine Vorschauen manchmal das falsche Bild oder alten Inhalt?

The root cause is aggressive caching by social platforms. Every major network — Facebook, LinkedIn, X, WhatsApp, and Discord — caches the OG metadata it fetches from a URL the first time that URL is shared on the platform. The cache TTL varies by platform, ranging from a few hours for WhatsApp to several days for LinkedIn and Facebook in some configurations. After you update your og:image, og:title, or og:description tags, the platform's crawler has not yet re-fetched your URL, so it continues serving the stale preview from its cache to every user who shares the link during that window. Each platform provides a dedicated tool to force an immediate cache refresh. Facebook offers the Sharing Debugger at developers.facebook.com/tools/debug — enter your URL and click Debug, then Scrape Again to request a fresh fetch. LinkedIn provides the Post Inspector at linkedin.com/post-inspector. X has the Card Validator at cards-dev.twitter.com/validator. For WhatsApp and iMessage there is no programmatic cache-busting tool; the most reliable approach is to add a cache-busting query parameter to the URL — for example, appending ?v=2 — which the platforms treat as a distinct URL and fetch fresh. The WikiPlus OG Preview tool is not subject to any caching delay. It fetches the live HTTP response of your URL at the moment you submit it, parses the current head tags, and renders a preview that reflects your actual deployed tags right now. This makes it the fastest way to verify a fix before announcing a URL publicly.

Welche Bildgröße und welches Format sind am besten für og:image?

The industry-standard size that renders correctly across all major platforms without cropping, letterboxing, or upscaling artifacts is 1200 by 630 pixels at a 1.91:1 aspect ratio. This dimension is documented as recommended by Facebook, LinkedIn, and Discord, and is the trigger size for X's summary_large_image card format — images below 300 px wide display in the compact summary format regardless of the twitter:card setting. The file size should stay under 1 MB to avoid the degraded or missing preview that some mobile clients show when the image is slow to load on a constrained connection. The practical production target is 200–400 KB. For JPEG, quality setting 80–85 at 1200×630 consistently lands in this range for photographic content. For text-heavy OG cards with solid color backgrounds, PNG often produces a smaller file than JPEG because the flat regions compress extremely efficiently. WebP delivers the smallest file sizes and is supported by all browser-based clients including Chrome, Safari, and Firefox on both mobile and desktop. The compatibility concern with WebP is older native messenger apps — specifically Android WhatsApp versions below 2.21 and certain email clients with inline link preview rendering. If any significant portion of your audience uses these clients, JPEG remains the safer choice. Always specify the og:image URL as an absolute HTTPS URL. Relative paths fail when the social crawler fetches the image because it has no document base URL to resolve against. Include og:image:width and og:image:height as numeric attributes to allow crawlers to skip the dimension-probe request and generate previews faster on the first share.

Stimmt eure Vorschau mit dem überein, was Facebook und LinkedIn wirklich zeigen?

The WikiPlus OG Preview is engineered to match the documented rendering specifications that Facebook and LinkedIn publish in their developer documentation, producing previews that are visually accurate for the large majority of users across the most common device and app configurations. The preview applies the correct aspect ratio crop rules — Facebook crops og:image to a 1.91:1 rectangle, LinkedIn to a 1.91:1 rectangle for standard posts and a 4:1 strip for company page previews — using the same focal-point centering behavior each platform documents. Typography, font sizes, line clamping, and domain badge placement follow the values published by each platform as of early 2025. The preview also simulates the fallback behavior for missing or malformed tags: what card format renders when og:image is absent, when the image fails to load, when og:description is empty, and when og:title exceeds the character limit. For the highest possible accuracy on a specific platform and app version, use that platform's native debugger: Facebook Sharing Debugger, LinkedIn Post Inspector, or X Card Validator. These tools render the preview using the actual production code of the platform and reflect any quarterly rendering changes immediately. WikiPlus updates its preview rules with each major platform rendering change, but there is an inherent lag of a few weeks. A practical workflow is to use WikiPlus for rapid iteration during development — fix the tags, re-preview instantly without waiting for cache purge — then confirm the final result in the platform's native debugger before launch.

Der Inhalt dieser Seite ist unter CC BY 4.0 verfügbar.