Was sind Social Meta Tags?
Social Meta Tags sind spezielle HTML-Meta-Elemente, die Plattformen wie Facebook, LinkedIn, WhatsApp und Twitter/X mitteilen, wie eine geteilte URL dargestellt werden soll. Ohne diese Tags entscheiden die Plattformen selbst, welchen Titel, welche Beschreibung und welches Bild sie anzeigen – oft mit enttäuschenden Ergebnissen.
Es gibt zwei Standards:
- Open Graph (OG): Von Facebook entwickelt, wird von fast allen Plattformen unterstützt (Facebook, LinkedIn, WhatsApp, Pinterest, Slack, Telegram und viele mehr)
- Twitter Cards: Von Twitter/X entwickelt, speziell für die Darstellung auf dieser Plattform. Twitter nutzt OG-Tags als Fallback, wenn keine eigenen Twitter-Tags vorhanden sind
Warum sind Social Meta Tags wichtig?
Wenn jemand einen Link teilt, entscheidet die Vorschau darüber, ob andere darauf klicken. Eine Studie zeigt: Beiträge mit Vorschaubild erhalten 2- bis 3-mal mehr Engagement als Beiträge ohne Bild. Social Meta Tags geben dir die Kontrolle über diese Vorschau.
Die Vorteile im Überblick:
- Höhere Klickrate: Ein ansprechendes Vorschaubild mit prägnantem Titel zieht deutlich mehr Klicks an als ein nackter Link
- Konsistente Markenwahrnehmung: Du bestimmst, wie deine Inhalte aussehen – auf jeder Plattform
- Korrekte Darstellung: Ohne OG-Tags greifen Plattformen auf beliebige Inhalte der Seite zurück, was zu unpassenden Vorschauen führt
- Gebündelte Social-Signale: Der
og:url-Tag führt Likes und Shares verschiedener URL-Varianten unter einer kanonischen URL zusammen
Die wichtigsten Open Graph Tags
og:title – Der Titel
Der og:title bestimmt die Überschrift der Vorschau. Er sollte kurz und prägnant sein und neugierig machen.
<meta property="og:title" content="7 SEO-Fehler, die dein Ranking ruinieren">
Best Practices: - Maximal 60 Zeichen (Facebook schneidet danach ab) - Kann vom Meta Title abweichen – optimiere für Social Media statt für die Suchergebnisse - Beginne mit dem stärksten Wort oder der wichtigsten Aussage
og:description – Die Beschreibung
Der og:description liefert den Vorschautext unter dem Titel. Er soll Kontext geben und zum Klicken einladen.
<meta property="og:description" content="Diese häufigen Fehler kosten dich Rankings und Traffic. Prüfe, ob deine Website betroffen ist.">
Best Practices: - 150–200 Zeichen für optimale Darstellung - Ergänze den Titel, wiederhole ihn nicht - Beantworte die Frage: „Warum sollte ich darauf klicken?"
og:image – Das Vorschaubild
Das og:image ist der wichtigste Social Meta Tag. Ohne Bild wird dein geteilter Link auf den meisten Plattformen kaum wahrgenommen.
<meta property="og:image" content="https://example.com/images/seo-fehler-preview.jpg">
Best Practices:
- 1200 × 630 Pixel – das Standardformat, das auf allen Plattformen funktioniert
- Immer eine absolute URL mit https:// verwenden
- Das Bild muss öffentlich erreichbar sein (keine Authentifizierung)
- Dateiformat: JPG oder PNG, unter 5 MB
- Text im Bild sparsam einsetzen – Facebook beschneidet Bilder je nach Layout
og:url – Die kanonische URL
Der og:url teilt der Plattform mit, welche URL die „offizielle" Version der Seite ist. So werden Shares und Likes verschiedener URL-Varianten zusammengezählt.
<meta property="og:url" content="https://example.com/blog/seo-fehler">
Best Practice: Sollte mit dem Canonical-Tag übereinstimmen.
og:type – Der Inhaltstyp
Der og:type beschreibt die Art des Inhalts. Er beeinflusst, wie die Plattform den Link kategorisiert.
<meta property="og:type" content="article">
Gängige Werte:
- website – Standard für Startseiten und allgemeine Seiten
- article – für Blogbeiträge, News, Guides
- product – für Produktseiten in Online-Shops
Twitter Cards
Twitter/X verwendet ein eigenes Tag-System, nutzt aber OG-Tags als Fallback. In der Praxis bedeutet das: Wenn du OG-Tags hast, brauchst du nur wenige zusätzliche Twitter-Tags.
twitter:card – Der Kartentyp
Der twitter:card-Tag bestimmt das Layout der Vorschau auf Twitter/X:
<meta name="twitter:card" content="summary_large_image">
Kartentypen:
- summary – Kleines Vorschaubild links, Titel und Beschreibung rechts. Gut für allgemeine Inhalte.
- summary_large_image – Großes Bild über der gesamten Breite. Deutlich höheres Engagement – empfohlen für die meisten Webseiten.
- app – Spezialformat für App-Downloads
- player – Für eingebettete Video- oder Audioinhalte
twitter:title, twitter:description, twitter:image
Diese Tags funktionieren wie ihre OG-Pendants, gelten aber spezifisch für Twitter/X:
<meta name="twitter:title" content="7 SEO-Fehler, die dein Ranking ruinieren">
<meta name="twitter:description" content="Prüfe, ob deine Website diese häufigen Fehler macht.">
<meta name="twitter:image" content="https://example.com/images/seo-fehler-twitter.jpg">
Wichtig: Twitter greift automatisch auf die entsprechenden OG-Tags zurück. Wenn og:title vorhanden ist und der Titel auf Twitter identisch sein soll, kannst du twitter:title weglassen.
Empfohlene Bildgröße für Twitter: 1200 × 628 Pixel (für summary_large_image).
Vollständiges Beispiel
Ein Blogbeitrag mit allen wichtigen Social Meta Tags:
<head>
<!-- Open Graph -->
<meta property="og:title" content="7 SEO-Fehler, die dein Ranking ruinieren">
<meta property="og:description" content="Diese häufigen Fehler kosten dich Rankings und Traffic. Prüfe deine Website.">
<meta property="og:image" content="https://example.com/images/seo-fehler.jpg">
<meta property="og:url" content="https://example.com/blog/seo-fehler">
<meta property="og:type" content="article">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
</head>
In diesem Beispiel reicht ein einziger Twitter-Tag (twitter:card), weil Twitter für Titel, Beschreibung und Bild die OG-Tags übernimmt.
Social Meta Tags und SEO
Social Meta Tags sind kein direkter Ranking-Faktor für Google. Aber sie beeinflussen das Ranking indirekt:
- Mehr Social Traffic: Ansprechende Vorschauen führen zu mehr Klicks aus sozialen Netzwerken
- Mehr Backlinks: Inhalte, die in sozialen Medien Aufmerksamkeit bekommen, werden häufiger verlinkt
- Markenbekanntheit: Konsistente, professionelle Vorschauen stärken die Markenwahrnehmung
- Nutzersignale: Mehr Traffic und längere Verweildauer senden positive Signale an Google
Häufige Fehler bei Social Meta Tags
Fehlendes Vorschaubild
Der mit Abstand größte Fehler. Ohne og:image zeigen die meisten Plattformen entweder gar kein Bild oder wählen ein zufälliges Bild von der Seite – oft ein Logo, ein Icon oder ein irrelevantes Dekobild.
Relative statt absolute URLs
Social-Media-Crawler können relative URLs nicht korrekt auflösen. /images/preview.jpg funktioniert nicht – es muss https://example.com/images/preview.jpg sein. Das gilt für og:image, og:url und twitter:image.
Identischer OG-Title und Meta Title
Der Meta Title ist für Suchergebnisse optimiert (kurz, mit Keyword). Der OG-Title darf emotionaler formuliert sein, Neugier wecken und gezielt auf soziale Netzwerke zugeschnitten werden. Nutze diese Chance für eine angepasste Ansprache.
Fehlender twitter:card-Tag
Ohne twitter:card zeigt Twitter/X den Link als einfachen Text ohne Vorschau an – selbst wenn alle OG-Tags korrekt gesetzt sind. Ein einfaches <meta name="twitter:card" content="summary_large_image"> reicht aus.
Veraltete oder falsche Bilder
Nach einem Redesign oder Bildwechsel cachen Plattformen oft die alte Vorschau. Nutze die Debugging-Tools der Plattformen, um den Cache zu leeren:
- Facebook: Sharing Debugger
- Twitter/X: Card Validator
- LinkedIn: Post Inspector
Social Meta Tags testen
Vor dem Veröffentlichen solltest du prüfen, wie deine Vorschau aussehen wird. Die Plattformen bieten dafür eigene Tools:
- Facebook Sharing Debugger – zeigt die aktuelle OG-Vorschau und lässt den Cache aktualisieren
- Twitter Card Validator – prüft, ob Twitter Cards korrekt dargestellt werden
- LinkedIn Post Inspector – zeigt die LinkedIn-Vorschau und aktualisiert den Cache