Beim Teilen einer URL erzeugen soziale Netzwerke eine Vorschau aus Titel, Beschreibung und Bild. Ohne passende Metadaten entscheidet die Plattform selbst, welche Inhalte sie verwendet. Das Ergebnis ist dann gern ein falsches Logo, ein abgeschnittener Titel oder gar kein Bild.
Open Graph ist der verbreitete Standard für diese Angaben. X unterstützt weiterhin eigene Metadaten mit dem Präfix twitter: – der technische Name hat die Umbenennung des Dienstes überlebt.
Die wichtigsten Open-Graph-Angaben
Für einen Artikel reichen in der Regel diese Felder:
<meta property="og:title" content="Open Graph und X Cards richtig einsetzen" />
<meta
property="og:description"
content="So steuerst Du Titel, Text und Bild geteilter Webseiten."
/>
<meta property="og:type" content="article" />
<meta
property="og:url"
content="https://itextreme.de/articles/open-graph-twitter-cards-so-bringst-du-deine-inhalte-gross-raus"
/>
<meta
property="og:image"
content="https://itextreme.de/images/articles/open-graph-social-cards.avif"
/>
<meta property="og:image:alt" content="Abstrakte Darstellung sozialer Medien" />
<meta property="og:locale" content="de_DE" />
<meta property="og:site_name" content="ITextreme" />
Titel und Beschreibung
og:title benennt den konkreten Inhalt, og:description fasst seinen Nutzen in einem oder zwei Sätzen zusammen. Starre Zeichengrenzen sind wenig hilfreich, weil Plattformen je nach Gerät und Oberfläche unterschiedlich kürzen. Wichtiges gehört deshalb an den Anfang.
SEO-Titel und Open-Graph-Titel dürfen sich unterscheiden. Eine Suchergebnisseite und ein Social-Media-Feed haben nicht dieselbe Aufgabe. Inhaltlich sollten beide Angaben aber dieselbe Erwartung wecken.
URL und Typ
og:url sollte die kanonische, absolute URL enthalten – ohne Trackingparameter. og:type ist für einen einzelnen Beitrag normalerweise article, für eine allgemeine Seite website.
Bild und Alternativtext
Auch og:image braucht eine absolute, öffentlich erreichbare HTTPS-URL. Ein Seitenverhältnis von ungefähr 1,91:1 und eine Größe von 1200 × 630 Pixeln funktionieren auf vielen Plattformen gut. Das ist eine robuste Konvention, keine Garantie für identische Darstellung.
Das Motiv muss auch nach einem Beschnitt erkennbar bleiben. Text im Bild ist riskant: Auf kleinen Karten wird er unlesbar, und Plattformen schneiden unterschiedlich. og:image:alt beschreibt den relevanten Bildinhalt für unterstützende Technologien.
Zusätzliche Angaben für X
X kann auf Open Graph zurückgreifen. Mit wenigen zusätzlichen Feldern lässt sich der Kartentyp ausdrücklich festlegen:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Open Graph und X Cards richtig einsetzen" />
<meta
name="twitter:description"
content="So steuerst Du Titel, Text und Bild geteilter Webseiten."
/>
<meta
name="twitter:image"
content="https://itextreme.de/images/articles/open-graph-social-cards.avif"
/>
<meta name="twitter:image:alt" content="Abstrakte Darstellung sozialer Medien" />
<meta name="twitter:site" content="@ITextremeDE" />
Für redaktionelle Inhalte ist summary_large_image meist passend. summary stellt das Bild kleiner dar. Ältere Anleitungen nennen weitere Kartentypen, die heute nicht mehr in jedem Fall angeboten oder gleich behandelt werden. Prüfe deshalb die aktuelle Dokumentation der Zielplattform.
Umsetzung in Next.js
Im App Router kann Next.js Metadaten aus statischen Angaben oder mit generateMetadata erzeugen. Für dynamische Artikel sollten Titel, Beschreibung, kanonische URL und Bild aus denselben geprüften Inhaltsfeldern stammen.
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "Open Graph und X Cards richtig einsetzen",
description: "So steuerst Du Titel, Text und Bild geteilter Webseiten.",
alternates: {
canonical:
"https://itextreme.de/articles/open-graph-twitter-cards-so-bringst-du-deine-inhalte-gross-raus",
},
openGraph: {
type: "article",
locale: "de_DE",
siteName: "ITextreme",
images: [
{
url: "/images/articles/open-graph-social-cards.avif",
width: 1200,
height: 630,
alt: "Abstrakte Darstellung sozialer Medien",
},
],
},
twitter: {
card: "summary_large_image",
site: "@ITextremeDE",
},
};
Eine zentrale Metadatenfunktion verhindert, dass Artikel, Taxonomien und statische Seiten dieselben Regeln unterschiedlich umsetzen.
Warum Änderungen oft nicht sofort erscheinen
Plattformen speichern Linkvorschauen im Cache. Eine korrigierte Seite kann deshalb weiterhin mit dem alten Bild erscheinen. Facebook bietet dafür den Sharing Debugger, LinkedIn den Post Inspector an. Bei anderen Diensten hilft je nach Plattform ein erneutes Abrufen oder schlicht Geduld.
Vor der Fehlersuche sollte geprüft werden:
- Liefert die URL ohne Anmeldung einen erfolgreichen HTTP-Status?
- Stehen die Metadaten bereits im initialen HTML?
- Sind Bild- und Seiten-URL absolut und per HTTPS erreichbar?
- Blockieren
robots.txt, Firewall oder Hotlink-Schutz den Abruf? - Stimmen Content-Type und Dateiformat des Bildes?
- Verweist
og:urlauf die richtige kanonische Seite?
Was Open Graph nicht leistet
Gute Metadaten reparieren keinen schwachen Inhalt und garantieren keine Reichweite. Sie stellen nur sicher, dass eine Plattform brauchbare Informationen für ihre Vorschau erhält. Die Plattform kann Angaben kürzen, ein Bild anders beschneiden oder die Darstellung jederzeit ändern.
Fazit
Eine solide Linkvorschau braucht keine Sammlung exotischer Tags. Konsistente Titel und Beschreibungen, eine kanonische URL, ein geeignetes Bild mit Alternativtext und wenige plattformspezifische Ergänzungen reichen. Danach wird mit echten URLs getestet – nicht nur im lokalen Browser.
