Open-Graph-Meta-Tag-Generator — Kostenloses Tool
Titel, Beschreibung, URL und Bild eintragen und die Open-Graph-, Twitter-Card- und Standard-Meta-Tags zum Einfügen in den <head> deiner Seite erhalten. Jeder Wert wird escaped, leere Felder werden weggelassen, und zu lange Titel und Beschreibungen werden markiert, bevor eine Plattform sie abschneidet.
Funktionen
- Open Graph, Twitter Card, <title> und Meta-Description aus einem einzigen Satz Felder
- Jeder Wert wird HTML-escaped – ein Titel mit Anführungszeichen, Ampersand oder spitzer Klammer ergibt trotzdem gültige Tags
- Live-Zähler markieren einen Titel über 60 Zeichen oder eine Beschreibung über 200 – dieselben Schwellen wie in unserem Link-Preview-Checker
- Leere Felder werden komplett weggelassen, statt ein leeres content-Attribut auszugeben, das ein Crawler als Absicht liest
- Läuft vollständig im Browser: keine Anmeldung, nichts wird hochgeladen, keine Seite wird abgerufen
Häufig gestellte Fragen
Wohin gehören diese Tags?
In das <head>-Element der Seite, vor </head>. Die Reihenfolge ist keinem Crawler wichtig, aber ein zusammenhängender Open-Graph-Block ist leichter zu pflegen. Bei einem CMS oder Framework nutze dessen Head- oder SEO-Einstellungen, statt das Template von Hand zu bearbeiten: viele geben einige dieser Tags bereits aus, und zwei og:title auf einer Seite sind schlechter als einer.
Warum erscheint nach dem Einfügen noch die alte Vorschau?
Weil die Plattform die Card beim ersten Aufruf des Links gecacht hat, teils tagelang. Die Lösung ist ein erneutes Auslesen: Facebook Sharing Debugger, LinkedIn Post Inspector und X Card Validator scrapen auf Zuruf neu. Bis dahin sind die neuen Tags live auf deiner Seite und auf der Plattform unsichtbar.
Brauche ich Open Graph und Twitter-Tags gleichzeitig?
Streng genommen nein: X greift auf Open Graph zurück, wenn ein twitter:-Tag fehlt, und die meisten anderen Leser ebenso. Wirklich verdient hat sich twitter:card, denn es entscheidet, ob X ein breites Bild oder ein kleines quadratisches Thumbnail zeigt. Dieser Generator gibt beide Sätze aus, damit nichts von einem unsichtbaren Fallback abhängt.
Welche Bildgröße soll ich nehmen?
1200 × 630 Pixel ist die sichere Wahl – das Verhältnis 1,91:1, das Facebook, LinkedIn und X’ summary_large_image erwarten. Liefere es über eine absolute https-URL aus, denn ein relativer Pfad löst sich für einen Crawler nicht auf, halte die Datei unter etwa 5 MB und lass Text von den Rändern weg, da jede Plattform etwas anders zuschneidet.
Was passiert mit Anführungszeichen und Sonderzeichen im Titel?
Sie werden für dich escaped. Ampersands, spitze Klammern und doppelte Anführungszeichen werden vor dem Einsetzen in ein Attribut zu Entities, sodass ein Titel wie Ben & Jerry’s "beste" Sorte ein gültiges Tag ergibt statt kaputtem Markup. Das ist mehr als Kosmetik: ein nicht escapetes Anführungszeichen in content beendet das Attribut zu früh, und alles danach wird zu Markup.
