Du hast gerade einen grossartigen Blog-Beitrag veröffentlicht und teilst den Link auf LinkedIn. Doch statt eines ansprechenden Vorschaubilds mit Titel und Beschreibung erscheint nur ein trauriger grauer Kasten mit einer kryptischen URL. Kommt dir das bekannt vor?
Das Problem liegt an fehlenden oder falsch konfigurierten Open Graph Tags. Diese kleinen Meta-Angaben im HTML-Code deiner Website bestimmen, wie deine Inhalte auf Social Media, in Messengern und in Chat-Programmen dargestellt werden. Für Schweizer KMU, die über Social Media neue Kunden gewinnen wollen, ist das ein Detail, das einen grossen Unterschied macht.
In unserem umfassenden Perfekte Website Guide behandeln wir alle Aspekte einer professionellen Website. In diesem Beitrag fokussieren wir uns auf die Social-Sharing-Optimierung.
Das Open Graph Protocol wurde 2010 von Facebook (heute Meta) eingeführt und ist heute der Standard, den fast alle Plattformen verwenden, um Link-Vorschauen zu generieren. Es besteht aus Meta-Tags im <head>-Bereich deiner Website, die den Plattformen sagen, welches Bild, welcher Titel und welche Beschreibung angezeigt werden soll.
Jede Seite deiner Website sollte mindestens diese vier Open Graph Tags haben:
- og:title -- Der Titel, der in der Vorschau erscheint. Kann sich vom regulären Seitentitel unterscheiden.
- og:description -- Eine kurze Beschreibung (120-160 Zeichen), die unter dem Titel angezeigt wird.
- og:image -- Das Vorschaubild. Das ist der wichtigste Tag, weil er die visuelle Wirkung bestimmt.
- og:url -- Die kanonische URL der Seite.
- og:type -- Der Inhaltstyp (z.B.
website, article, product).
- og:locale -- Die Sprache (für Schweizer Websites:
de_CH).
- og:site_name -- Der Name deiner Website oder deines Unternehmens.
- article:published_time -- Das Veröffentlichungsdatum für Blogbeiträge.
- article:author -- Der Autor des Beitrags.
Das Vorschaubild ist das Erste, was Nutzer sehen, wenn dein Link geteilt wird. Ein professionelles OG-Image kann die Klickrate dramatisch steigern.
- Empfohlene Grösse: 1200 x 630 Pixel (das Seitenverhältnis 1.91:1 funktioniert auf allen Plattformen).
- Dateigrösse: Unter 1 MB, idealerweise 100-300 KB.
- Format: JPG oder PNG. JPG für Fotos, PNG wenn Text im Bild ist.
- Safe Zone: Halte wichtige Inhalte im mittleren Bereich, da Plattformen unterschiedlich zuschneiden.
- Verwende dein Logo dezent in einer Ecke, damit deine Marke erkennbar ist.
- Grosser, lesbarer Text: Wenn du Text im Bild verwendest, sollte er auch auf kleinen Smartphone-Bildschirmen lesbar sein.
- Konsistente Farben: Nutze deine Unternehmensfarben für einen einheitlichen Auftritt.
- Vermeide zu viel Text: Facebook reduziert die Reichweite von Beiträgen mit textlastigen Bildern.
- Professionelle Bilder: Stockfotos von Unsplash oder eigene professionelle Aufnahmen wirken besser als Smartphone-Schnappschüsse.
Ein Berner Treuhandbüro hat seine LinkedIn-Klickrate um 65% gesteigert, nachdem es konsequent professionelle OG-Images mit dem Firmenlogo und einer klaren Botschaft einsetzte.
Auch ohne Grafikdesign-Kenntnisse kannst du ansprechende Vorschaubilder erstellen:
- Canva: Kostenlose Vorlagen im richtigen Format. Ideal für Einsteiger.
- Figma: Mehr Kontrolle für individuelle Designs. Kostenlos für Einzelpersonen.
- Automatisierte Generierung: Moderne Frameworks wie Next.js können OG-Images automatisch aus dem Seiteninhalt generieren. Das spart Zeit und sorgt für Konsistenz.
Während Open Graph Tags auf den meisten Plattformen funktionieren, hat X (ehemals Twitter) ein eigenes System: Twitter Cards. In der Praxis brauchst du beides.
- twitter:card -- Der Kartentyp. Meistens
summary_large_image für ein grosses Vorschaubild.
- twitter:title -- Kann identisch mit
og:title sein.
- twitter:description -- Kann identisch mit
og:description sein.
- twitter:image -- Kann identisch mit
og:image sein, aber die optimale Grösse ist 1200 x 628 Pixel.
Wenn du nur Open Graph Tags und keine Twitter Card Tags hast, verwendet X als Fallback die OG-Tags. Es empfiehlt sich trotzdem, zumindest twitter:card explizit zu setzen, damit der richtige Kartentyp gewählt wird.
Jede Plattform hat ihre eigenen Eigenheiten bei der Darstellung von Link-Vorschauen. Hier ein Überblick über die wichtigsten Plattformen für Schweizer KMU:
LinkedIn ist für B2B-Unternehmen in der Schweiz oft die wichtigste Social-Media-Plattform. Beachte:
- LinkedIn cached Vorschaubilder aggressiv. Nach Änderungen musst du den Cache über den LinkedIn Post Inspector manuell leeren.
- Das Bild wird im Feed quadratisch zugeschnitten, auf der Detailseite im Querformat angezeigt.
- Beiträge mit Bild erhalten laut LinkedIn-Daten doppelt so viele Kommentare wie textbasierte Posts.
- Facebook hat einen eigenen Debugging-Tool (Sharing Debugger), um Vorschauen zu testen und den Cache zu leeren.
- Instagram zeigt keine Link-Vorschauen im Feed, aber in Stories und im Link-Sticker.
- WhatsApp (gehört zu Meta) nutzt ebenfalls Open Graph Tags für Link-Vorschauen.
Für viele Schweizer KMU ist WhatsApp der wichtigste Kanal, über den Kunden Links teilen:
- WhatsApp zeigt ein kleines Vorschaubild, den Titel und eine kurze Beschreibung.
- Das Bild wird quadratisch zugeschnitten, also achte auf eine zentrale Bildkomposition.
- WhatsApp cached sehr aggressiv. Änderungen können Stunden dauern, bis sie bei allen Nutzern ankommen.
Bevor du Inhalte teilst, solltest du immer testen, wie die Vorschau aussieht. Hier sind die wichtigsten Debug-Tools:
- Facebook Sharing Debugger: Zeigt die aktuelle OG-Vorschau und kann den Cache leeren.
- LinkedIn Post Inspector: Prüft die LinkedIn-Vorschau und aktualisiert den Cache.
- X Card Validator: Testet deine Twitter Card Darstellung.
- OpenGraph.xyz: Zeigt die Vorschau plattformübergreifend in einer Übersicht.
- Kein og:image gesetzt: Die Plattform wählt dann ein zufälliges Bild von der Seite oder zeigt gar keins.
- Bild zu klein: Unter 200 x 200 Pixel wird das Bild auf vielen Plattformen ignoriert.
- Relative URLs:
og:image und og:url müssen immer absolute URLs sein (mit https://).
- HTTP statt HTTPS: Manche Plattformen laden keine Bilder über unsichere HTTP-Verbindungen.
- Caching-Probleme: Änderungen an OG-Tags werden nicht sofort übernommen. Nutze die Debug-Tools zum Cache-Leeren.
- Sonderzeichen im Titel: Umlaute und andere Sonderzeichen sollten korrekt UTF-8-codiert sein.
Die Implementierung von Open Graph Tags hängt von deiner technischen Plattform ab:
Die meisten SEO-Plugins (Yoast SEO, Rank Math, The SEO Framework) generieren automatisch Open Graph Tags. Du kannst Titel, Beschreibung und Bild pro Seite individuell anpassen.
In Next.js kannst du Open Graph Tags über die Metadata API oder über next/head setzen. Bei D3 Webstudio setzen wir OG-Tags automatisch für jede Seite, inklusive dynamisch generierter OG-Images für Blog-Beiträge.
Für statische Seiten fügst du die Meta-Tags direkt in den <head>-Bereich jeder HTML-Datei ein. Bei mehreren Seiten lohnt sich ein Template-System, das die Tags automatisch generiert.
Nutze diese Checkliste, bevor du eine neue Seite veröffentlichst:
- og:title gesetzt und unter 60 Zeichen?
- og:description gesetzt und 120-160 Zeichen?
- og:image mit 1200 x 630 Pixel vorhanden?
- og:url mit absoluter HTTPS-URL gesetzt?
- twitter:card auf
summary_large_image gesetzt?
- Vorschau in mindestens zwei Debug-Tools getestet?
- Bild sieht auch im quadratischen Zuschnitt gut aus?
Nein, Open Graph Tags haben keinen direkten Einfluss auf dein Google-Ranking. Sie verbessern aber die Darstellung in sozialen Netzwerken, was zu mehr Klicks und Traffic führen kann. Indirekt kann das positive Signale an Google senden.
Idealerweise ja. Wenn das aber zu aufwändig ist, setze zumindest für die wichtigsten Seiten (Startseite, Dienstleistungen, meistbesuchte Blog-Beiträge) individuelle Bilder. Für die übrigen Seiten kannst du ein allgemeines Fallback-Bild mit deinem Logo verwenden.
Nein, beide Plattformen nutzen og:image. Du kannst aber für X ein separates Bild über twitter:image setzen. Für die übrigen Plattformen gilt: Ein gutes Bild im Format 1200 x 630 Pixel funktioniert überall.
Aktualisiere sie, wenn sich der Inhalt wesentlich ändert. Für Blog-Beiträge reicht es, die Tags bei der Veröffentlichung korrekt zu setzen. Vergiss nach Änderungen nicht, den Cache bei LinkedIn und Facebook zu leeren.
Open Graph Tags sind eine dieser kleinen technischen Massnahmen, die einen überraschend grossen Effekt haben. Für Schweizer KMU, die LinkedIn, Facebook und WhatsApp für ihre Kundengewinnung nutzen, sind professionelle Link-Vorschauen kein Nice-to-have, sondern Pflicht.
Mehr dazu, wie du deine Website ganzheitlich für den Erfolg aufstellst, findest du in unserem Perfekte Website Guide.
Möchtest du eine Website, die auf Social Media professionell auftritt? Unser Website-Konfigurator hilft dir, ein Angebot zusammenzustellen, das Social-Media-Optimierung, SEO und modernes Design vereint. Probiere es jetzt aus.
