Warum deine Link-Vorschau falsch aussieht und wie du sie mit Open Graph reparierst

Du teilst einen Link zu deiner neuen Landingpage, und die Vorschau zeigt kein Bild, den Titel deiner Startseite oder ein Banner von vor zwei Kampagnen. Die Seite selbst ist in Ordnung. Die Vorschau wird aus etwas anderem gebaut: ein paar Zeilen Code im Kopfbereich der Seite, die die meisten Leute nie sehen.

Dieser Beitrag behandelt die sechs Ursachen hinter den meisten kaputten Vorschauen, in der Reihenfolge, in der es sich lohnt, sie zu prüfen. Wenn du die Tags fertig geschrieben haben möchtest, erstellt dir der kostenlose Open-Graph-Generator sie, maskiert sie korrekt und prüft sie gegen die unten genannten Grenzwerte.

So entsteht eine Link-Vorschau

Wenn ein Link in einen Beitrag oder eine Nachricht eingefügt wird, schickt die App einen Crawler auf die Seite. Der Crawler liest die <meta>-Tags im <head> und zeichnet die Karte daraus. Diese Tags stammen aus dem Open-Graph-Protokoll, das vier als Pflichtangaben nennt:

• og:title: der Titel der Seite, so wie er in der Karte erscheinen soll.
• og:type: was die Seite ist, meist website oder article.
• og:image: das Bild.
• og:url: die kanonische URL der Seite, die das Protokoll als ihre dauerhafte ID bezeichnet.

Füge og:description hinzu, und du hast die Karte. Ein vollständiges, minimales Set sieht so aus:

<meta property="og:title" content="Spring linen collection">
<meta property="og:description" content="Breathable shirts in three colours.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/spring">
<meta property="og:image" content="https://example.com/og/spring.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Three linen shirts on a rail">
<meta name="twitter:card" content="summary_large_image">

Ursache 1: die Tags fehlen

Ohne og:-Tags muss jede App auf das zurückgreifen, was sie sonst auf der Seite findet, etwa das <title> oder das erste Bild, und was sie dabei auswählt, bleibt der jeweiligen App überlassen. So kann ein Link an einer Stelle gut aussehen und an der nächsten kaputt. Die Lösung: Setze die vier Pflicht-Tags plus eine Beschreibung auf jeder Seite, die geteilt werden soll, nicht nur auf der Startseite. Eine Produktseite, die mit den Tags der Startseite geteilt wird, zeigt die Karte der Startseite.

Ursache 2: die Bild-URL ist relativ

Das fällt leicht auf, weil die Seite im eigenen Browser gut aussieht. content="/images/og.jpg" funktioniert für einen Browser, der schon auf deiner Seite ist, aber der Crawler steht außerhalb davon. Schreibe die vollständige Adresse, beginnend mit https:// und deiner Domain. Dasselbe gilt für og:url.

Ursache 3: das Bild hat die falsche Größe oder Form

Jede Plattform nennt, was sie will, und zufällig stimmen sie bei einem breiten Bild überein:

• LinkedIn schreibt in seinem Leitfaden, wie man eine Website teilbar macht, das Bild solle mindestens 1200 × 627 Pixel groß sein, empfohlen 1.91:1, und höchstens 5 MB haben.
• Die Best Practices für das Teilen von Meta empfehlen Bilder mit mindestens 1080 Pixeln Breite für hochauflösende Bildschirme und mindestens 600 Pixel Breite, damit Bild-Link-Anzeigen dargestellt werden können.
• Die große Bildkarte von X unterstützt ein Seitenverhältnis von 2:1, von 300 × 157 bis 4096 × 4096 Pixel, unter 5 MB, als JPG, PNG, WEBP oder GIF, und unterstützt kein SVG, laut der Entwicklerdokumentation (die ursprüngliche Seite leitet inzwischen weiter, daher läuft dieser Link über das Internet Archive).

Eine Größe passt für alle drei: 1200 × 630. Sie liegt über dem Minimum von LinkedIn mit 1200 × 627, ist breiter als die 1080 von Meta, und ihr Verhältnis ist 1200 ÷ 630 = 1.905, also innerhalb von 5 % der 2:1 von X. Ein quadratisches oder hohes Bild wird für eine breite Karte beschnitten, also halte den wichtigen Teil in der Mitte. Der Seitenverhältnis-Rechner zeigt, was ein Zuschnitt aus der Mitte übrig lässt.

Gib außerdem die Größe in den Tags an. Meta verlangt og:image:width und og:image:height, damit der Crawler das Bild sofort rendern kann, statt es erst herunterzuladen und zu verarbeiten. Der Webmaster-Leitfaden von Meta bringt es auf den Punkt: Gib Höhe und Breite an, damit das Bild beim ersten Teilen der Seite richtig lädt.

Ursache 4: die Tags werden per JavaScript hinzugefügt

Manche Website-Baukästen und Single-Page-Apps fügen Meta-Tags erst nach dem Laden der Seite im Browser hinzu. Ein Crawler, der das HTML liest, das dein Server ausliefert, führt diesen Code möglicherweise nie aus und sieht die Tags deshalb nie. Prüfe den Quelltext der Seite (Quelltext anzeigen, nicht den Inspektor, der die Seite nach dem Ausführen der Skripte zeigt). Wenn die Tags nicht im Quelltext stehen, sieht der Crawler sie vermutlich ebenfalls nicht. Die Lösung gehört in die Einstellungen deiner Website oder in ihre serverseitige Vorlage.

Ursache 5: Sonderzeichen haben das Tag kaputtgemacht

Ein Titel mit einem doppelten Anführungszeichen, wie Das "einzige" Leinen, das du brauchst, beendet das Attribut content="..." vorzeitig, und der Rest des Titels geht verloren. Zeichen, die innerhalb eines Attributs eine Rolle spielen, müssen maskiert werden: " wird zu ", & wird zu & und < wird zu <. Browser und Crawler wandeln sie beim Lesen des Tags wieder in die ursprünglichen Zeichen um. Der Generator erledigt das für dich, und das ist schon die halbe Begründung, einen zu nutzen.

Ursache 6: die App hat die alte Version gespeichert

Du hast die Tags repariert, neu geteilt, und die alte Karte ist immer noch da. Das ist der Cache. Apps speichern, was sie abgerufen haben, und verwenden es wieder. Beide großen Netzwerke bieten ein Werkzeug, um einen frischen Blick anzufordern:

• Facebook: füge die URL in den Sharing Debugger von Meta ein. Laut dem Webmaster-Leitfaden von Meta zeigt er, welche Tags der Crawler ausgelesen hat, mit allen Fehlern oder Warnungen, und löst einen neuen Abruf aus. Die Best Practices von Meta ergänzen, dass abgerufene Inhalte sich ansonsten im Standardrhythmus von 24 Stunden aktualisieren.
• LinkedIn: schick die URL durch den Post Inspector. Die Hilfeseite von LinkedIn ist eindeutig, was die Grenze angeht: Die Aktualisierung ändert die Vorschau nur für neue Beiträge. Beiträge, die die URL bereits enthalten, behalten die alte Vorschau.

Diesen Hinweis zu LinkedIn solltest du vor einem Launch im Kopf behalten. Prüfe die Vorschau bevor der erste Beitrag rausgeht, denn einen alten Beitrag kannst du nicht reparieren, indem du die Seite reparierst.

Das Tag twitter:card: eine Zeile, nicht vier

X liest auch Open Graph. Seine Referenz für Karten-Markup führt für jedes Tag einen Fallback auf: 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. Du musst also nicht alles wiederholen. Die einzige Zeile, die du ergänzen solltest, ist twitter:card: summary_large_image für ein bildfüllendes Bild oder summary für ein kleines quadratisches Bild. Lässt du sie weg, zeigt dieselbe Referenz, dass X stattdessen eine kleine Zusammenfassungskarte anzeigen kann, und deshalb kommt ein großes Bild manchmal als Miniatur an. Dieselbe Referenz begrenzt einen Titel auf 70 Zeichen, eine Beschreibung auf 200 und den Alternativtext auf 420.

Eine Fünf-Minuten-Prüfung vor dem Launch

1. Zeige den Quelltext der Seite an und finde die og:-Tags. Alle vier Pflicht-Tags plus eine Beschreibung.
2. Prüfe, dass og:image und og:url mit https:// beginnen.
3. Öffne die Bild-URL allein in einem Browser. Sie sollte laden, mit 1200 × 630 oder nahe dran.
4. Füge die URL in den Sharing Debugger und den Post Inspector ein und lies die Karten.
5. Erst dann teilen.

Wo Hermoso passt

Hermoso ist ein KI-Marketing-Agent: Er recherchiert die Anzeigen, die in deinem Markt bereits funktionieren, erstellt markengerechte Bild- und Videoanzeigen, plant Beiträge auf deinen eigenen Konten und schaltet bezahlte Kampagnen auf deinen eigenen Werbekonten. Eine gute Link-Vorschau sorgt dafür, dass diese Beiträge angeklickt werden. Hermoso funktioniert in der Web-App oder in Claude, ChatGPT und Cursor über seinen MCP-Server.

Häufige Fragen

Warum zeigt mein Link auf Facebook oder LinkedIn kein Bild?

Meist fehlt das Tag og:image, es verwendet einen relativen Pfad statt einer vollständigen https://-Adresse, oder es verweist auf ein zu kleines Bild. LinkedIn verlangt mindestens 1200 × 627 Pixel. Schick die URL nach der Korrektur durch den Sharing Debugger von Meta oder den Post Inspector von LinkedIn, damit sie erneut abgerufen wird.

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

1200 × 630 Pixel funktionieren bei allen großen Netzwerken. Es erfüllt das Minimum von LinkedIn mit 1200 × 627 bei etwa 1.91:1, ist breiter als die 1080 Pixel, die Meta empfiehlt, und liegt nah an den 2:1, die X für große Bildkarten unterstützt.

Wie aktualisiere ich eine LinkedIn-Link-Vorschau?

Korrigiere die Tags auf der Seite und gib die URL dann im Post Inspector von LinkedIn ein. Die aktualisierte Vorschau gilt nur für neue Beiträge. Beiträge, die die URL bereits enthalten, behalten die alte Vorschau.

Brauche ich twitter:-Tags, wenn ich og:-Tags habe?

Nur twitter:card. X fällt auf og:title, og:description, og:image und og:image:alt zurück, wenn die twitter:-Versionen fehlen.