Warum zeigt meine Linkvorschau das alte Bild, nachdem ich die Tags aktualisiert habe?

Jede große Plattform speichert das Ergebnis des Scrapens Ihrer Seite zwischen, oft für eine Woche oder länger, sodass ein Link, den Sie vor dem Fix geteilt haben, die veraltete Karte weiterhin anzeigt. Das Aktualisieren der Tags macht diesen Cache nicht von selbst ungültig. Durch das erneute Scrapen der URL im Plattform-Debugger - dem Facebook Sharing Debugger, dem LinkedIn Post Inspector oder durch erneutes Teilen in Slack - wird ein neuer Abruf erzwungen. Das Hinzufügen einer harmlosen Abfragezeichenfolge zur URL erzeugt auch eine Cache-freie Vorschau zum Testen.

Benötige ich sowohl OG: als auch Twitter: Tags?

Nicht immer, aber es ist sicherer, beides einzubinden X fällt auf Open Graph-Tags zurück, wenn die twitter: Äquivalente fehlen, so dass eine Seite mit nur og: title, og: description und og:image noch eine Karte hervorbringt Was man in Open Graph nicht ausdrücken kann, ist der Kartenstil: twitter:card entscheidet zwischen dem großen Banner und dem kompakten Zusammenfassungslayout, und twitter:site und twitter:creator schreiben die Karte Ihren Konten zu Fügen Sie diese drei hinzu und lassen Sie die og: Tags den Rest abdecken.

Wie lange sollte meine OG:Title und OG:Description dauern?

Behalten Sie og: title bei oder unter etwa 60 Zeichen - die meisten Karten kürzen darüber hinaus, und schmale mobile Karten klippen früher. Für og: description divergieren die Grenzen: X zeigt ungefähr 110 Zeichen, Facebook und LinkedIn zeigen näher an 155 bis 200. Wenn Sie auf die engere X-Grenze schreiben, liest sich Ihre Beschreibung überall vollständig. Alles Vergangene, was nicht verloren geht, ist nur hinter einer Auslassungserklärung versteckt, also laden Sie die wichtigen Wörter im Voraus.

Warum ist meine Vorschau leer oder zeigt nur die URL?

Die üblichen Ursachen sind ein og: Bild, das ein relativer Pfad ist und keine absolute URL, ein Bild, das über einfachem http bereitgestellt wird, Tags, die außerhalb des platziert sind, Tags, die von clientseitigem JavaScript eingeschleust werden, dass der Scraper nie ausgeführt wird, oder die Seite, die einen Nicht-200-Status zurückgibt, oder eine Login-Weiterleitung zum Scraper Überprüfen Sie, ob die Tags im Roh-HTML erscheinen, das Ihr Server zurückgibt - Quelle anzeigen und nicht den Browser-Inspektor, da der Inspektor das DOM anzeigt, nachdem JavaScript ausgeführt wurde.

Ruft dieses Tool meine URL ab, um die Tags zu überprüfen?

kein drohen Es macht überhaupt keine Netzwerkanfragen. Es funktioniert mit den Tags, die Sie in das Formular eingeben oder als HTML einfügen, und alles wird in Ihrem Browser analysiert und gerendert. Dies ist eine bewusste Wahl des Designs: Browser können aufgrund von CORS keine beliebigen Seiten von Drittanbietern abrufen, und ein serverseitiger Abruf würde bedeuten, Ihre unveröffentlichten URLs an eine andere Person zu senden. Da nichts abgerufen wird, können Sie Seiten auf localhost, in Staging oder hinter einem Login validieren.

Kann ich eine noch nicht veröffentlichte Seite in der Vorschau anzeigen?

Ja, und es ist der Hauptgrund, ein solches Tool anstelle eines Plattform-Debuggers zu verwenden. Die offiziellen Debugger müssen Ihre Live-URL abrufen, daher sind sie für eine Seite, die nicht bereitgestellt wird, nutzlos. Hier fügen Sie einfach die Tags ein, die Sie versenden möchten - von Ihrer Vorlage, Ihrem Framework-Metadatenobjekt oder einem lokalen Build - und die Vorschauen werden sofort gerendert, keine Bereitstellung erforderlich.

Was passiert, wenn ich ein Tag weglasse?

Scraper fallen zurück, und die Fallbacks sind unvorhersehbar Ohne og: title verwenden sie normalerweise das -Tag, und ohne og:description verwenden sie möglicherweise die Meta-Beschreibung oder den Text des Hauptteils. Ohne og: Bild zeigen die meisten Plattformen eine reine Textkarte, obwohl einige ein beliebiges Bild von der Seite greifen - oft ein Logo oder ein Tracking-Pixel. Ohne og:url wird die gemeinsame Adresse unverändert verwendet, was bedeutet, dass Tracking-Parameter Ihre Sharenzählungen fragmentieren können. Das explizite Festlegen der Tags ist die einzige Möglichkeit, das Ergebnis zu steuern.

Hilft Open Graph Markup meinem Suchranking?

Nicht direkt. Open Graph-Tags werden von Social- und Chat-Plattformen gelesen und von Suchmaschinen nicht als Ranking-Faktor verwendet. Was sie beeinflussen, ist die Klickrate auf jede Aktie Ihres Links, die den Traffic und im Laufe der Zeit die Signale, die wichtig sind, antreibt Behandeln Sie sie als Conversion-Optimierung für gemeinsam genutzte Links und nicht als SEO-Ranking-Hebel.

Ist das Open GraphVorschau-Tool kostenlos und privat?

Ja. Es ist völlig kostenlos ohne Anmeldung, und jede Analyse, Validierung und Vorschau erfolgt in JavaScript in Ihrem Browser. Die von Ihnen eingegebenen Titel, URLs und Bildverknüpfungen werden nie an einen Server gesendet, und das Tool funktioniert nach dem Laden der Seite weiter offline.

Open-Graph-Vorschau

Vorschau, wie Ihr Link auf Facebook, X, LinkedIn, Slack und Discord aussehen wird, validieren Sie Ihre OG: Tags und kopieren Sie einen korrekten Metablock

Paste existing meta HTML (optional)

Nothing is fetched or uploaded. Paste the tags from your page source and they are parsed in your browser.

og:title53/60

og:description127/200

og:image

og:url

og:site_name5/40

twitter:site

twitter:creator

og:type

twitter:card

Validation

8 1 0

og:title 53 characters - displays in full on every platform.
og:description 127 characters - fine for Facebook and LinkedIn, but X truncates past ~110.
og:image Absolute HTTPS image URL. Serve it at 1200x630 (1.91:1) for the best result.
og:url Absolute canonical URL set.
og:type Set to "website".
og:site_name 5 characters - shown above the title on most cards.
twitter:card Large banner card. Best when your image is 1200x630 or wider.
twitter:site Valid handle (@toolz).
twitter:creator Valid handle (@toolz).

Generated meta tags

<!-- Open Graph / Facebook / LinkedIn / Slack / Discord -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://toolz.dev/tools/open-graph-preview" />
<meta property="og:title" content="Open Graph Preview: Test Social Cards Before You Ship" />
<meta property="og:description" content="Preview how your link looks on Facebook, X, LinkedIn, Slack, and Discord. Validate your og: tags and copy a correct meta block." />
<meta property="og:site_name" content="Toolz" />
<meta property="og:image" content="https://toolz.dev/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Open Graph Preview: Test Social Cards Before You Ship" />

<!-- X / Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="https://toolz.dev/tools/open-graph-preview" />
<meta name="twitter:title" content="Open Graph Preview: Test Social Cards Before You Ship" />
<meta name="twitter:description" content="Preview how your link looks on Facebook, X, LinkedIn, Slack, and Discord. Validate your og: tags and copy a correct meta block." />
<meta name="twitter:image" content="https://toolz.dev/og-image.png" />
<meta name="twitter:site" content="@toolz" />
<meta name="twitter:creator" content="@toolz" />

Social card previews

Approximations of each platform's layout - exact rendering changes over time.

Facebook