Open-Graph-Tag-Generator
Füllen Sie die folgenden Felder aus, um die Open-Graph- und Twitter-Card-Meta-Tags zu generieren, die Sie in den <head> Ihrer Seite einfügen.
So funktioniert's
Wenn ein Link zu Ihrer Website auf Facebook, LinkedIn, Slack, Discord oder X (Twitter) geteilt wird, suchen diese Plattformen im <head> der Seite nach Open-Graph-Meta-Tags, um eine Vorschaukarte mit Titel, Beschreibung und Bild zu erstellen. Ohne diese Tags zeigt das soziale Netzwerk oft nur einen nackten Link oder eine generische, wenig ansprechende Vorschau. Dieses Tool generiert die Tags og:title, og:description, og:url, og:image und og:type sowie die Äquivalente twitter:card, damit die Karte auch auf X korrekt angezeigt wird.
Wo platziere ich diese Tags?
Fügen Sie das Ergebnis direkt in den <head>-Bereich Ihrer HTML-Seite ein, vor dem schließenden Tag </head>. Bei den meisten Frameworks (Nuxt, Next.js usw.) gibt es eine Komponente zur Verwaltung des head-Bereichs, die dieselben Meta-Tags akzeptiert.
Welche Bildgröße sollte ich für og:image verwenden?
Die empfohlene Größe ist in der Regel 1200x630 Pixel (Verhältnis 1.91:1), was dem von Facebook, LinkedIn und X erwarteten Format für eine große Karte entspricht. Ein zu kleines Bild oder ein falsches Seitenverhältnis kann von der Plattform unvorteilhaft beschnitten werden.
Warum hat sich meine Vorschau nach der Änderung nicht geändert?
Die meisten sozialen Netzwerke speichern die Open-Graph-Tags einer URL beim ersten Teilen in einem Cache. Nachdem Sie Ihre Tags geändert haben, nutzen Sie das offizielle Debugging-Tool der Plattform (z. B. den „Sharing Debugger“ von Facebook), um einen neuen Scan der Seite zu erzwingen.
100% lokale Verarbeitung in Ihrem Browser – nichts wird an einen Server gesendet.