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

Jede wichtige Plattform zwischenspeichert das Ergebnis des Scrapings Ihrer Seite, oft eine Woche oder länger, sodass ein Link, den Sie vor dem Fix geteilt haben, die veraltete Karte immer wieder anzeigt. Durch das Aktualisieren der Tags wird dieser Cache nicht selbständig. betreffs - Scrape die URL im Plattform-Debugger - den Facebook-Sharing-Debugger, den LinkedIn-Post-Inspektor oder durch erneutes Teilen in Slack -, um einen neuen Abruf zu erzwingen. 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 einzuschließen. X greift auf die offenen Graph-Tags zurück, wenn die entsprechenden Graphen fehlen: Eine Seite mit nur og:title, og:description und og:image erzeugt weiterhin eine Karte. Was Sie in Open Graph nicht ausdrücken können, ist der Kartenstil: Twitter: Card entscheidet zwischen dem großen Banner und dem kompakten Zusammenfassungslayout, und Twitter: Site und Twitter: Creator weisen 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?

OG:Title bei oder unter etwa 60 Zeichen - die meisten Karten kürzen darüber hinaus und enger mobiler Karten schneiden früher ab. Bei OG:Description Diverge: X zeigt ungefähr 110 Zeichen, Facebook und LinkedIn näher an 155 bis 200. Wenn Sie auf das engere X-Limit schreiben, wird Ihre Beschreibung überall vollständig gelesen. Alles, was nicht verloren geht, ist nur hinter einer Auslassungsstelle versteckt, also laden Sie die wichtigen Wörter in die Front.

Warum ist meine Vorschau leer oder zeigt nur die URL?

Die üblichen Ursachen sind ein OG: Bild, das eher ein relativer Pfad als eine absolute URL ist, ein Bild, das über einfaches http bereitgestellt wird, Tags, die außerhalb des platziert sind , Tags, die von clientseitigem Javascript eingefügt werden, die der Scraper niemals ausführt, oder die Seite, die einen Status ohne 200- oder eine Login-Weiterleitung zum Scraper zurückgibt. Überprüfen Sie, ob die Tags in der von Ihrem Server zurückgegebenen RAW-HTML-Datei angezeigt werden - Ansichtsquelle statt des Browser-Inspektors, da der Inspektor das DOM nach dem Ausführen von Javascript anzeigt.

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 zu verwenden und nicht einen Plattform-Debugger. Die offiziellen Debugger müssen Ihre Live-URL abrufen, damit sie für eine Seite, die nicht bereitgestellt wird, nutzlos sind. Hier fügen Sie einfach die Tags ein, die Sie versenden möchten - aus Ihrer Vorlage, Ihrem Framework-Metadatenobjekt oder einem lokalen Build - und die Vorschauen werden sofort gerendert, es ist keine Bereitstellung erforderlich.

Was passiert, wenn ich ein Tag weglasse?

Schaber fallen zurück, und die Fallbacks sind unvorhersehbar. Ohne OG:Title verwenden sie normalerweise das -Tag, und ohne og:beschreiben können sie die Meta-Beschreibung oder den Text des Schabens verwenden. Ohne OG:Image Die meisten Plattformen zeigen eine Nur-Text-Karte, obwohl einige ein beliebiges Bild von der Seite abrufen - oft ein Logo oder ein Tracking-Pixel. Ohne OG:URL wird die freigegebene Adresse so verwendet, wie sie ist, was bedeutet, dass Tracking-Parameter Ihre Freigabezahlen fragmentieren können. Das explizite Setzen der Tags ist die einzige Möglichkeit, das Ergebnis zu steuern.

Hilft Open Graph Markup meiner Suche nach Ranglisten?

Nicht direkt. Offene Graph-Tags werden von Social- und Chat-Plattformen gelesen und nicht als Ranking-Faktor von Suchmaschinen verwendet. Was sie beeinflussen, ist die Klickrate auf jeden Teil Ihrer Links, die den Verkehr und im Laufe der Zeit die Signale ansteuert, die wichtig sind. Behandeln Sie sie als Conversion-Optimierung für gemeinsam genutzte Links und nicht als SEO-Ranghebel.

Ist das Open Graph Preview 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