Die schlechteste Zeit, um eine kaputte Link-Vorschau zu entdecken, ist nach dem Start-Tweet. Sie verbringen eine Woche auf einer Seite, schreiben die Ankündigung, Sie drücken auf Senden - und die angezeigte Karte ist ein graues Rechteck mit einem abgeschnittenen Titel und ohne Bild, weil og:image auf /images/og.png anstelle https://yoursite.com/images/og.pngdrohen Der Beitrag ist schon raus. Die Karte ist bereits zwischengespeichert. Sie können es beheben und dann alle bitten, erneut zu teilen.
Eine offene Grafikvorschau löst dies durch Verschieben des Checks früher. Anstatt zu veröffentlichen und zu hoffen, schauen Sie sich an, was die Karte sein wird, während die Tags noch bearbeitet werden können. Das ist die gesamte Prämisse der Graph-Vorschau öffnen Werkzeug: Geben Sie Ihre Tags ein oder fügen Sie die bereits vorhandenen ein und sehen Sie ungefähre Facebook-, X-, LinkedIn-, Slack- und Discord-Karten, die nebeneinander gerendert werden, mit einem Pass / Warn / Fail-Verdikt auf jedem Feld.
Der Grund, warum eine einzelne Vorschau nicht ausreicht, ist, dass jede Plattform dieselben Tags liest und sie anders rendert. X schneidet Beschreibungen mit ungefähr 110 Zeichen ab; Facebook zeigt näher an 155. LinkedIn löscht die Beschreibung häufig vollständig und zeigt nur das Bild, den Titel und die Domäne. Slack bricht das Ganze in eine kompakte Auflage mit farbiger Schiene zusammen. Discord bettet die Beschreibung prominent ein, aber schrumpft das Bild. Ein Titel, der sich wunderbar in eine Facebook-Karte passt, kann auf X mitten im Wort geschnitten werden, und Sie werden es nie bemerken, wenn Sie nicht beide betrachten.
Ich baue toolz.dev Und versende ständig Seiten, und ich hatte die Publish-Check-Fix-Schleife satt. Das Tool läuft vollständig im Browser und führt überhaupt keine Netzwerkaufrufe aus - es holt nie Ihre URL ab - was bedeutet, dass es auch für Seiten funktioniert, die noch nicht bereitgestellt sind, sich hinter einem Login befinden oder auf einer Staging-Domain leben, die die offiziellen Plattform-Debugger nicht erreichen können.
tl; dr: Offene Diagramm-Tags steuern, wie Ihr Link aussieht, wenn er freigegeben wird. Jede Plattform liest das gleiche
og:Tags, aber abgeschnitten und anders ausgelegt, so dass die Vorschau einer Plattform nichts über die anderen aussagt. der Graph-Vorschau öffnen Das Werkzeug rendert fünf Plattformkarten aus einem Satz von Tags, validiert jedes Feld gegen aktuelle Plattformbeschränkungen, analysiert einen vorhandenen Tag-Block, falls Sie bereits einen haben, und gibt Ihnen eine kopierfähige<meta>Block - Alle clientseitig, ohne Schaben und ohne Upload.
Hauptmerkmale
Fünf Plattformvorschauen aus einem Satz von Tags
Das Tool rendert ungefähre Karten für Facebook, X in beiden summary_large_image und summary Stile, LinkedIn, Slack und Discord. Sie alle lesen aus denselben Feldern. Wenn Sie also einen Titel schneiden, sehen Sie ihn überall auf einmal. Der Punkt ist nicht pixelgenauer Fidelity - Plattformen überdenken ihre Karten ohne Vorwarnung - sondern relative Wiedergabetreue: Korrigieren Sie Proportionen, korrigieren Sie Kürzungspunkte, korrigieren Sie die Feldreihenfolge, sodass Sie sehen können, welche Plattform diejenige ist, die unterbricht.
Paste-and-parse für Tags, die Sie bereits haben
Wenn die Seite vorhanden ist, möchten Sie selten neun Felder neu eingeben. Fügen Sie das rohe HTML ein - ein Ganzes <head>, ein View-Source-Dump oder ein lose Block von <meta> Linien — in die Parsebox und der eingebaute Parser zieht alle heraus og: und twitter: Tag erkennt und lädt sie in das Formular. Der Parser ist regex-basiert und nicht auf DOM-basiert, was denselben Code in einem Browser, im Knoten und im Desktop-Build ohne Änderung ausgeführt werden lässt.
Feldvalidierung mit realen Grenzen
Jedes Feld erhält einen Pass, eine Warnung oder einen Fehlerstatus. Ein Titel über 60 Zeichen scheitert. Eine Beschreibung zwischen 110 und 155 Zeichen warnt, da sie vollständig auf Facebook und LinkedIn gelesen wird, aber auf X geschnitten wird. og:image Der Pfad schlägt sofort fehl - Schaber lösen sie nicht auf. ein og:image über Ebene serviert http Warnt, weil mehrere Plattformen sich weigern, nicht-https-Images zu rendern. ein twitter:site Wert, der kein gültiger Griff ist, schlägt fehl. Die Urteile sind spezifisch genug, um zu handeln, anstatt ein generisches "sieht gut aus".
Bildregeln, die Sie tatsächlich befolgen können
Großbildkarten auf jeder großen Plattform nehmen ein Bild von 1,91:1 an, 1200x630 Pixel ist die Größe, die alle gleichzeitig erfüllt. Das Tool gibt an, dass das Ziel explizit anvisiert, die Fehlermodi, die Bilder stillschweigend verschwinden lassen, und – weil eine Karte mit einem gebrochenen Bild der häufigste Fehler bei der offenen Grafik ist – Ihre tatsächliche og:image URL in jeder Vorschau, die auf einen freien Platzhalter zurückfällt, wenn das Bild nicht geladen werden kann.
Ein kopierfähiger, korrekt entkommener Metablock
Die generierte Ausgabe ist ein kompletter Tag-Block, kein Fragment. Es beinhaltet og:image:width und og:image:height, was mehr wichtig ist als die meisten Leute: Ohne sie rendern einige Schaber eine reine Textkarte beim ersten Abruf und zeigen das Bild erst, nachdem sie es heruntergeladen und gemessen haben, was mehrere Stunden später sein kann. Werte werden HTML-entfernt, so dass ein kaufmännisches und ein Zitat in Ihrer Beschreibung nicht aus dem Attribut ausbrechen und Ihr Markup beschädigen kann.
100% clientseitig, ohne Schaben
Das Tool fordert niemals Ihre URL an. Dies ist absichtlich und es ist wert, warum: Ein Browser kann aufgrund der gleichen Herkunftsrichtlinie nicht eine beliebige Seite eines Drittanbieters abrufen, und ein serverseitiger Abruf würde bedeuten, dass Sie Ihre unveröffentlichten URLs an die Protokolle eines anderen versenden. Wenn Sie von den Tags ausgehen, die Sie liefern, gehen Sie beide Probleme um und entsperren den Fall, dass die offiziellen Debugger nicht bedienen können - eine Seite, die noch nicht online ist, validiert. sich vorstellen Datenschutz in Online-Tools für die breitere Argumentation.
So verwenden Sie das Open Graph-Vorschau-Tool
Schritt 1: Laden Sie Ihre Tags
Sie haben zwei Wege. Wenn Sie Metadaten von Grund auf neu schreiben, füllen Sie das Formular aus: og:title, og:description, og:image, og:url, og:site_name, dann wählen Sie eine og:type und a twitter:card Stil und fügen Sie Ihre twitter:site und twitter:creator Griffe.
Wenn die Seite bereits Tags hat, fügen Sie sie stattdessen ein. Öffnen Sie die Seite, View Source (nicht der Browser-Inspektor - mehr zu dieser Unterscheidung unten), kopieren Sie die <head>, und lass es in die Parse Box. Klicken Sie auf Parse-Tags und alles erkannte wird in das Formular geladen. Der Parser versteht auch die Aliase: og:image:secure_url und og:image:url Beide zuführen das Bildfeld und twitter:title, twitter:description, und twitter:image werden als Fallbacks verwendet, wenn ihre og: Äquivalente fehlen - was die Auflösung der Plattformen selbst widerspiegelt.
Schritt 2: Lesen Sie das Validierungsfeld
Die Validierungsliste ist so geordnet, wie die Felder wichtig sind. Beheben Sie zuerst die Fehler: Ein fehlendes og:image, ein relativer Bildpfad, ein Titel über dem Limit. Dann schauen Sie sich die Warnungen an, bei denen es hauptsächlich um die Lücke zwischen den Plattformen geht - eine Beschreibung, die für Facebook in Ordnung ist, aber lange nach X, einem Fehlen, ist og:site_name Das heißt, Ihre Karte zeigt einen nackten Hostnamen anstelle Ihrer Marke.
Die Zähler oben auf dem Panel geben Ihnen eine schnelle Lektüre. Zero scheitert und ein paar Warnungen sind ein perfekter Versand, Warnungen sind Kompromisse, keine Fehler.
Schritt 3: Vergleichen Sie die Karten
Dies ist der Schritt, den die Leute überspringen, und derjenige, der die wirklichen Probleme auffängt. Scannen Sie alle sechs Vorschauen. Wird der Titel auf der X-Zusammenfassungskarte geschnitten? verschwindet die Beschreibung auf LinkedIn (das wird normalerweise - das wird erwartet)? Sieht das Bild bei 1,91: 1 richtig aus oder ist Ihr Logo beschnitten, weil Sie eine quadratische Grafik entworfen haben und die Karte es breit macht?
Zuschneiden und erneut prüfen, bis jede Karte sauber liest. Eine nützliche Disziplin: Schreiben Sie bis zur engsten Einschränkung. Wenn Ihre Beschreibung mit 110 Zeichen vollständig angezeigt wird, wird sie überall vollständig gelesen. Wenn Ihr Titel mit 55 Jahren funktioniert, überlebt er jede Karte und jedes mobile Layout.
Schritt 4: Kopieren Sie den Metablock und versenden Sie ihn
Kopieren Sie den generierten Block in Ihre Seite <head>drohen In einem Framework — next.js, Nuxt, Sveltekit, Astro — Sie werden nicht raw einfügen <meta> Tags, aber der Block ist immer noch Ihre Quelle der Wahrheit, welche Felder in der Metadaten-API des Frameworks gefüllt werden sollen.
Dann den Schritt, den jeder vergisst: Scrape die URL in den Debugger der einzelnen Plattformen. Der Versand des Fixes löscht die zwischengespeicherte Karte nicht. der Meta-Tag-Generator Ist hier das Begleitwerkzeug, wenn Sie auch die Standard-SEO-Tags - Titel, Beschreibung, kanonische, Roboter - benötigen, die neben den sozialen Tags leben.
So funktioniert das Open Graph-Protokoll tatsächlich
Open Graph wurde 2010 bei Facebook gestartet, um eine Webseite in einen Knoten in einem sozialen Diagramm zu verwandeln. Der Ehrgeiz verblasste; das Tag-Vokabular blieb bestehen, und es ist jetzt der Standard, den Facebook, LinkedIn, Slack, Discord, WhatsApp, Pinterest, iMessage, Signal und die meisten anderen Link-Entfurle-Software lesen.
Der Mechanismus ist einfach. Wenn ein Link freigegeben wird, sendet die Plattform einen Bot an Ihre URL — facebookexternalhit, LinkedInBot, Slackbot-LinkExpanding, Discordbot, Twitterbotdrohen Dieser Bot fordert das rohe HTML an, liest die <head>, extrahiert die og: und twitter: meta-Tags und baut eine Karte. Es ist ein einzelner HTTP-Get und ein Parse. Der Bot ist kein Browser: Die meisten dieser Crawler führen kein Javascript aus, was die Hauptursache eines gesamten Bug-Genres ist.
Die Tags selbst
Vier Tags werden wie vom Protokoll benötigt beschrieben: og:title, og:type, og:image, und og:urldrohen in der Praxis og:description und og:site_name sind gleichermaßen tragfähig, denn ohne sie ist die Karte entweder frei oder fällt auf den Text zurück, der der Schaber auf der Seite finden kann. Die Tags verwenden die property Attribut, nicht name - <meta property="og:title" content="..." /> - was die Leute stolpert, weil die Twitter-Tags das Gegenteil tun und verwenden namedrohen Die meisten Parser verzeihen dies, aber die Plattformen sind nicht immer, also lohnt es sich, richtig zu werden.
OG: versus Twitter: Vorrang
X liest zuerst die Twitter-Karten-Tags und fällt zurück, wenn sie abwesend sind. das bedeutet eine Seite mit nur og:title, og:description, und og:image produziert immer noch eine funktionierende X-Karte - der Fallback ist beabsichtigt.
Also was braucht eigentlich ein twitter: Tag? Drei Dinge. twitter:card Entscheidet das Layout und es gibt kein Open Graph-Äquivalent: Ohne es wählt X einen Kartenstil basierend auf dem, was es findet, was keine Entscheidung ist, die Sie delegieren möchten. twitter:site ordnet die Karte einem Markenkonto zu. twitter:creator schreibt dem Autor zu. Alles andere kann sicher aus offenem Graphen kommen.
Die praktische Regel: Schreiben Sie vollständige Open Graph-Tags und fügen Sie dann genau diese drei hinzu twitter: Tags. Vervielfältigung twitter:title und twitter:description ist harmlos, aber sinnlos, es sei denn, Sie möchten wirklich eine andere Kopie auf X als anderswo - was gelegentlich eine legitime Wahl ist, da X's engere Kürzung manchmal eine kürzere, schlagkräftigere Beschreibung rechtfertigt.
Bildabmessungen, Verhältnisse und das Zuschnittproblem
Das Seitenverhältnis 1,91:1 ist die zu verinnende Zahl. 1200x630 Pixel trifft es, ist groß genug für Retina-Displays und ist das, was Facebook, LinkedIn und X alle ohne Verzerrung für Großbildkarten rendern.
Der Fehlermodus ist subtil: Plattformen lehnen normalerweise ein Bild außerhalb des Verhältnisses nicht ab, sondern beschneiden es. Laden Sie eine quadratische 1000x1000-Grafik hoch und Facebook wird sie auf 1,91: 1 zentrieren, was ungefähr ein Drittel von oben und unten aufschneidet. Wenn Ihr Überschriftentext vertikal zentriert war, überdauert er, wenn Sie ein Logo oben anbringen, nicht. Bewahren Sie aussagekräftige Inhalte in einem sicheren Bereich und von den Kanten entfernt auf, da unterschiedliche Oberflächen durch leicht unterschiedliche Mengen beschneiden.
das kompakte x summary Karte ist die Ausnahme. Es möchte ein quadratisches Bild von mindestens 144x144 und schneidet ein 1,91: 1-Banner in ein Quadrat - das es normalerweise zerstört. Wenn Sie absichtlich verwenden summary, ein quadratisches Bild liefern; wenn Sie ein Banner liefern, verwenden Sie summary_large_imagedrohen
Halten Sie die Dateigröße unter 5 MB (Facebooks dokumentierte Obergrenze; andere Plattformen sind in der Praxis strenger), dienen als PNG, JPEG oder WebP und verwenden immer eine absolute HTTPS-URL. Relative Pfade und protokollrelat // URLs sind die beiden häufigsten Möglichkeiten, wie ein Bild nicht stillschweigend angezeigt wird.
Warum Scraper-Cache und wie man den Cache kaputt macht
Jede Plattform zwischenspeichert das Ergebnis des Scrapings Ihrer Seite - normalerweise für etwa sieben Tage, manchmal länger. Dies ist keine Sturheit: Ein beliebter Link kann tausende Male pro Stunde geteilt werden, und das erneute Abrufen Ihrer Seite für jede Freigabe wäre ein Denial-of-Service-Angriff, der von der Plattform durchgeführt wird. Also kratzen sie einmal und verwenden sie wieder.
Die Folge ist, dass das Fixieren Ihrer Tags die Karte nicht repariert. Die alte Vorschau bleibt für jede bestehende Freigabe und für neue Freigaben bestehen, bis der Cache abläuft. So erzwingen Sie eine Aktualisierung:
- Facebook: Der Sharing-Debugger unter Verwendung der Schaltfläche "Wieder abkratzen". Dadurch wird auch der von Instagram und WhatsApp verwendete Cache gelöscht.
- LinkedIn: Der Postinspektor. Die Eingabe der URL löst ein neues Kratzer aus.
- x: Der Kartenvalidator wurde veraltet und der Zugriff ist inkonsistent. In der Praxis ist das Posten des Links die einzige zuverlässige Aktualisierung.
- Slack: Unfurl-Caches verfallen selbstständig, das Hinzufügen eines harmlosen Abfrageparameters erzeugt sofort eine neue Entfaltung.
- Zwietracht: Ähnliche - Eine geänderte Abfragezeichenfolge ist die praktische Problemumgehung.
Dieser Query-String-Trick ist die universelle Fluchtluke: https://example.com/page?v=2 ist, zu einem Scraper, eine andere URL ohne zwischengespeicherte Eintrag. Verwenden Sie es zum Testen, nicht für den kanonischen Link, den Sie tatsächlich veröffentlichen, und behalten Sie ihn og:url Wenn Sie auf die saubere kanonische Adresse zeigen, konsolidieren sich die Freigaben parametrisierter Varianten korrekt. der URL-Encoder/Decoder ist praktisch, wenn diese Parameter kompliziert werden.
Was passiert, wenn Tags fehlen?
Schaber fallen zurück, und die Fallbacks sind schlimmer als Sie hoffen würden.
kein og:title Und sie nutzen die <title> Tag - das normalerweise für Suchergebnisse geschrieben wird und oft in einer Pfeife und Ihrem Markennamen endet und als Kartenüberschrift unbeholfen wird. kein og:description Und sie verwenden die Meta-Beschreibung oder den Text des Schabens, der ein Cookie-Banner oder ein Navigationsetikett einziehen kann. kein og:image Und die meisten Plattformen zeigen eine Nur-Text-Karte, obwohl einige nach Bildern auf der Seite suchen und möglicherweise ein Logo, einen Avatar oder ein Tracking-Pixel finden. kein og:url und die gemeinsame Adresse wird wie ist verwendet, also ?utm_source=twitter Varianten werden als unterschiedliche Seiten behandelt und Ihr Anteil zählt Fragment.
Es gibt eine weitere, nennbare Fehlerklasse, da sie beim normalen Debuggen unsichtbar ist: Von clientseitige Javascript eingefügte Tagsdrohen Wenn Ihre Meta-Tags nach der Hydratation von React gesetzt werden, zeigt der Browser-Inspektor sie perfekt an und der Schaber sieht nichts, da der Schaber Ihr Javascript nie ausgeführt hat. Überprüfen Sie immer mit View-Source oder curl, die den tatsächlich zurückgegebenen rohen HTML-Server anzeigen - nicht das DOM, nachdem Ihre App gestartet wurde. Gleiches gilt für Seiten, die eine 401, eine Login-Weiterleitung oder eine Bot-blocking 403 an nicht authentifizierte Anfragen zurückgeben: Der Scraper erhält die Fehlerseite und nicht Ihren Inhalt.
Häufige Anwendungsfälle
Validierung vor dem Start
Der Kernfall. Fügen Sie die von Ihnen beabsichtigten Tags vor der Live-Live-Einfügung ein und bestätigen Sie jede Kartenrendering. Dies ist das Einzige, was die offiziellen Plattform-Debugger nicht können, da sie eine Live-URL abrufen müssen. Ein Vor-Launch-Check kostet dreißig Sekunden und spart den Starttag-Reshare.
Debuggen einer kaputten Karte
Ein Link entfaltet sich falsch und Sie müssen wissen warum. Fügen Sie die aktuellen Tags ein, lesen Sie das Validierungsfeld und die Ursache ist normalerweise sofort: ein relativer Bildpfad, ein http Bild, eine Beschreibung doppelt so viel wie die Grenze, ein fehlendes twitter:carddrohen Beheben, neu im Plattform-Debugger abkratzen, fertig.
Auditierung der Metadaten einer Site im Maßstab
Seite für Seite durch eine Site arbeiten, jedes einfügen <head> Und das Urteil zu lesen, zeigt die Drift, die sich bei jedem Projekt mit mehreren Beiträgen ansammelt: Eine Seite hat Twitter-Tags und eine andere nicht, eine Beschreibung beträgt 300 Zeichen, drei Seiten teilen das gleiche generische og:imagedrohen Das Tool wird eher zu einer schnellen Konsistenzprüfung als zu einer Schätzung pro Seite.
Entwerfen des Freigabebildes
Wenn Sie eine auswählen oder in Betrieb nehmen og:imageDie Vorschau zeigt Ihnen, was die Ernte tatsächlich in einer breiten Karte gegenüber einer quadratischen Karte macht. Designer übergeben routinemäßig eine schöne quadratische Grafik, die von einer 1,91: 1-Ernte geschlachtet wird; sie ist billiger als sie danach zu sehen.
Schreiben von Kopien auf die engste Einschränkung
Da die Vorschauen Xs Abkürzung neben Facebook zeigen, verwandeln sie eine abstrakte Charaktergrenze in etwas Sichtbares. Das Schreiben einer Beschreibung, die mit 110 Zeichen vollständig gelesen wird, ist eine Disziplin, die viel einfacher zu halten ist, wenn die Auslassungserscheinungen während der Eingabe angezeigt werden. der Schneckengenerator Deckt die benachbarte Aufgabe der Erstellung der sauberen URL ab, die og:url sollte auf zeigen.
Arbeiten an der Inszenierung oder hinter einem Login
Interne Tools, Client-Arbeiten unter NDA und Seiten hinter einer Auth-Wand sind alle von Plattform-Debuggern nicht erreichbar. Da das Tool nicht mit einem Abruf funktioniert, sondern mit einer öffentlichen Seite behandelt wird.
Plattformvergleich
Aktuelle bekannteste Anleitung. Plattformen ändern diese Zahlen ohne Ankündigung, und die Kürzungspunkte werden in Pixeln und nicht in Zeichen gemessen - ein Titel voller Breitenbuch-Clips, die früher als einer voller enger sind. Behandeln Sie diese als sichere Ziele, nicht als Spezifikationen.
| Podest | Empfohlenes Bild | Verhältnis | Titel gezeigt | Beschreibung gezeigt | Notizen |
|---|---|---|---|---|---|
| 1200x630 | 1.91: 1 | ~ 60 Zeichen | ~ 155 Zeichen | Minimum 200x200; Bilder mittig crops Off-Ratio | |
| X / Twitter (groß) | 1200x628 | ~ 1.91: 1 | ~ 60 Zeichen | ~ 110 Zeichen | bedarf twitter:card=summary_large_image |
| X / Twitter (Zusammenfassung) | 800x800 | 1: 1 | ~ 50 Zeichen | ~ 90 Zeichen | Mindestens 144x144; Quadratbild erforderlich |
| 1200x627 | ~ 1.91: 1 | ~ 100 Zeichen | Oft versteckt | Beschreibung häufig von der Karte gestrichen | |
| schlaff | 1200x630 | 1.91: 1 | ~ 60 Zeichen | ~ 140 Zeichen | Kompakter Anhang; Unfurl-Cache läuft von selbst ab |
| Zwietracht | 1200x630 | 1.91: 1 | ~ 60 Zeichen | ~ 160 Zeichen | Rendert Beschreibung prominent, Bild kleiner |
Der Auszug aus der Tabelle ist das Designziel: ein Bild von 1200 x 630, ein Titel bei oder unter 55 bis 60 Zeichen und eine Beschreibung, die unter 110 landet, gibt Ihnen eine Karte, die überall ohne Tuning pro Plattform richtig wiedergegeben wird.
FAQ
Was ist die richtige Größe des offenen Graphenbildes?
Verwenden Sie 1200x630 Pixel - ein Verhältnis von 1,91:1. Das erfüllt Facebook, LinkedIn, X, Slack und Discord gleichzeitig für Karten mit großer Bildstärke und ist groß genug, um auf Displays mit hoher Dichte scharf zu bleiben. Behalten Sie die Datei unter etwa 5 MB, servieren Sie sie über HTTPS an einer absoluten URL und halten Sie wichtige Texte von den Kanten fern, da die Oberflächen etwas unterschiedlicher Beträge beschneiden. Geben Sie für eine kompakte X-Zusammenfassungskarte stattdessen ein quadratisches Bild von mindestens 144x144 an.
Warum zeigt meine Link-Vorschau das alte Bild noch, nachdem ich die Tags behoben habe?
Denn die Plattform hat das Ergebnis ihrer früheren Kratzer zwischengespeichert, normalerweise für etwa eine Woche. Durch das Aktualisieren der Tags wird dieser Cache nicht ungültig. Erzwingen Sie einen neuen Abruf durch den Debugger der Plattform - den Button Again Again von Facebook Sharing oder den LinkedIn Post Inspector. Bei Slack und Discord erzeugt das Hinzufügen eines Abfrageparameters zur URL sofort eine nicht zwischengespeicherte Vorschau, was die schnellste Möglichkeit ist, eine Korrektur zu überprüfen.
Benötige ich sowohl OG: als auch Twitter: Tags?
x Fließt zurück, um das Diagramm zu öffnen, wenn die Twitter-Äquivalente fehlen, also eine Seite mit vollständiger og: Tags erzeugt eine funktionierende X-Karte. Was Open Graph nicht ausdrücken kann, ist das Kartenlayout, daher sollten Sie immer noch hinzufügen twitter:card Zur Auswahl zwischen dem großen Banner und der kompakten Zusammenfassung, plus twitter:site und twitter:creator die Karte zuzuschreiben. Diese drei plus komplette offene Graph-Tags sind die effiziente Kombination.
Wie lange sollte OG:Titel und OG:Beschreibung sein?
weiterfahren og:title bei oder unter etwa 60 Zeichen. auf og:description Die Plattformen divergieren: X zeigt ungefähr 110 Zeichen, Facebook und LinkedIn näheren sich 155 bis 200. Wenn Sie auf die engere X-Limit schreiben, wird die Beschreibung überall vollständig gelesen. Text über die Grenze geht nicht verloren, sondern versteckt sich hinter einer Auslassung, also laden Sie die wichtigen Wörter in die Front.
Warum ist meine Vorschau leer oder zeigt nur die URL?
Die üblichen Ursachen in grober Reihenfolge der Frequenz: og:image ist eher ein relativer Pfad als eine absolute URL; das Bild wird über die Ebene geliefert http;; die Tags sind außerhalb der <head>; die Tags werden durch clientseitige JavaScript eingefügt, die der Scraper niemals ausführt, oder die Seite gibt einen Nicht-200-Status oder eine Login-Weiterleitung an den Bot zurück. Überprüfen Sie den rohen HTML-Code mit View-Source oder curl Anstelle des Browser-Inspektors - Der Inspektor zeigt das DOM nach dem Ausführen von Javascript an, was nicht der Schaber sieht.
Ruft dieses Tool meine URL ab, um die Tags zu lesen?
kein drohen Es macht überhaupt keine Netzwerkanfragen. Es funktioniert mit den von Ihnen eingegebenen oder eingefügten Tags, und alles wird in Ihrem Browser analysiert und gerendert. Browser können aufgrund von CORS keine beliebigen Seiten von Drittanbietern abrufen, und ein serverseitiger Abruf würde bedeuten, dass Sie Ihre unveröffentlichten URLs an eine andere Stelle senden. Der Kompromiss besteht darin, dass Sie die Tags liefern - und der Vorteil ist, dass Seiten auf localhost, beim Staging oder hinter einem Login genau wie die öffentlichen funktionieren.
Kann ich eine noch nicht veröffentlichte Seite in der Vorschau anzeigen?
Ja, und es ist der Hauptgrund, dies zu verwenden und nicht einen Plattform-Debugger. Die offiziellen Debugger müssen eine Live-URL abrufen, damit sie vor der Bereitstellung nutzlos sind. Hier fügen Sie die zu versendenden Tags ein – aus Ihrer Vorlage, Ihrem Framework-Metadatenobjekt oder einem lokalen Build – und die Vorschauen werden sofort gerendert.
Helfen offene Grafik-Tags bei meiner Suche nach Ranglisten?
Nicht direkt. Sie 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 indirekt die Signale ansteuert, die wichtig sind. Stellen Sie sich sie als Conversion-Optimierung für gemeinsam genutzte Links und nicht als SEO-Hebel vor. Verwenden Sie für die Tags, die sich auf Ihren Suchausschnitt auswirken, die Meta-Tag-Generatordrohen
