📇 Soziales & Teilen SEO

Diagramm & Twitter-Kartengenerator öffnen

Füllen Sie Ihre Seitendetails aus und sehen Sie sich eine echte Facebook-, LinkedIn- und X-Karte an, die live nach Ihrer Eingabe wiedergegeben wird. Holen Sie sich einen validierten Satz von Open Graph und Twitter Card Meta Tags – die genauen Markup-Plattformen, die Sie lesen, um Ihre Linkvorschau zu erstellen.

✓ Vorschau auf Live-Karten Läuft in Ihrem Browser Keine Anmeldung
Ziel für etwa 60 Zeichen, damit es nicht abgeschnitten wird.
Rund 110 Zeichen zeigen sich auf den meisten Social Cards.
Absolute https URL, 1200×630 empfohlen.
Facebook / LinkedIn Vorschau
Kein Bild — Hinzufügen einer og:image URL
example.com
X (Twitter) Vorschau
Kein Bild — Hinzufügen einer og:image URL
example.com
Meta-Tags generiert

Wie man Open Graph und Twitter Card Tags generiert

Vier Schritte von Seitendetails bis hin zu einer validierten, kopierfähigen Social Preview.

1

Geben Sie Ihre Seite URL, Titel und Beschreibung

Fügen Sie die absolute URL der Seite ein, die Sie teilen, dann schreiben Sie den Titel und die Beschreibung, die Sie auf Social Cards zeigen möchten.

2

Fügen Sie ein Freigabebild hinzu und setzen Sie die Typen

Geben Sie ein absolutes https og:image (idealerweise 1200x630), wählen Sie Ihren og:type und den Twitter-Kartentyp und fügen Sie Ihren @Handle hinzu.

3

Überprüfen Sie die Live-Facebook- und X-Vorschau

Sehen Sie sich die Facebook/LinkedIn- und X-Karte beim Tippen an und lösen Sie alle unten gezeigten Warnungen zur Länge oder Bildvalidierung.

4

Kopieren Sie die Tags in Ihren Seitenkopf

Kopieren Sie die generierten Open Graph und Twitter Meta Tags und fügen Sie sie in die <head> dann mit dem Plattform-Debugger umzukrempeln.

Fragen zur Graph & Twitter Card öffnen

Open Graph (og:) ist das Shared Protocol Facebook, LinkedIn, Slack, WhatsApp, Pinterest und die meisten Plattformen lesen, um eine Linkvorschau zu erstellen. Twitter Card (twitter:) ist X's eigenes Vokabular, das das Kartenlayout steuert – zum Beispiel Zusammenfassung vs summary_large_image. Sie überlappen sich stark: Titel, Beschreibung und Bild können von og: Tags stammen. Twitter-spezifische Tags fügen nur hinzu, was og: nicht ausdrücken kann, wie der Kartenstil und der @site-Handle.
Verwenden Sie 1200x630 Pixel (ein Verhältnis von 1,91:1) für die große Karte, die Facebook, LinkedIn und X summary_large_image alle verwenden – das füllt den Rahmen ohne Zuschneiden. Halten Sie die Datei unter 5 MB und servieren Sie sie über eine absolute https URL, weil Plattformen nicht ein relatives oder http-Image zuverlässig holen. Das Minimum Facebook akzeptiert 200x200, aber kleine Bilder als kleines Miniaturbild statt einer Heldenkarte.
Jede Plattform zwischenspeichert die erste Version Ihrer Karte, die sie abgeschrapt hat, manchmal wochenlang, so dass alte Titel und Bilder bestehen bleiben, nachdem Sie die Tags repariert haben. Erzwingen Sie einen Re-Scrape: Fügen Sie die URL in den Facebook Sharing Debugger ein und klicken Sie auf Scrape Again, verwenden Sie den LinkedIn Post Inspector und teilen Sie den Link einmal auf X, um seinen Cache zu aktualisieren.
Wenn ein Twitter-Tag fehlt, fällt X auf das passende Open Graph Tag zurück — og:title, og:description und og:image decken die meisten Karten ab. Das praktische Minimum ist also ein komplettes Set von og:Tags plus nur twitter:card, um das Layout und twitter:site für die Attribution auszuwählen. Hinzufügen von og:Tags bedeutet auch, dass die gleiche Vorschau auf Facebook, LinkedIn, Slack und überall sonst funktioniert, also führen Sie mit og: und fügen Sie nur die Handvoll von twitter:Tags hinzu, die og: nicht ausdrücken kann.

Brauchen Sie soziale Tags im Maßstab erzeugt?

Dieses Tool läuft komplett in Ihrem Browser – es gibt nichts zu rufen und nichts verlässt die Seite. Für CMS-Plugins, CI und Bulk-Seiten, ist eine programmatische Open Graph API auf den bezahlten Plänen verfügbar.

✓ Kostenloses Tool: 100% Client-Seite Open Graph API: bezahlte Pläne

Generieren Sie validierte Open Graph und Twitter Card Blöcke pro Seite von einem einzigen Endpunkt und verdrahten Sie sie direkt in Ihren Build. Siehe Pläne und Quoten auf der Preisseite.

Siehe API-Pläne →