jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

SEO-Tools

Kostenlose Open-Graph- und Twitter-Card-Builder

Erstelle Social-Preview-Meta-Tags für Beitrage und statische Seiten.

Tool wird geladen...

Was ist Open-Graph- und Twitter-Card-Builder?

Open-Graph- und Twitter-Card-Tags steuern, wie eine Seite angezeigt wird, wenn jemand sie auf sozialen Plattformen, Messenger-Apps und Link-Vorschau-Tools teilt. Sie definieren den Vorschaubild-Titel, die Beschreibung, das Bild, die Seiten-URL und das Kartenformat. Sie sind nützlich, wenn Standardvorschauen den falschen Text oder gar kein Bild anzeigen.

Kurze Antwort

Generieren Sie Open-Graph- und Twitter-Card-Meta-Tags, um zu steuern, wie Ihre Seite beim Teilen auf sozialen Plattformen, Messenger-Apps und Link-Vorschau-Tools erscheint. Verwenden Sie absolute URLs für Bilder und testen Sie nach der Veröffentlichung.

Last updated: 2026-06-11

Einschränkungen

  • Generierte Tags müssen im HTML-head-Bereich jeder Seite platziert werden. Soziale Plattformen und Messenger-Apps lesen diese Tags, wenn die Seite abgerufen wird, nicht wenn die Seite erstellt wird.
  • Soziale Plattformen speichern Vorschauen aggressiv zwischen. Nach der Aktualisierung von og- oder twitter-Tags verwenden Sie den Debugger oder Share-Tester jeder Plattform, um eine Cache-Aktualisierung zu erzwingen.
  • Einige Plattformen ignorieren bestimmte Tags. X liest twitter:card während Facebook und LinkedIn og:-Tags verwenden. Nicht jede Plattform unterstützt jede Direktive.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Geben Sie den Seitentitel, die Beschreibung, die kanonische URL, den Seitenname und die Vorschaubild-URL ein.
  2. Wählen Sie den Open-Graph-Typ. Verwenden Sie website für normale Seiten und article für Blog-Beiträge.
  3. Kopieren Sie die generierten Meta-Tags in den head-Bereich Ihrer Seite.
  4. Verwenden Sie eine absolute Bild-URL und testen Sie die Seite nach der Veröffentlichung.

Wofür du es nutzen kannst

  • Social-Sharing-Tags vor der Veröffentlichung eines Blog-Beitrags vorbereiten.
  • Einen wiederverwendbaren Meta-Tag-Block für statische HTML-Seiten erstellen.
  • Titel-, Beschreibungs- und Bildlänge vor dem Kopieren und Einfügen in der Vorschau anzeigen.

Anwendungsfalle

Praxisbeispiele

Beispiel

Blogbeitrags-Vorschau

Ein Verlag möchte, dass ein Beitrag einen bestimmten Titel und ein bestimmtes Bild auf X, LinkedIn, Facebook, Slack und Discord anzeigt. Die generierten Tags sorgen für eine konsistente Vorschau auf diesen Plattformen.

Beispiel

Tool-Seiten-Launch

Eine neue Rechnerseite benötigt ein sauberes Vorschaubild und eine kurze Beschreibung. Dieses Tool erstellt den Social-Meta-Block, bevor die Seite live geht.

Haufige Fehler

  • Eine relative Bild-URL für Social-Media-Vorschaubilder verwenden.
  • Einen Titel oder eine Beschreibung schreiben, der/die zu lang zum Überfliegen ist.
  • Die kanonische Seiten-URL in og:url vergessen.

Überprüfung

  1. Testen Sie die veröfentlichte Seite mit dem Facebook Sharing Debugger, LinkedIn Post Inspector und X Card Validator, um zu bestätigen, dass jede Plattform die erwartete Vorschau liest.
  2. Überprüfen Sie, ob der og:url-Wert mit der kanonischen URL übereinstimmt und die og:image-URL absolut und zugänglich ist.

FAQ

Fragen zu Open-Graph- und Twitter-Card-Builder

Welche Bildgröße sollte ich verwenden?

Ein 1200x630 Pixel Bild ist ein praktischer Standard für große Link-Vorschauen. Halten Sie wichtigen Text von den Rändern fern.

Ist Twitter-Card-Markup noch nützlich?

Ja. Viele Websites enthalten weiterhin Twitter-Card-Tags, da sie explizite Vorschaubild-Daten für Plattformen bereitstellen, die sie lesen.

Kann eine Seite sowohl Open-Graph- als auch Twitter-Tags verwenden?

Ja. Die meisten Seiten sollten beide verwenden. Open Graph deckt viele Plattformen ab, während Twitter-Card-Tags zusätzliche Kontrolle für X-Stil-Vorschauen bieten.

Verwandte Tools

Weitere seo-tools

Auch ausprobieren

Auch ausprobieren