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. 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