Open-Graph-Generator

Wenn ein Link geteilt wird, bauen Facebook, LinkedIn, WhatsApp, Slack und X die Vorschaukarte aus den Open-Graph-Tags der Seite. Gib Titel, Beschreibung und Bild ein, sieh die Karte so, wie sie erscheinen wird, und kopiere die Tags. Das Tool warnt dich, wenn das Bild fehlt oder zu klein ist.

Aus vorhandenem HTML importieren
Google schneidet bei etwa 600 px ab
Google schneidet bei etwa 920 px ab
Ideal: 1200 × 630 px
Weitere Optionen: Autor, Themenfarbe, Robots
Google

Facebook · LinkedIn · WhatsApp
X (Twitter)
HTML für den <head>

    So wird er benutzt

    1. Gib Titel, Beschreibung und die vollständige Adresse der Seite ein.
    2. Füge die Adresse des Vorschaubilds ein (ideal sind 1200 × 630 Pixel) und prüfe die Vorschauen für Facebook und X.
    3. Kopiere die Tags in den <head> der Seite. Nach der Veröffentlichung kannst du mit dem Sharing-Debugger des jeweiligen Netzwerks dessen Cache aktualisieren.

    Häufige Fragen

    Welche Größe sollte das og:image haben?
    Verwende 1200 × 630 Pixel (Seitenverhältnis 1,91:1), die Größe, die Facebook und LinkedIn für große Karten empfehlen; X beschneidet große Karten auf 2:1. Halte wichtigen Text von den Rändern fern und verwende eine vollständige https://-Adresse.

    Brauche ich separate Tags für Twitter (X)?
    Nur twitter:card. X liest og:title, og:description und og:image, wenn die eigenen Tags fehlen, deshalb ergänzt das Tool nur den Kartentyp und auf Wunsch deinen @Benutzernamen.

    Ich habe die Tags geändert, aber die alte Vorschau wird noch angezeigt. Warum?
    Soziale Netzwerke speichern die Karte tagelang im Cache. Öffne den Facebook Sharing Debugger oder den LinkedIn Post Inspector, füge die Adresse ein und lass die Seite neu abrufen.

    🏷️ Meta-Tag-Generator
    🔗 UTM-Link-Generator
    🌈 CSS-Farbverlauf-Generator
    🔲 CSS-Box-Shadow-Generator