OG & Social-Media-Vorschau-Tool

Was sind Open-Graph-Tags?

Open-Graph-Tags sind HTML-Schnipsel, die steuern, wie deine Website erscheint, wenn jemand einen Link in Social Media oder Messaging-Apps teilt. Sie sagen Twitter, LinkedIn, Facebook und Slack, welchen Titel sie zeigen, welches Bild sie anzeigen und welche Beschreibung sie verwenden sollen.

Ohne OG-Tags greifen Plattformen auf das zurück, was sie auf der Seite finden, was meist einen hässlichen, reinen Text-Link oder das falsche Bild bedeutet. Für Freelancer, die Kundenwebsites übergeben, ist das Prüfen der OG-Vorschau vor dem Launch ein kleiner Schritt, der einen großen Unterschied macht, wie professionell die Arbeit wirkt.

Die wichtigsten Tags sind og:title, og:description, og:image und og:url. Twitter nutzt zusätzlich twitter:card, um das Karten-Layout zu bestimmen. Jede große Plattform liest diese Tags, doch sie haben jeweils leicht unterschiedliche Anzeigeregeln. Genau deshalb gibt es ein Vorschau-Tool wie dieses.

Warum OG-Tags für Freelancer wichtig sind

Als freiberuflicher Webdesigner baust du nicht nur Websites, du baust Dinge, die andere Menschen teilen, weiterempfehlen und beurteilen. Jedes Mal, wenn ein Kunde seinen neuen Website-Link in einer WhatsApp-Gruppe teilt, auf LinkedIn postet oder in einer Slack-Nachricht versendet, ist die OG-Vorschau der erste Eindruck. Nicht die Startseite, nicht das Hero-Bild, sondern die kleine Karte, die auftaucht, wenn der Link eingefügt wird.

Wenn diese Karte das falsche Bild, einen abgeschnittenen Titel oder, im schlimmsten Fall, gar nichts zeigt, untergräbt das alles, was du gebaut hast. Es spielt keine Rolle, wie gut die Seite ist, wenn die Vorschau kaputt aussieht. Kunden merken das. Ihre Kontakte merken das. Es fällt auf deine Arbeit zurück.

Gerade für Freelancer ist das auch ein professionelles Unterscheidungsmerkmal. Die meisten Designer übergeben eine Seite, ohne je die OG-Vorschauen zu prüfen. Sie zu prüfen und etwaige Probleme vor der Übergabe zu beheben, ist ein kleines Detail, das Gründlichkeit signalisiert. Es ist genau die Art Sache, die Kunden erwähnen, wenn sie dich weiterempfehlen: "Er hat sogar geprüft, wie es beim Teilen aussieht."

Die gute Nachricht: OG-Probleme zu beheben dauert nur Minuten, sobald du weißt, worauf du achten musst. Die schlechte Nachricht: Die meisten Freelancer entdecken die Probleme erst nach dem Launch, wenn der Kunde sich meldet und fragt, warum seine Seite auf WhatsApp komisch aussieht.

Best Practices für OG-Bilder

Das OG-Bild ist das wirkungsvollste Element jeder Social-Vorschau. Ein gutes Bild steigert die Klickrate deutlich; ein fehlendes oder falsches Bild lässt selbst einen gut geschriebenen Titel unseriös wirken.

Größe: 1200×630px ist der Standard. Dieses Seitenverhältnis von 1,91:1 funktioniert über Facebook, LinkedIn und Twitters summary_large_image-Karte hinweg. Geh nicht kleiner als 600×315px, sonst greifen Plattformen womöglich auf eine reine Textanzeige zurück.

Inhalt: Das OG-Bild sollte in ein bis zwei Sekunden vermitteln, worum es auf der Seite geht, ganz ohne Text. Ein Hero-Bild, ein Produktfoto oder eine gebrandete Grafik funktionieren alle. Vermeide Bilder mit winzigem Text, der ist in Kartengröße nicht lesbar.

Dateigröße: Halte sie unter 300KB. Große OG-Bilder laden langsam, besonders mobil, und manche Plattformen komprimieren sie ohnehin aggressiv.

Eindeutigkeit pro Seite: Idealerweise hat jede wichtige Seite ihr eigenes OG-Bild, nicht nur die Startseite. Ein Blogbeitrag sollte ein passendes Bild haben, nicht denselben generischen Seiten-Header, den jede andere Seite nutzt.

Testen: Nachdem du das OG-Bild gesetzt hast, füg die URL immer in dieses Tool ein, um zu prüfen, ob es wie erwartet dargestellt wird, bevor du die Seite an den Kunden übergibst.

Wie jede Plattform OG-Tags unterschiedlich behandelt

Alle großen Plattformen lesen dieselben Open-Graph-Tags, aber jede interpretiert und zeigt sie etwas anders. Diese Unterschiede zu verstehen hilft dir, für die Plattformen zu optimieren, die das Publikum deiner Kunden tatsächlich nutzt.

Twitter / X gibt dir über das twitter:card-Meta-Tag die meiste Kontrolle. Der Kartentyp summary_large_image zeigt ein großes Bild über dem Text und erhält deutlich mehr Engagement als die kleine summary-Karte. Twitter nutzt seine eigenen twitter:title- und twitter:description-Tags, falls vorhanden, sonst greift es auf OG-Tags zurück. Titel werden bei etwa 70 Zeichen abgeschnitten.

LinkedIn liest OG-Tags und cacht sie aggressiv. Änderungen können 24 bis 48 Stunden brauchen, bis sie erscheinen, selbst nach Nutzung des Post Inspector. LinkedIn zeigt den Titel und eine verkürzte URL unter dem Bild, aber nicht die Beschreibung. Das heißt, dein Titel leistet bei LinkedIn die meiste Arbeit.

Facebook liest OG-Tags zuverlässig und cacht ebenfalls aggressiv. Der Sharing Debugger lässt dich eine Cache-Aktualisierung erzwingen. Facebook zeigt Titel, Beschreibung (bis zu zwei Zeilen) und den Domainnamen. Das bevorzugte Bildverhältnis ist 1,91:1.

Slack entfaltet Links automatisch in Channels und DMs. Es liest OG-Tags und zeigt eine kompakte Karte mit farbigem linken Rand, dem Titel als Link, einer kurzen Beschreibung und manchmal dem Bild. Slack respektiert og:image, zeigt es aber womöglich kleiner als andere Plattformen. iMessage auf iOS verhält sich ähnlich.

WhatsApp zeigt eine minimale Vorschau: Bild, Titel und Domain. Die Beschreibung wird oft abgeschnitten. Deshalb ist ein starker, beschreibender OG-Titel wichtig, er leistet bei WhatsApp-Vorschauen fast die ganze Arbeit.

So fügst du OG-Tags hinzu

Häufige Fehler bei OG-Tags

Kein OG-Bild gesetzt. Der häufigste Fehler. Ohne og:image zeigen Plattformen entweder nichts oder ziehen ein zufälliges Bild von der Seite, oft ein Logo, ein Icon oder das erste Bild im DOM, was selten die richtige Wahl ist.

Dasselbe OG-Bild für jede Seite verwenden. Das Startseiten-Bild passt zur Startseite. Blogbeiträge, Leistungsseiten und Case Studies sollten jeweils ein passendes Bild haben. Ein generisches, seitenweites OG-Bild lässt jeden geteilten Link gleich aussehen und macht es schwerer zu verstehen, worum es bei einer bestimmten Seite geht, bevor man klickt.

OG-Titel aus dem HTML-Title-Tag kopiert. Dein HTML-Titel ist für SEO optimiert (enthält oft den Markennamen: "Bester Webflow-Designer | DeineMarke"). Dein OG-Titel sollte fürs Teilen optimiert sein: menschlicher, überzeugender, weniger keyword-überladen.

Beschreibung zu lang. Die meisten Plattformen schneiden Beschreibungen bei etwa 155 bis 160 Zeichen ab. Schreib deine OG-Beschreibung so, dass der Punkt in den ersten 120 Zeichen ankommt, der Rest als optionaler Kontext.

Vergessen, den Cache nach Änderungen zu aktualisieren. OG-Tags zu aktualisieren ändert nicht sofort, was Plattformen zeigen. Nutze Twitters Card Validator, Facebooks Sharing Debugger oder LinkedIns Post Inspector, um eine Cache-Aktualisierung zu erzwingen. Wenn du diesen Schritt überspringst, launchst du womöglich eine Seite und stellst fest, dass sie wochenlang noch alte Vorschaudaten zeigt.

Nicht mobil testen. OG-Vorschauen sehen in mobilen Messaging-Apps anders aus als auf Desktop-Social-Plattformen. Prüf immer, wie die Vorschau auf WhatsApp und iMessage dargestellt wird, bevor du ein Projekt abschließt.

Mehr kostenlose Tools für Freelancer