Open-Graph-Vorschau

Ein Open GraphVorschau-Tool zeigt Ihnen, wie ein freigegebener Link aussehen wird, bevor Sie ihn veröffentlichen Sie geben Ihre Felder og: title, og: description, og:image, og:url und Twitter Card ein - oder fügen Sie den Block von Meta-Tags ein, den Sie bereits haben - und das Tool rendert ungefähre soziale Karten für Facebook, X/Twitter, LinkedIn, Slack und Discord nebeneinander Anstatt eine Seite live zu schieben, zu teilen und zu entdecken, dass der Titel halbiert ist oder das Bild nie geladen wird, sehen Sie das Problem, solange Sie es noch beheben können.

Das Open Graph-Protokoll ist das gemeinsame Vokabular, das fast jede Plattform zum Erstellen dieser Karten verwendet. Ein Scraper besucht Ihre Seite, liest die og: Meta-Tags im <head> und stellt daraus eine Vorschau zusammen. Der Haken ist, dass jede Plattform dieselben Tags anders rendert: X schneidet Beschreibungen auf etwa 110 Zeichen ab, während Facebook eher 155 zeigt, LinkedIn verbirgt die Beschreibung vollständig auf einigen Oberflächen und Slack fasst alles in einem kompakten Anhang zusammen. Ein Feld, das in einer Karte gut aussieht, kann in einer anderen manguliert werden, weshalb die Vorschau aller auf einmal die einzige zuverlässige Prüfung ist.

Hier ist eine offene Graph-Vorschau mit reellen Zahlen Setze og: title auf "How We Cut Our Page Load Time in Half Without a Rewrite" (55 Zeichen, ein Durchgang) und gib ihm eine 125 Zeichen og: description Validation gibt den Titel weiter und warnt bei der Beschreibung: fine for Facebook and LinkedIn, but X cruncates over tomor 110. Die X-Großbildkarte schneidet den Text nach "ab 4,1 Sekunden..", während die Facebook-Karte den ganzen Satz anzeigt Die Open-Graph-Bildvorschau lädt Ihr og: Bild in jede Karte, so zeigt ein defekter Link "Bild konnte nicht geladen werden", bevor jemand es teilt.

Dieses Tool läuft clientseitig und ruft oder kratzt Ihre Seite niemals ab, es funktioniert von den Tags, die Sie ihr geben, entweder in das Formular eingegeben oder als rohes HTML eingefügt und lokal analysiert Das bedeutet, Sie können Metadaten für Seiten validieren, die sich hinter einem Login, auf einer Staging-Domain oder gar nicht bereitgestellt befinden Die einzige Anfrage, die es an Ihren Server stellt, ist das Laden der og:image-URL, damit Ihr Browser das Bild in den Karten anzeigen kann.