OG- und Twitter-Kartengenerator – Meta-Tag-Builder, Auditor und Vorschau
Erstellen Sie einfügefertige Open Graph- und Twitter Card-<meta>-Tags aus einem Formular oder fügen Sie einen vorhandenen <head> ein, um ihn auf fehlende Tags, Titel-/Beschreibungslänge und twitter:card-Gültigkeit zu prüfen – und zeigen Sie dann beide in wirklich neu gestalteten Twitter/X-, Facebook-, LinkedIn- und Discord-Linkkarten-Mockups in der Vorschau an.
Ergebnis
Open Graph- und Twitter Card-Meta-Tags entscheiden darüber, wie ein Link aussieht, sobald er in Slack, iMessage, einen Tweet oder einen Discord-Kanal eingefügt wird – ein Titel, eine Beschreibung und ein Bild, die vom <head> der Seite selbst ausgewählt werden, nicht von dem, was die Plattform gerade aus dem sichtbaren Textkörper kratzt. Dieses Tool ist sowohl ein Builder als auch ein Auditor und kein generischer Vorlagenfüller. Geben Sie im BUILD-Modus einen Titel, eine Beschreibung, eine Bild-URL, eine kanonische URL, einen Inhaltstyp und einen Twitter-Kartentyp ein, und schon wird der genaue Tag-Block <meta property="og:..."> und <meta name="twitter:..."> erstellt, der in den <head> Ihrer Seite eingefügt werden kann. Dabei werden alle Felder übersprungen, die Sie leer lassen, anstatt leere Tags mit leerem Inhalt auszugeben.
Fügen Sie im AUDIT-Modus Ihr vorhandenes <head>-Markup oder den HTML-Code einer ganzen Seite ein und das Tool analysiert es mit dem nativen DOMParser des Browsers, um alle bereits vorhandenen og:- und twitter:-Meta-Tags zu extrahieren, und führt dann die tatsächlich wichtigen Prüfungen durch: Die vier häufig erforderlichen Tags (og:title, og:description, og:image, og:url) werden markiert, wenn sie fehlen; og:title wird an der ungefähr 60-stelligen Stelle gemessen, an der einige Plattformen mit der Kürzung beginnen, und an der ungefähr 90-stelligen Stelle, an der die meisten Plattformen dies tun; og:description wird anhand des etwa 155 bis 200 Zeichen umfassenden Bereichs gemessen, den die meisten Plattformen zulassen, bevor er abgeschnitten wird. twitter:card wird mit den tatsächlichen vier Werten verglichen, die der Kartenvalidierer von Twitter akzeptiert – summary, summary_large_image, app, player – und markiert, wenn es sich um etwas anderes handelt; und doppelte Tags (die gleiche Eigenschaft wurde zweimal deklariert, ein überraschend häufiger Fehler beim Kopieren und Einfügen) werden namentlich angezeigt.
Bildabmessungen werden ehrlich behandelt: Dieses Tool kann die tatsächliche Pixelgröße Ihres Bildes nicht überprüfen, ohne sie abzurufen, und das tut es absichtlich nie, da es der No-External-Request-Richtlinie dieser Website entspricht. Wenn Ihr HTML bereits og:image:width und og:image:height deklariert, werden diese deklarierten Zahlen anhand des allgemein empfohlenen Minimums von 1200×630 überprüft; Ist dies nicht der Fall, erhalten Sie einen klaren Hinweis anstelle eines erfundenen Bestehens oder Nichtbestehens. Beide Modi rendern die gleichen vier Link-Vorschau-Mockups – Twitter/X (wechselt zwischen dem kompakten „Zusammenfassung“-Miniaturbild-Layout und dem „summary_large_image“-Layout in voller Breite je nach twitter:card-Wert), Facebook, LinkedIn und Discord – jedes wirklich neu gestaltet, um den eigenen Typografie- und Layout-Konventionen dieser Plattform zu entsprechen, statt einer Box mit einem anderen Logo, und jedes ist klar als illustrative Annäherung für Planungszwecke gekennzeichnet, da echte Plattformen ihr Vorschau-Chrom neu gestalten mit der Zeit und dieses Tool ruft oder kratzt sie nie ab, um sie zu überprüfen.
Ihre Dateien und Eingaben verlassen dieses Gerät nie. Die Verarbeitung läuft vollständig offline. 100 % sicher.
Akzeptierte Formate & Regeln
- Der BUILD-Modus erstellt og:title, og:description, og:image, og:url, og:type, og:site_name und passende twitter:card/twitter:site/twitter:title/description/image-Tags, überspringt alle Felder, die leer bleiben, und erstellt mit einem Klick eine Kopie des einfügebereiten Blocks.
- Der AUDIT-Modus extrahiert jedes og:/twitter: <meta>-Tag aus eingefügtem HTML über den DOMParser des Browsers, markiert fehlende erforderliche Tags (og:title/description/image/url), doppelte Tags und ungültige twitter:card-Werte.
- Bei der Längenanleitung werden die tatsächlich häufig genannten Schwellenwerte verwendet: og:title etwa 60 Zeichen, bevor einige Plattformen mit der Kürzung beginnen (bis zu etwa 90 bei der freizügigsten Variante), og:description etwa 155–200 Zeichen.
- Stellt die Twitter/X-Karte im richtigen Layout für den deklarierten Kartentyp dar – eine kompakte „Zusammenfassung“-Karte mit einem kleinen quadratischen Miniaturbild oder das Layout „summary_large_image“ in voller Breite – neben Facebook-, LinkedIn- und Discord-Vorschauen.
Wichtigste Vorteile
Anwendungsfälle
- • Versenden Sie einen neuen Blog-Beitrag mit geeigneten Social-Media-Karten: Geben Sie den Titel, die Beschreibung und ein gehostetes Titelbild ein, generieren Sie den Tag-Block og:/twitter: und fügen Sie ihn direkt in den <head> der Seite ein.
- • Überprüfen Sie nach einer CMS-Migration den <head> einer vorhandenen Zielseite, um ein fehlendes og:image, einen og:title, der lang genug ist, um auf einigen Plattformen abgeschnitten zu werden, oder einen übrig gebliebenen ungültigen twitter:card-Wert zu erkennen.
- • Vergleichen Sie die Lesbarkeit des gleichen Titels und Bildes in der kompakten Zusammenfassungskarte von Twitter/X mit dem Layout summary_large_image in voller Breite, bevor Sie entscheiden, welcher twitter:card-Typ deklariert werden soll.
Bewerten Sie dieses Tool
