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.

Das Wichtigste in Kürze

Open Graph Tags bestimmen, wie deine Links auf LinkedIn, Facebook, WhatsApp & Co. dargestellt werden.
Das wichtigste Element ist das og:image im Format 1200 × 630 Pixel.
X (ehemals Twitter) nutzt eigene Twitter-Card-Tags, fällt aber auf Open Graph zurück.
Teste jede Vorschau vor dem Teilen – und denk daran, dass Plattformen die Vorschau aggressiv cachen.

In unserem umfassenden Perfekte Website Guide behandeln wir alle Aspekte einer professionellen Website. In diesem Beitrag fokussieren wir uns auf die Social-Sharing-Optimierung.

Was ist das Open Graph Protocol?

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.

Die vier Pflicht-Tags

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.

Zusätzliche nützliche Tags

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 perfekte OG-Image erstellen

Das Vorschaubild ist das Erste, was Nutzer sehen, wenn dein Link geteilt wird. Ein professionelles OG-Image kann die Klickrate dramatisch steigern.

Technische Anforderungen

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.

1200 × 630 px

Empfohlene Bildgrösse für og:image – funktioniert auf allen Plattformen.

1.91:1

Das ideale Seitenverhältnis für Link-Vorschauen.

100–300 KB

Ideale Dateigrösse – klein genug für schnelles Laden, gross genug für Schärfe.

Gestaltungstipps für KMU

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: Textlastige Bilder wirken überladen und sind im kleinen Vorschauformat kaum lesbar.
Professionelle Bilder: Stockfotos von Unsplash oder eigene professionelle Aufnahmen wirken besser als Smartphone-Schnappschüsse.

Professionelle OG-Images mit Firmenlogo und einer klaren Botschaft können die Klickrate auf geteilte Links deutlich erhöhen – gerade auf LinkedIn, wo viele Unternehmen noch mit lieblosen Standard-Vorschauen unterwegs sind.

Tools für die OG-Image-Erstellung

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.

Twitter Cards: Die X-spezifische Variante

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.

Die wichtigsten Twitter Card Tags

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. Ein Bild im Format 1200 x 630 Pixel funktioniert auch hier.

Fallback-Verhalten

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.

Plattform-spezifische Besonderheiten

Jede Plattform hat ihre eigenen Eigenheiten bei der Darstellung von Link-Vorschauen. Hier ein Überblick über die wichtigsten Plattformen für Schweizer KMU:

Plattform	Besonderheit	Debug-Tool
LinkedIn	Bild im Feed quadratisch zugeschnitten, aggressives Caching	LinkedIn Post Inspector
Facebook	Eigenes Tool zum Testen und Cache-Leeren	Facebook Sharing Debugger
WhatsApp	Kleines, quadratisches Vorschaubild, sehr aggressives Caching	Keines – Änderungen brauchen Geduld
X (Twitter)	Nutzt Twitter Cards, fällt auf OG-Tags zurück	Vorschau im Post-Entwurf prüfen

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 und Instagram

Facebook hat ein eigenes 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.

WhatsApp und Messenger

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:

Kostenlose 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.
OpenGraph.xyz: Zeigt die Vorschau plattformübergreifend in einer Übersicht.
X (Twitter): Der frühere Card Validator wurde eingestellt – prüfe die Vorschau direkt in einem Post-Entwurf.

Häufige Fehlerquellen

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.

Integration in dein CMS oder Framework

Die Implementierung von Open Graph Tags hängt von deiner technischen Plattform ab:

WordPress

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.

Next.js und React

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.

Statische Websites

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.

Checkliste für jede neue Seite

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?

FAQ

Beeinflussen Open Graph Tags mein Google-Ranking?

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.

Muss ich für jede Seite ein eigenes OG-Image erstellen?

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.

Kann ich verschiedene Bilder für Facebook und LinkedIn 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.

Wie oft sollte ich meine Open Graph Tags aktualisieren?

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.

Fazit: Kleine Tags, grosse Wirkung

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? Lass deine Website von uns erstellen – mit Social-Media-Optimierung, SEO und modernem Design aus einer Hand.