Open-Graph-Generator
Über dieses Tool
Der Open-Graph-Generator erstellt den fertigen Block mit Open-Graph- und X/Twitter-Card-Meta-Tags für den <head> deiner Seite. Du trägst Titel, Beschreibung, Adresse und Bild ein und siehst, wie dein Link beim Teilen ungefähr aussieht. Eine Prüfliste zeigt fehlende Pflichtangaben und zu kleine Bilder. Das Tool arbeitet vollständig im Browser: Es sendet nichts und ruft keine fremde Seite ab.
Wofür du es nutzen kannst
- Meta-Tags für einen neuen Blog-Artikel mit Veröffentlichungsdatum, Rubrik und Schlagwörtern erzeugen
- Eine Shop- oder Produktseite so vorbereiten, dass der Link bei WhatsApp und Facebook mit Titel und Bild erscheint
- Prüfen, ob das Vorschaubild die empfohlene Größe von 1200 × 630 Pixeln hat und wie es zugeschnitten wird
- Zwischen großer Bildkarte (summary_large_image) und kleiner Quadratkarte (summary) bei X wählen
- Fehlende Pflichtangaben wie og:image, og:url oder twitter:title vor der Veröffentlichung finden
- Titel und Beschreibung vor dem Teilen auf mögliche Kürzung in Karten und Suchergebnissen prüfen
- Abweichende Texte für Facebook und X festlegen, ohne den Seitentitel zu ändern
- Sprache, weitere Sprachversionen und Facebook-App-ID für mehrsprachige Seiten ergänzen
- Einen Entwurf per Link an Kollegen oder Entwickler schicken, die die Tags einbauen
- Sonderzeichen und Anführungszeichen in Titeln sicher für HTML-Attribute maskieren lassen
Häufige Fragen
Welche Open-Graph-Tags sind Pflicht?
Laut ogp.me sind og:title, og:type, og:image und og:url Pflicht. Empfohlen sind unter anderem og:description, og:site_name und og:locale. Bei X sind twitter:card und twitter:title erforderlich.
Welche Bildgröße sollte das Vorschaubild haben?
Meta empfiehlt mindestens 1200 × 630 Pixel bei einem Seitenverhältnis von etwa 1,91:1 und höchstens 8 MB. Kleinere Bilder unter 600 × 315 erscheinen nur als kleine Karte. X schneidet ein 1200 × 630 großes Bild bei der großen Karte leicht zu.
Wohin kommt der erzeugte Code?
Du fügst den Block in den <head>-Bereich deiner Seite ein. Bei Website-Baukästen geht das oft über die SEO- oder Theme-Einstellungen.
Warum zeigt Facebook mein neues Bild nicht an?
Plattformen speichern Vorschauen und Bilder nach Adresse zwischen. Ein neues Bild sollte daher eine neue Adresse bekommen, etwa bild-v2.jpg. Meta bietet zum erneuten Einlesen den Sharing Debugger an.
Wird mein Bild hochgeladen?
Nein. Eine gewählte Bilddatei liest der Browser nur lokal, um Maße, Größe und Format zu zeigen. Du musst das Bild später selbst auf deinem Server bereitstellen und die Adresse eintragen.
Brauche ich twitter:-Tags, wenn og:-Tags vorhanden sind?
Nötig ist mindestens twitter:card. Dass X auf og:* zurückgreift, ist nur teilweise dokumentiert. Das Tool gibt deshalb standardmäßig twitter:title, -description und -image ausdrücklich aus; das lässt sich abschalten.
Kann ich damit eine bestehende Seite analysieren?
Nein. Das Tool ruft keine Adressen ab. Die Vorschau entsteht allein aus deinen Eingaben.
Sieht der Link genauso aus wie in der Vorschau?
Nur ungefähr. Jede Plattform ändert ihr Aussehen und kürzt nach eigenen Regeln. Für LinkedIn, WhatsApp, Slack und Discord gibt es keine abrufbare Vorgabe, daher sind die Karten Annäherungen.
Wie lang dürfen Titel und Beschreibung sein?
Google nennt kein festes Limit und kürzt nach Breite. Als Richtwert gelten etwa 60 Zeichen für den Titel und etwa 160 für die Beschreibung.
Hintergrund
Open Graph ist ein Protokoll, das Facebook eingeführt hat und das auf ogp.me beschrieben ist. Es legt fest, wie eine Webseite als Objekt in sozialen Netzwerken und Messengern dargestellt wird. Die Angaben stehen als meta-Tags im <head> der Seite. Wenn jemand einen Link teilt, liest der Crawler der Plattform diese Tags aus und baut daraus die Link-Karte mit Titel, Beschreibung und Bild.
Laut Spezifikation sind vier Angaben Pflicht: og:title, og:type, og:image und og:url. Dazu kommen empfohlene Felder wie og:description, og:site_name, og:locale im Format sprache_LAND und og:image:alt für die Barrierefreiheit. Bei Artikeln lassen sich zusätzlich Veröffentlichungs- und Änderungsdatum, Autor-Profil, Rubrik und Schlagwörter angeben. Fehlen Tags, rät der Facebook-Crawler anhand der Seite, was oft zu unpassenden Vorschauen führt.
X nutzt eigene Twitter-Card-Tags. Verpflichtend sind twitter:card mit dem Wert summary oder summary_large_image sowie twitter:title. Die kleine Karte zeigt ein Quadratbild, die große ein Bild im Verhältnis 2:1. X erlaubt Bilder bis 4096 × 4096 Pixel und unter 5 MB, aber kein SVG. Wie weit X auf og:*-Werte zurückfällt, ist nur teilweise dokumentiert.
Beim Bild gilt für Meta: mindestens 200 × 200 Pixel, für die große Karte 600 × 315, für hochauflösende Geräte 1200 × 630, bei höchstens 8 MB. Bilder werden nach Adresse zwischengespeichert, deshalb braucht ein geändertes Bild eine neue Adresse. Gibt man Breite und Höhe an, kann das Bild schon beim ersten Teilen geladen werden.
Das Tool maskiert alle Werte für HTML-Attribute, sodass Anführungszeichen oder spitze Klammern im Titel das Tag nicht aufbrechen. Adressen mit javascript: oder data: werden als Fehler markiert, URLs bleiben unverändert. Die Prüfliste kennzeichnet Fehler, Warnungen und Hinweise und unterscheidet, ob eine Aussage in der Anbieter-Dokumentation steht, aus Fachwissen stammt oder ein Richtwert ist.
Da Plattformen ihre Regeln ändern, ist die Vorschau eine Annäherung. Vor wichtigen Veröffentlichungen empfiehlt sich der Test mit den Debuggern der jeweiligen Plattform.
