OG- & Twitter-Card-Generator – Meta-Tag-Ersteller, -Prüfer & -Vorschau
Erstellen Sie einfügefertige Open-Graph- und Twitter-Card-<meta>-Tags über ein Formular, oder fügen Sie ein bestehendes <head> ein, um es auf fehlende Tags, Titel-/Beschreibungslänge und twitter:card-Gültigkeit zu prüfen – und sehen Sie dann eine Vorschau in originalgetreu nachgestalteten Linkkarten-Mockups für Twitter/X, Facebook, LinkedIn und Discord.
🔒 Wird vollständig in Ihrem Browser verarbeitet – nichts, was Sie hier eingeben, wird jemals hochgeladen.
Ergebnis
Open-Graph- und Twitter-Card-Meta-Tags bestimmen, 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 gewählt werden und nicht von dem, was die Plattform zufällig aus dem sichtbaren Body-Text ausliest. Dieses Tool ist Baumeister und Prüfer zugleich, kein generischer Vorlagenfüller. Im BUILD-Modus geben Sie Titel, Beschreibung, Bild-URL, kanonische URL, Inhaltstyp und Twitter-Kartentyp ein, und es erzeugt den exakten <meta property="og:...">- und <meta name="twitter:...">-Tag-Block zum Einfügen in den <head> Ihrer Seite und lässt jedes von Ihnen leergelassene Feld weg, statt leere Tags mit leerem Inhalt zu produzieren.
Fügen Sie im AUDIT-Modus Ihr bestehendes <head>-Markup oder das HTML einer ganzen Seite ein, und das Tool parst es mit dem nativen DOMParser des Browsers, um alle bereits vorhandenen og:- und twitter:-Meta-Tags zu extrahieren. Dann führt es die wirklich relevanten Prüfungen durch: Die vier allgemein benötigten Tags (og:title, og:description, og:image, og:url) werden als fehlend gemeldet; og:title wird an der rund 60-Zeichen-Marke gemessen, ab der manche Plattformen kürzen, und an der rund 90-Zeichen-Marke, ab der es die meisten tun; og:description an der rund 155- bis 200-Zeichen-Spanne, die die meisten Plattformen erlauben, bevor sie abschneiden; twitter:card wird gegen die echten vier Werte geprüft, die Twitters Card-Validator akzeptiert – summary, summary_large_image, app, player – und bei Abweichung markiert; und doppelte Tags (dasselbe Property zweimal deklariert, ein erstaunlich häufiger Copy-Paste-Fehler) werden namentlich aufgelistet.
Bildabmessungen werden ehrlich behandelt: Dieses Tool kann die tatsächliche Pixelgröße Ihres Bildes nicht prüfen, ohne es abzurufen – und das tut es bewusst niemals, ganz im Sinne der No-External-Request-Policy dieser Seite. Wenn Ihr HTML bereits og:image:width und og:image:height deklariert, werden diese Zahlen gegen das weithin empfohlene Minimum von 1200×630 geprüft; falls nicht, erhalten Sie einen klaren Hinweis, statt eines erfundenen Bestanden- oder Fehlgeschlagen-Ergebnisses. Beide Modi rendern dieselben vier Linkvorschau-Mockups – Twitter/X (wechselt je nach twitter:card-Wert zwischen dem kompakten „Summary“-Thumbnail-Layout und dem bildschirmbreiten „summary_large_image“-Layout), Facebook, LinkedIn und Discord – jedes originalgetreu im Stil der Typografie- und Layout-Konventionen der jeweiligen Plattform gestaltet, statt nur ein Kasten mit anderem Logo, und jedes deutlich als illustrative Annäherung zu Planungszwecken gekennzeichnet, denn echte Plattformen ändern ihre Vorschau-Optik im Laufe der Zeit, und dieses Tool ruft sie nie ab oder durchsucht sie, um dies zu überprüfen.