Meta-Tags & Social Previews: Was Plattformen anzeigen

Ein geteilter Link zu Ihrer Website ist oft der erste Eindruck bei potenziellen Kunden – in den Google-Suchergebnissen, im Slack-Channel oder per WhatsApp-Nachricht. Was dort angezeigt wird, steuern wenige Zeilen HTML-Code, die auf vielen Seiten unvollständig sind.

Die Ursache: Jede Plattform liest ein anderes Set an Tags, in anderer Reihenfolge und mit unterschiedlichen Fallback-Regeln. Deshalb kann ein Link auf Facebook perfekt aussehen, während LinkedIn nur ein verzerrtes Logo auf grauem Grund zeigt.

Hier erfahren Sie, worauf es bei den einzelnen Plattformen ankommt.

Google

Google nutzt <title> und <meta name="description"> – formuliert diese bei Bedarf jedoch eigenständig um.

Studien zeigen, dass Google Titel bei rund einem Drittel und Beschreibungen bei über der Hälfte aller Suchanfragen dynamisch durch treffendere Textstellen der Seite ersetzt. Das ist normal und lässt sich technisch nicht unterbinden.

Für Marken- und Navigationssuchen greift Google jedoch fast immer auf Ihre Original-Tags zurück. Da diese Nutzer die höchste Conversion-Wahrscheinlichkeit haben, lohnt sich die präzise Optimierung.

Wichtige Richtwerte:

• Titel: Werden bei ca. 580 Pixeln (ca. 55–60 Zeichen) abgeschnitten. Wichtige Unterscheidungsbegriffe nach vorne stellen; den Markennamen ans Ende.
• Description: Ca. 155–160 Zeichen auf dem Desktop, mobil kürzer.
• Ein einzelner <title> pro Seite, der sich von der H1 unterscheidet: Der Title zielt auf die Suchergebnisseite, die H1 auf den Besucher nach dem Klick.

Facebook, LinkedIn, WhatsApp, Slack, Discord

Alle diese Dienste lesen Open Graph (OG):

<meta property="og:title"       content="…" />
<meta property="og:description" content="…" />
<meta property="og:image"       content="https://example.com/share.jpg" />
<meta property="og:url"         content="https://example.com/page/" />
<meta property="og:type"        content="website" />
<meta property="og:site_name"   content="Example" />

Achten Sie auf property=, nicht name=.

Fehlt og:image, crawlen Plattformen die Seite nach beliebigen Bildern – und wählen oft Icons, Logos oder Werbebanner aus.

Regeln für Social-Vorschaubilder:

• 1200×630 Pixel ist das universelle Standardformat im 1,91:1-Verhältnis.
• Bilder unter 200×200 Pixel werden von Facebook ignoriert.
• Absolute URLs verwenden (https://...).
• Dateigröße unter 1 MB halten, um Crawler-Timeouts zu vermeiden.

X (Twitter)

X priorisiert eigene Twitter-Card-Tags und greift bei Fehlen auf Open Graph zurück:

<meta name="twitter:card"        content="summary_large_image" />
<meta name="twitter:title"       content="…" />
<meta name="twitter:description" content="…" />
<meta name="twitter:image"       content="https://example.com/share.jpg" />

Achtung: Hier heißt es name=, nicht property=.

Das wichtigste Tag ist twitter:card: Ohne summary_large_image zeigt X nur ein kleines Thumbnail-Quadrat an. Erst mit diesem Tag erscheint die große, klickstarke Vorschaukarte.

Vorsicht vor aggressivem Plattform-Caching

Social-Media-Dienste cachen Metadaten über Tage hinweg. Eine Änderung im HTML korrigiert einen bereits geteilten Link nicht automatisch:

• Facebook: Cached bis zu 30 Tage. Aktualisierung über den Facebook Sharing Debugger erzwingen.
• LinkedIn: Cached ca. 7 Tage. Aktualisierung über den LinkedIn Post Inspector erzwingen.
• WhatsApp: Cached langfristig ohne öffentliches Bereinigungstool.

Praxistipp: Prüfen Sie Metadaten vor der Veröffentlichung, nicht erst nach dem ersten Teilen.

Nutzen Sie dazu unseren kostenlosen Meta-Tag- und Social-Preview-Checker, der Vorschaukarten aller Plattformen live simuliert.

Vollständiges HTML-Beispiel

<title>Präzisions-CNC-Fertigung in Stuttgart — Acme GmbH</title>
<meta name="description" content="5-Achs-CNC-Fräsen bis ±0,005 mm für Automotive und Industrie. Serien ab 500 Stück. IATF 16949 zertifiziert. Angebot in 48 Stunden." />
<link rel="canonical" href="https://example.com/leistungen/cnc-fraesen/" />

<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/leistungen/cnc-fraesen/" />
<meta property="og:title" content="Präzisions-CNC-Fertigung in Stuttgart" />
<meta property="og:description" content="5-Achs-Fräsen bis ±0,005 mm. Serien ab 500 Stück. IATF 16949 zertifiziert." />
<meta property="og:image" content="https://example.com/img/cnc-share.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="Acme GmbH" />

<meta name="twitter:card" content="summary_large_image" />

Checkliste vor dem Go-Live

1. Einzigartige Titles und Descriptions für jede Seite vorhanden?
2. og:image als absolute URL mit 1200×630 Pixeln hinterlegt?
3. twitter:card auf summary_large_image gesetzt?
4. property="og:..." und name="twitter:..." korrekt unterschieden?
5. Vorschauen in den Debugger-Tools der Plattformen geprüft?

Tool öffnen Meta & Social Preview Sehen Sie Ihre Seite exakt so, wie Google und alle Social-Media-Plattformen sie anhand Ihres Live-HTMLs darstellen. →