Open Graph Meta-Tag-Generator

Die Tags, aus denen eine Link-Vorschau aufgebaut wird

Wenn jemand deinen Link in einen Beitrag oder eine Nachricht einfügt, schickt die App einen Crawler zur Seite und liest eine Handvoll <meta>-Tags im <head>. Diese Tags stammen aus dem Open-Graph-Protokoll, das vier davon als erforderlich nennt:

• og:title: der Titel, wie er in der Vorschau erscheinen soll.
• og:type: was die Seite ist. website passt zu den meisten Seiten und article zu einem Blogbeitrag. Das Protokoll definiert außerdem Typen wie profile, book, video.movie und music.song.
• og:image: die URL des Bildes, das die Seite repräsentiert.
• og:url: die kanonische URL, die das Protokoll die dauerhafte ID des Objekts nennt.

Das Protokoll definiert auch optionale Tags, und der Generator schreibt die nützlichen davon: og:description, og:site_name und die Bilddetails og:image:width, og:image:height und og:image:alt. Beim Alt-Text ist das Protokoll eindeutig: Wenn eine Seite og:image angibt, sollte sie auch og:image:alt angeben, und dieser Text beschreibt, was im Bild zu sehen ist, und ist keine Bildunterschrift.

Was X ergänzt: twitter:card

X liest auch Open Graph. Seine Referenz zum Cards-Markup (X’ Entwicklerdokumentation, hier über das Internet Archive verlinkt, weil die Originalseite inzwischen weiterleitet) nennt für jedes Tag den Fallback: twitter:title fällt auf og:title zurück, twitter:description auf og:description, twitter:image auf og:image und twitter:image:alt auf og:image:alt. Das eine Tag, das sich lohnt hinzuzufügen, ist also twitter:card, das das Layout bestimmt. Lässt du es weg, kann X laut derselben Referenz auf eine kleine Summary Card zurückfallen, selbst wenn du die große wolltest:

• summary_large_image: ein Bild in voller Breite über dem Titel. X’ Seite zur großen Bild-Card gibt an, dass die Bilder dafür ein Seitenverhältnis von 2:1 unterstützen, mit Mindestmaßen von 300 × 157 und einem Maximum von 4096 × 4096 Pixeln, unter 5 MB, als JPG, PNG, WEBP oder GIF. SVG wird nicht unterstützt.
• summary: eine kleinere Card mit quadratischem Bild. X’ Seite zur Summary Card gibt an, dass das Bild ein Verhältnis von 1:1 unterstützt, von 144 × 144 bis zu 4096 × 4096 Pixeln, und auf allen Plattformen zu einem Quadrat zugeschnitten wird.

Dieselbe Referenz führt app- und player-Cards auf, die zusätzliche Felder für den App Store oder Videoplayer brauchen und deshalb hier ausgelassen werden. Sie dokumentiert auch die Limits, die die obigen Prüfungen verwenden: 70 Zeichen für einen Titel, 200 für eine Beschreibung und 420 für Alt-Text.

Bildgrößen, die die Plattformen angeben

• LinkedIn: der Leitfaden zum Teilbarmachen einer Website verlangt og:title, og:image, og:description und og:url und nennt eine maximale Dateigröße von 5 MB, ein Minimum von 1200 × 627 Pixeln und ein empfohlenes Seitenverhältnis von 1,91:1.
• Meta: die Best Practices zum Teilen empfehlen für hochauflösende Bildschirme Bilder mit mindestens 1080 Pixeln Breite und für Bild-Link-Anzeigen mindestens 600 Pixel Breite. Dieselbe Seite verlangt og:image:width und og:image:height, damit der Crawler das Bild sofort rendern kann, ohne es erst herunterladen und verarbeiten zu müssen.

Ein Bild mit 1200 × 630 erfüllt all das: es ist mindestens 1200 × 627 für LinkedIn, breiter als 1080 für Meta und 1,905:1, also innerhalb von 5 % des 2:1 von X.

Prüfen und alte Vorschauen aktualisieren

Apps speichern das, was sie ausgelesen haben, im Cache, also behebt das Korrigieren der Tags keine bereits gespeicherte Vorschau. Beide großen Netzwerke geben dir dafür ein Tool:

• Metas Sharing Debugger zeigt die Tags, die sein Crawler ausliest, mit allen Fehlern oder Warnungen, und löst ein erneutes Auslesen aus. Metas Webmaster-Leitfaden beschreibt ihn, und die Best-Practices-Seite weist darauf hin, dass ausgelesene Inhalte sonst in einem Standardzeitraum von 24 Stunden aktualisiert werden.
• LinkedIns Post Inspector aktualisiert eine im Cache gespeicherte URL. LinkedIns Hilfeseite weist darauf hin, dass die Aktualisierung nur neue Beiträge betrifft: Beiträge, die die URL bereits enthalten, behalten die alte Vorschau.

Was dieses Tool nicht macht

Es ruft weder deine Seite noch dein Bild ab und kann daher nicht sehen, was tatsächlich live ist; die Vorschau oben ist eine Textskizze statt eines Renderings. Es schreibt die Tags; deine Website muss sie weiterhin im <head> der Seite ausliefern, im HTML, das der Crawler erhält. Später per JavaScript hinzugefügte Tags werden womöglich nie gesehen. Und es schreibt keine app- oder player-Cards oder die zusätzlichen Eigenschaften, die Typen wie book oder video.movie definieren.

Wenn du das lieber nicht von Hand schreiben willst

Hermoso ist Marketing auf Autopilot: Es recherchiert die Anzeigen, die in deinem Markt bereits funktionieren, erstellt markengerechte Bild- und Video-Ads, plant die Posts und schaltet bezahlte Kampagnen über deine eigenen Werbekonten. Es läuft in der Web-App oder in Claude, ChatGPT und Cursor über seinen MCP-Server.

Kostenlose Tools: UTM-Link-Builder · QR-Code-Generator · Social-Media-Format-Guide

Häufige Fragen

Welche Open-Graph-Tags sind erforderlich?

Das Open-Graph-Protokoll nennt vier erforderliche Eigenschaften: og:title, og:type, og:image und og:url. og:description, og:site_name sowie die Tags für Breite, Höhe und alt von og:image sind optional, aber empfehlenswert.

Brauche ich twitter:title und twitter:image, wenn ich og:-Tags habe?

Nein. Die Cards-Markup-Referenz von X sagt, dass twitter:title, twitter:description, twitter:image und twitter:image:alt auf ihre og:-Entsprechungen zurückgreifen. Der Tag, den du ergänzen solltest, ist twitter:card, der das Card-Layout auswählt.

Welche Größe sollte ein Open-Graph-Bild haben?

LinkedIn verlangt mindestens 1200 × 627 Pixel bei 1,91:1 und unter 5 MB. Meta empfiehlt mindestens 1080 Pixel Breite. Die Large-Image-Card von X unterstützt 2:1 von 300 × 157 bis 4096 × 4096. Ein Bild mit 1200 × 630 passt zu allen dreien.

Warum zeigt mein Link nach dem Ändern der Tags noch ein altes Bild?

Die App hat den alten Scrape gecacht. Lass die URL durch Metas Sharing Debugger oder LinkedIns Post Inspector laufen, um sie erneut abzurufen. LinkedIn weist darauf hin, dass Beiträge, die die URL bereits teilen, die alte Vorschau behalten.

Warum werden Anführungszeichen und Und-Zeichen in der Ausgabe geändert?

Sie werden HTML-escaped, damit der Tag gültig bleibt. Ein Titel wie Tom & Jerry's "Sale" wird innerhalb des content-Attributs zu Tom & Jerry's "Sale", und Browser und Crawler lesen ihn wieder als den ursprünglichen Text.

Lädt das Tool mein Bild?

Nein. Nichts, was du eingibst, wird irgendwohin gesendet, und die Bild-URL wird nie abgerufen. Deshalb zeigt die Vorschau einen Platzhalter statt des Bildes.