Skip to content

Open Graph & Meta-Tag-Generator

Open Graph-, Twitter-Card- und SEO-Meta-Tags erzeugen — mit Live-Vorschau für Google, Facebook und X. 100 % kostenlos, im Browser, ohne Anmeldung. Code kopieren und einfügen.

Kein Tracking Läuft im Browser Kostenlos
Alles läuft in deinem Browser. Deine Inhalte und die Bild-URL verlassen diese Seite nie — kein Upload, keine Anmeldung.
Basis-SEO
Open Graph (Facebook, LinkedIn…)
X (Twitter) Card
Erweitert & Icons
Prüfungen
    Erzeugte <head>-Tags 
     
      
     Aus vorhandenem <head> importieren (lokal ausgewertet, nichts hochgeladen) 
       
     
      
     Nach dem Deploy prüfen: Facebook LinkedIn Google Rich Results 
     
     
      
      
       Tag-Ausgabe und Plattform-Spezifikationen geprüft anhand des Open Graph-Protokolls (ogp.me), Google Search Central sowie der aktuellen Sharing-Dokumentation von Facebook, X, LinkedIn und Discord. — Go Tools Team · Jul 15, 2026  
          
     
    Was sind Meta-Tags & Open Graph?
     
     
    Meta-Tags sind HTML-Schnipsel im <head> deiner Seite, die die Seite für Browser, Suchmaschinen und Social-Plattformen beschreiben. Die klassischen SEO-Tags sind der <title>, die Meta-Beschreibung und der Canonical-Link. Open Graph-Tags (og:title, og:type, og:image, og:url und Verwandte) sind ein ursprünglich von Facebook stammendes Protokoll, das steuert, welcher Titel, welche Beschreibung und welches Bild beim Teilen deines Links angezeigt werden — und fast jede Plattform liest sie, darunter LinkedIn, Slack, Discord, WhatsApp, Pinterest und Telegram.
    Twitter/X verwendet eigene twitter:card-Tags, greift aber auf deine Open Graph-Tags zurück, wenn sie fehlen. Ein guter Satz OG-Tags plus ein einziger twitter:card-Wert deckt also jedes Netzwerk ab. Dieser Generator schreibt all diese Tags, ergänzt optionale JSON-LD-Strukturdaten und zeigt das Ergebnis live in der Vorschau — sodass du sie nie von Hand schreiben oder raten musst, wie ein Share aussieht.
     
      
      
     
    Social-Bild- & Tag-Spezifikationen je Plattform
     
     
     
    Open Graph (Facebook & LinkedIn)
     
    Beide lesen og:title, og:description, og:image und og:url. Empfohlenes Bild 1200×630 (1,91:1). Facebook cacht ~30 Tage, LinkedIn ~7 Tage — nach dem Deploy mit ihren Debuggern neu einlesen lassen.
     
     
    X (Twitter) Card
     
    twitter:card ist erforderlich (summary_large_image oder summary). Für den Rest greift X auf og:* zurück. Ein einziges 1200×630-Bild funktioniert für OG und X; Bilder unter 300×157 stufen eine große Card auf eine kleine herab.
     
     
    Slack & Discord
     
    Slack liest zuerst Twitter Card, dann Open Graph, und kann über twitter:label/data zwei zusätzliche Felder anzeigen. Discord liest Open Graph und nutzt als Einziges theme-color für die Akzentleiste des Embeds.
     
     
    WhatsApp & Telegram
     
    WhatsApp benötigt og:title und og:image, wobei die Metadaten weit oben im HTML stehen sollten; Telegram liest Open Graph und rendert zuverlässig nur aus JPEG- oder PNG-Bildern.
     
     
    Pinterest Rich Pins
     
    Pinterest liest Open Graph oder Schema.org. Ein Article Rich Pin braucht og:type=article sowie article:published_time und article:author — hier alle erzeugt, wenn du den Typ article wählst.
     
     
    Google-Suchergebnis-Snippet
     
    Die Live-SERP-Vorschau für Desktop und Mobil misst Titel und Beschreibung in Pixeln — nicht nur in Zeichen — sodass du das Kürzungsrisiko siehst, bevor Google es tut.
     
     
     
          
     
    Meta-Tag-Beispiele
     
     
     
    Website-Startseite
     
     
    Title: Acme — Ship faster
Description: The all-in-one platform for modern teams.
URL: https://acme.com
Image: https://acme.com/og/home.png (1200×630)
     
    <title>Acme — Ship faster</title>
<meta name="description" content="The all-in-one platform for modern teams.">
<link rel="canonical" href="https://acme.com">

<meta property="og:title" content="Acme — Ship faster">
<meta property="og:type" content="website">
<meta property="og:image" content="https://acme.com/og/home.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://acme.com">

<meta name="twitter:card" content="summary_large_image">
     
     
    Eine Startseite braucht nur die vier erforderlichen Open Graph-Tags sowie Titel, Beschreibung und Canonical. Da das Bild 1200×630 groß ist, werden Breite und Höhe automatisch ausgefüllt, sodass schon der allererste Facebook-Share sofort statt leer angezeigt wird.
     
     
    Blogartikel (mit article:* + JSON-LD)
     
     
    og:type: article
Title: The Complete Guide to Open Graph Tags
Author: Ada Lovelace
Published: 2026-07-15
     
    <meta property="og:title" content="The Complete Guide to Open Graph Tags">
<meta property="og:type" content="article">
<meta property="og:image" content="https://blog.example.com/og/guide.png">
<meta property="og:url" content="https://blog.example.com/open-graph-guide">
<meta property="article:published_time" content="2026-07-15T00:00:00Z">
<meta property="article:author" content="Ada Lovelace">

<meta name="twitter:card" content="summary_large_image">

<script type="application/ld+json">{ "@type": "Article", "headline": "The Complete Guide to Open Graph Tags", "datePublished": "2026-07-15T00:00:00Z" }</script>
     
     
    Der Objekttyp „article“ schaltet die Eigenschaften article:published_time und article:author frei und erzeugt passendes Article-JSON-LD, sodass Suchmaschinen und Pinterest Rich Pins strukturierte Daten geschenkt bekommen.
     
     
    Twitter/X erbt Open Graph
     
     
    twitter:card: summary_large_image
Inherit title/description/image from OG: on
     
    <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@acme">
     
     
    X liest deine Open Graph-Tags, wenn das passende twitter:*-Tag fehlt — du brauchst also nur twitter:card. Der Generator gibt niemals ein leeres twitter:image aus, das diesen Fallback zerstören würde.
     
     
     
          
     
    So fügst du Open Graph-Tags zu deiner Seite hinzu
     
       
    1.  1 
       
      Titel, Beschreibung & URL eingeben
       
      Gib Seitentitel, Meta-Beschreibung und Canonical-URL ein. Das Pixel-Meter zeigt, ob sie in das Google-Suchergebnis-Snippet passen.
       
       
    2.  2 
       
      og:image hinzufügen und Typ wählen
       
      Füge eine 1200×630-Bild-URL ein und wähle website, article, product oder profile — die passenden Open Graph-Felder und das JSON-LD erscheinen automatisch.
       
       
    3.  3 
       
      Die Live-Vorschauen prüfen
       
      Wechsle zwischen den Tabs Google, Facebook, X, LinkedIn, Slack und Discord, um genau zu sehen, wie dein Link aussieht, bevor du ihn veröffentlichst.
       
       
    4.  4 
       
      In deinen  kopieren
       
      Kopiere den gesamten Tag-Block (oder einen Abschnitt) und füge ihn in den  deines HTML ein. Prüfe nach dem Deploy mit den Debuggern von Facebook und LinkedIn.
       
       
      5.  
     
      
     
    Häufige Open Graph-Fehler
     
     
     
    Relativer og:image-Pfad
     
    Ein Pfad wie /cover.png funktioniert in deinem Editor, ist aber beim Teilen leer, weil Crawler eine absolute URL benötigen.
     
     
     ✗ Falsch 
    <meta property="og:image" content="/cover.png">
     
     
     ✓ Richtig 
    <meta property="og:image" content="https://example.com/cover.png">
     
     
     
     
    Fehlendes og:url
     
    Ohne ein kanonisches og:url teilen sich Share-Zahlen auf URL-Varianten auf und Plattformen wählen womöglich die falsche Adresse.
     
     
     ✗ Falsch 
    <!-- no og:url -->
     
     
     ✓ Richtig 
    <meta property="og:url" content="https://example.com/page">
     
     
     
     
    Bild zu klein oder falsches Verhältnis
     
    Facebook ignoriert Bilder unter 200×200 und schneidet alles zu, was weit von 1,91:1 entfernt ist.
     
     
     ✗ Falsch 
    600×600 og:image
     
     
     ✓ Richtig 
    1200×630 og:image (1.91:1)
     
     
     
     
    twitter:card vergessen
     
    Selbst mit vollständigen Open Graph-Tags rendert X keine Card, solange twitter:card nicht gesetzt ist.
     
     
     ✗ Falsch 
    <!-- OG only, no twitter:card -->
     
     
     ✓ Richtig 
    <meta name="twitter:card" content="summary_large_image">
     
     
     
     
    Leeres twitter:image zerstört den Fallback
     
    Ein leeres twitter:image hindert X daran, auf og:image zurückzugreifen — lass das Tag weg, statt es leer zu lassen.
     
     
     ✗ Falsch 
    <meta name="twitter:image" content="">
     
     
     ✓ Richtig 
    <!-- omit it; X uses og:image -->
     
     
     
     
    Charset zu spät platziert
     
    Die charset-Deklaration muss innerhalb der ersten 1024 Bytes des Dokuments erscheinen, sonst wird sie ignoriert.
     
     
     ✗ Falsch 
    <meta charset> after many tags
     
     
     ✓ Richtig 
    <meta charset="utf-8"> first in <head>
     
     
     
     
     
      
     
    Häufige Anwendungsfälle
     
     
     
    Eine Landingpage veröffentlichen
     
    Erzeuge den vollständigen head-Block für eine neue Marketingseite, damit sie poliert aussieht, sobald jemand den Link auf X, LinkedIn oder Slack teilt.
     
     
    Blog- & Artikelvorschauen
     
    Ergänze article:published_time, article:author und Article-JSON-LD, damit Beiträge für Pinterest Rich Pins und ansprechende Social-Cards infrage kommen.
     
     
    Einen kaputten Share reparieren
     
    Importiere deine aktuellen Tags, erkenne im Prüf-Panel das fehlende og:image oder die falsche Abmessung, behebe es und lass mit den Debugger-Links neu einlesen.
     
     
    Head-Snippets für Frameworks
     
    Kopiere einen sauberen, korrekten Tag-Satz für eine statische Site, ein CMS-Template oder ein serverseitig gerendertes head-Partial.
     
     
     
      
     
    So funktioniert der Generator
     
     
     
    Live-Vorschau im Browser
     
    Jede Card wird aus den von dir eingegebenen Werten gerendert, nie durch Abruf deiner URL. Das hält die Vorschauen sofort und privat und ist die einzige ehrliche Möglichkeit, vor dem Deploy einer Seite eine Vorschau zu erhalten.
     
     
    Pixelgenaues SERP-Meter
     
    Google kürzt Titel und Beschreibungen nach Pixelbreite, nicht nach Zeichenzahl. Ein Canvas misst deinen Text in derselben Schriftart, sodass das Meter genau dann bernsteinfarben wird, wenn das Snippet gekürzt würde.
     
     
    Bildprüfung auf Client-Seite
     
    Deine og:image-URL wird in deinem Browser in ein Image-Objekt geladen, um die echte Breite und Höhe auszulesen, und dann gegen 1200×630 und das Seitenverhältnis der Card geprüft. Cross-Origin-Bilder melden ihre Größe trotzdem, sodass die Prüfung ohne jeden Upload funktioniert.
     
     
    Vollständiger, moderner Tag-Satz
     
    Basis-SEO, Open Graph, Twitter Card und JSON-LD in einem Block, wobei charset zuerst ausgegeben wird, damit es innerhalb der ersten 1024 Bytes landet. Veraltete Tags wie meta keywords sind standardmäßig deaktiviert.
     
     
     
      
     
    Best Practices für Meta-Tags
     
     
     
    Absolute HTTPS-URLs verwenden
     
    og:image und og:url müssen vollständige https://…-URLs sein. Relative Pfade funktionieren lokal, erscheinen aber leer, wenn ein Crawler die Live-Seite abruft.
     
     
    og:image:width & height immer setzen
     
    Die Angabe der Abmessungen lässt Plattformen die Card sofort layouten, sodass der erste Share nicht leer ist, während das Bild asynchron abgerufen wird.
     
     
    Canonical und og:url gleich halten
     
    Lass beide auf die eine kanonische URL zeigen, damit Share-Zahlen und Suchsignale nicht auf URL-Varianten aufgeteilt werden.
     
     
    Für das Pixelbudget schreiben
     
    Ziele auf einen Titel von etwa 50–60 Zeichen und eine Beschreibung von etwa 155 Zeichen ab — verlasse dich aber auf das Pixel-Meter, denn Google misst die Breite, nicht die Zeichenzahl.
     
     
    Tags serverseitig rendern
     
    Die Crawler von Facebook, LinkedIn, WhatsApp, Telegram und Discord führen kein JavaScript aus, deshalb müssen Open Graph-Tags im statischen oder serverseitig gerenderten HTML stehen.
     
     
     
      
     
    Häufig gestellte Fragen
     
     
     Was ist ein Meta-Tag-Generator? 
     Ein Meta-Tag-Generator erstellt die HTML-Tags, die in den <head> deiner Seite gehören — den <title>, die Meta-Beschreibung, den Canonical-Link, Open Graph-Tags für Facebook und LinkedIn sowie Twitter/X-Card-Tags. Dieses Tool erzeugt sie alle auf einmal, zeigt eine Live-Vorschau, wie dein Link bei Google, Facebook, X, LinkedIn, Slack und Discord aussieht, und lässt dich den Code mit einem Klick kopieren. Alles läuft in deinem Browser. 
     
     Wie füge ich Open Graph-Tags zu meiner Website hinzu? 
     Trage Titel, Beschreibung, Canonical-URL und eine og:image-URL ein, wähle den Open Graph-Typ und kopiere dann die erzeugten Tags in den <head> deines HTML. Da die Crawler von Facebook, LinkedIn, WhatsApp und Telegram kein JavaScript ausführen, müssen die Tags im serverseitig gerenderten oder statischen HTML vorhanden sein — nicht per clientseitigem Skript eingefügt. 
     
     Welche Größe sollte ein Open Graph-Bild haben? 
     Die empfohlene og:image-Größe beträgt 1200×630 Pixel, ein Seitenverhältnis von 1,91:1, das auch die summary_large_image-Card von X erfüllt. Facebook ignoriert Bilder kleiner als 200×200 und zeigt für alles unter 600×315 ein kleines Quadrat. Gib immer og:image:width und og:image:height an, damit der erste Share sofort erscheint, und liefere das Bild über HTTPS unter einer öffentlichen URL aus, die nicht durch robots.txt blockiert ist. 
     
     Ist das twitter:card-Tag erforderlich? 
     Ja — twitter:card ist das eine Twitter/X-Tag, das du angeben musst, sonst rendert X keine Card, selbst wenn deine Open Graph-Tags vorhanden sind. Setze es auf summary_large_image für ein großes Bild oder summary für ein kleines quadratisches Thumbnail. Für alles Übrige (Titel, Beschreibung, Bild) greift X auf deine og:*-Tags zurück, deshalb lässt dieses Tool sie standardmäßig weg, um das Markup sauber zu halten. 
     
     Helfen Meta-Tags beim SEO? 
     Der <title> und das Canonical-Tag sind für SEO wichtig; die Meta-Beschreibung ist kein direkter Ranking-Faktor, beeinflusst aber die Klickrate, indem sie das Suchergebnis-Snippet prägt. Open Graph- und Twitter-Card-Tags wirken sich nicht auf das Google-Ranking aus, steuern aber, wie deine Links beim Teilen aussehen — was Social-Traffic bringt. Google schreibt deinen Titel in den Ergebnissen mitunter um, formuliere ihn also klar und einzigartig und stelle die wichtigen Wörter nach vorn. 
     
     Lädt dieses Tool meine Inhalte oder Bilder hoch? 
     Nein. Alles wird lokal in deinem Browser mit JavaScript erzeugt. Titel, Beschreibung und Bild-URL verlassen die Seite nie — es gibt keinen Server, keinen Upload und kein Konto. Das og:image wird nur in deinem eigenen Browser geladen, um es anzuzeigen und seine Abmessungen auszulesen. 
     
     Kann ich bereits vorhandene Meta-Tags importieren? 
     Ja. Öffne das Import-Panel, füge deine vorhandenen <meta>-Tags ein, und das Tool wertet sie lokal mit dem HTML-Parser des Browsers aus, um das Formular zu füllen — keine Netzwerkanfrage, nichts wird hochgeladen. Das ist die datenschutzfreundliche Alternative zu Tools, die eine Live-URL von ihrem Server abrufen. 
     
     Warum zeigt meine aktualisierte Vorschau bei Facebook oder LinkedIn noch das alte Bild? 
     Plattformen cachen Open Graph-Daten: Facebook etwa 30 Tage, LinkedIn etwa 7 Tage. Lass die Seite nach dem Deploy mit dem Facebook Sharing Debugger oder dem LinkedIn Post Inspector neu einlesen, um den gecachten Titel, die Beschreibung und das Bild zu aktualisieren. Die Debugger-Links stehen unter dem erzeugten Code. 
     
     
     
     
       
      
     
     
    Verwandte Werkzeuge
      Alle Werkzeuge anzeigen →
 
     
      
     
      
      
      
     
     
    cURL-Befehlsgenerator & Builder
     
     
    Web & API
     
    curl-Befehle im Browser erstellen — Methode, Header, Auth und Body einstellen, fertig copierbaren Befehl sofort erhalten. Vorlagen für Bearer, POST JSON, Datei-Upload. Kostenlos, privat.
     
     
       
          
     
      
      
      
     
     
    htpasswd Generator — bcrypt, Apache MD5 (apr1) & Basic Auth
     
     
    Web & API
     
    htpasswd-Einträge mit bcrypt, Apache MD5 (apr1), SHA-1 u. v. m. erzeugen. Fertige Konfigs für Apache, nginx & Docker. 100 % im Browser — kein Upload.
     
     
       
          
     
      
      
      
     
     
    Zahlensystem-Konverter — Binär, Hex, Dezimal & Oktal
     
     
    Konvertierungswerkzeuge
     
    Zahlen zwischen Binär, Hexadezimal, Dezimal, Oktal und beliebigen Basen (2–36) sofort konvertieren. Kostenlos, privat, ohne Anmeldung — alles läuft in Ihrem Browser.
     
     
       
          
     
      
      
      
     
     
    Base64-Dekodierer & -Kodierer
     
     
    Kodierung & Formatierung
     
    Base64 online kostenlos dekodieren und kodieren. Echtzeitkonvertierung mit voller UTF-8- und Emoji-Unterstützung. 100 % privat — läuft in Ihrem Browser. Keine Anmeldung nötig.
     
     
       
          
     
      
      
      
     
     
    Base64-in-Bild-Konverter
     
     
    Kodierung & Formatierung
     
    Eine Base64-Zeichenkette oder einen Data-URI im Browser zurück in ein Bild dekodieren. Vorschau, Abmessungen & MIME ablesen, dann als PNG, JPG, GIF, SVG herunterladen. Kein Upload.
     
     
       
          
     
      
      
      
     
     
    Bcrypt-Hash-Generator & Verifizierer
     
     
    Sicherheitswerkzeuge
     
    Bcrypt-Passwort-Hashes online erzeugen und prüfen — einstellbarer Kostenfaktor, $2b$/$2a$/$2y$. 100 % im Browser; dein Passwort wird nie hochgeladen.