Leitfaden für geteilte Links
Open Graph Bilder: geteilten Link vor dem Veröffentlichen testen
Open Graph Bilder bestimmen, wie deine Seite aussieht, wenn jemand einen Link teilt. Dieser Leitfaden zeigt passende Größen, Tags, Design-Prüfungen, Cache-Fixes und eine Checkliste vor dem Veröffentlichen.
Kurze Antwort
Wähle ein Open Graph Bild und teste den Link vor dem Teilen
Starte bei den meisten Seiten mit einem Bild in 1200 x 630. Halte wichtigen Text und Logos weg vom Rand, nutze absolute HTTPS-Bild-URLs und teste die fertige URL in den Debug-Tools. Dieser einfache Ablauf findet die meisten kaputten Linkkarten.
Rolle der Linkkarte
Behandle das Open Graph Bild als Teil der Seite
Ein Open Graph Bild ist keine Deko. Es ist das Bild, das deine Seite in Link-Karten für Feeds, Chats und Arbeitstools darstellt. Es sollte zu Titel, Beschreibung, sichtbarem Seitenthema und Bild in den strukturierten Daten passen.
Sie macht den Klick attraktiv
Bild, Titel und Beschreibung bilden den ersten Eindruck, bevor der Besucher deine Seite erreicht.
Sie sollte zum Inhalt passen
Ein gutes Open Graph Bild passt zu Seitentitel, sichtbarem Thema und Nutzenversprechen. Es ist besser als eine allgemeine Marken-Grafik.
Sie gehört zu den SEO-Daten
Open Graph Bilder, Twitter Card Bilder, Canonical URLs und JSON-LD Bilder sollten dieselbe Seite beschreiben.
Sie braucht eine Regel für Dateinamen
Ein klarer Dateiname und eine Update-Regel verhindern, dass alte Cache-Bilder oder Kampagnenbilder später wieder auftauchen.
Größenplan
Wähle Größen, die in echten Linkkarten funktionieren
Plattformen schneiden Linkkarten etwas unterschiedlich zu und cachen sie auch anders. Ein Bild mit 1200 x 630 ist ein guter Open-Graph-Standard. Sicherer ist: mit einer ruhigen Bildmitte gestalten und die fertige URL auf den wichtigen Plattformen testen.
| Plattform oder Einsatz | Praktischer Bildplan | Darauf achten | Prüfung vor dem Veröffentlichen |
|---|---|---|---|
| Allgemeines Open Graph | Nutze 1200 x 630 als praktischen Standard für ein großes Share-Bild. | Kleine Bilder können unscharf wirken oder nur als kleine Thumbnails erscheinen. | Prüfe die finale URL vor dem Teilen im Debugger der Plattform. |
| Facebook und LinkedIn | Nutze dasselbe Bild im Format 1,91:1, außer die Seite braucht eine eigene Datei für eine Plattform. | Ränder können je nach Feed-Layout und Gerät unterschiedlich zugeschnitten werden. | Halte wichtigen Text und Logos in der sicheren Mitte. |
| Große X-Karte | Nutze summary_large_image und halte das Motiv zentriert. X unterstützt eine breite große Karte. | Winziger Text und Details am Rand können verschwinden, wenn die Karte zugeschnitten oder verkleinert wird. | Setze twitter:image und teste mit den X Card Tools. |
| Chat-Apps und Arbeitstools | Halte die Datei klein und das Design einfach, weil Linkkarten oft in kompakten Bereichen erscheinen. | Unruhige Screenshots, lange Überschriften und schwacher Kontrast werden schnell unlesbar. | Füge den finalen Link in die Tools ein, die deine Zielgruppe wirklich nutzt. |
Platziere die wichtigste Aussage in der Bildmitte. Ränder sind riskant, weil Feed-Karten, Chat-Karten und mobile Layouts unterschiedlich zuschneiden können.
HTML
Setze die Tags, die Crawler vor dem Veröffentlichen brauchen
Open Graph Tags gehören in den HTML-Head. Nutze absolute Bild-URLs, gib Breite und Höhe an, ergänze sinnvollen Alt-Text und halte die Canonical URL passend zur Seite, die Nutzer wirklich teilen.
<meta property="og:type" content="article">
<meta property="og:title" content="Your clear page title">
<meta property="og:description" content="A short description that matches the page.">
<meta property="og:url" content="https://example.com/guide/">
<meta property="og:image" content="https://example.com/images/guide-og-1200x630.jpg">
<meta property="og:image:secure_url" content="https://example.com/images/guide-og-1200x630.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Short description of the preview image">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/images/guide-og-1200x630.jpg">
<meta name="twitter:image:alt" content="Short description of the preview image">| Tag | Warum es wichtig ist | Häufiger Fehler |
|---|---|---|
| og:image | Zeigt Crawlern das Bild, das die Seite darstellen soll. | Ein relativer Pfad oder ein Bild, das durch Login, Weiterleitungen oder Robots-Regeln blockiert ist. |
| og:image:width / og:image:height | Nennt Plattformen die Bildgröße, bevor sie die Datei laden und prüfen. | Breite und Höhe fehlen, sodass jeder Crawler selbst raten muss, wie die Linkkarte gerendert wird. |
| og:image:alt | Beschreibt das Open Graph Bild für Barrierefreiheit und gibt Crawlern mehr Kontext. | Der Seitentitel wird wiederholt, statt zu beschreiben, was im Bild sichtbar ist. |
| og:url | Verbindet die Linkkarte mit der Canonical URL, die geteilt werden soll. | Eine Tracking-, Staging- oder falsche Sprach-URL wird als dauerhafte Seitenidentität genutzt. |
| twitter:card / twitter:image | Gibt X eine klare Anweisung für eine große Karte und optional ein eigenes Bild für diese Plattform. | Die Annahme, dass X das Open Graph Bild immer genau wie andere Plattformen rendert. |
Wenn du Blazor nutzt, hält Blazor SEO-Metadatenkomponente Open Graph Tags, Twitter Card Tags, Canonical URLs und JSON-LD Metadaten zusammen.
Design-Regeln
Gestalte zuerst für eine kleine Feed-Karte
Die meisten Menschen sehen nicht das ganze Bild. Sie sehen eine verkleinerte Karte im Feed, in einer Nachricht oder in einem Tool. Einfache Layouts gewinnen: ein klares Motiv, lesbarer Kontrast und kein winziger Text, der nur im Designprogramm funktioniert.
Arbeitsablauf
Ein einfacher Ablauf für jede wichtige Seite
- 1
Formuliere die Aussage der Linkkarte
Entscheide, was die Karte auf einen Blick sagen soll: Thema, Nutzen, Produkt oder Blickwinkel des Artikels.
- 2
Erstelle das Bild im geplanten Format
Nutze 1200 x 630 für die Standarddatei und halte wichtige Inhalte zentriert.
- 3
Datei optimieren
Nutze JPG oder PNG für das Social-Bild, halte die Datei angemessen klein und vermeide sichtbare Kompressionsschäden.
- 4
Metadaten und Schema setzen
Aktualisiere Open Graph Tags, Twitter Card Tags, Canonical URL und JSON-LD Bildverweise zusammen.
- 5
Mit stabilem Dateinamen veröffentlichen
Nutze einen sinnvollen Dateinamen. Ändere ihn beim Ersetzen des Bildes, wenn Plattform-Caches wahrscheinlich die alte Version behalten.
- 6
Finale URL testen
Prüfe die öffentliche Seiten-URL mit den Debugger-Tools und kontrolliere die echte Linkkarte, nicht nur den Quellcode.
Tool-Hinweis
Nutze PixelPress, sobald die Bildgröße feststeht
Wenn der Bildplan die finalen Dateien nennt, kann PixelPress bei der lokalen Umwandlung in WebP oder AVIF helfen. Originale bleiben unverändert. Prüfe die Ausgabe und aktualisiere danach die Open Graph URL.
Fehlersuche
Aktualisiere Plattform-Caches, bevor du dem Ergebnis vertraust
Social-Plattformen cachen Linkdaten. Wenn du ein Bild ersetzt, aber dieselbe URL behältst, kann die Plattform weiter die alte Linkkarte zeigen. Nutze die offiziellen Tools und ändere bei Bedarf den Dateinamen oder verwende eine versionierte URL.
Checkliste
Open Graph Bild-Checkliste vor dem Veröffentlichen
Nutze diese Liste, bevor ein Artikel, eine Produktseite, eine Tool-Seite oder eine Landingpage live geht. Sie findet Probleme mit Linkkarten, die nach dem Teilen eines Links viel Aufwand machen.
Häufige Fragen
Welche Größe sollte ein Open Graph Bild haben?
Nutze 1200 x 630 als praktischen Standard für die meisten Open Graph Linkkarten. Das ist groß genug für hochauflösende Displays und nah am üblichen 1,91:1-Format. Teste trotzdem die finale URL, weil jede Plattform Linkkarten anders zuschneiden oder cachen kann.
Kann ich dasselbe Open Graph Bild für jede Seite nutzen?
Du kannst das tun, aber es ist meist schwächer. Ein allgemeines Markenbild ist besser als kein Bild. Wichtige Artikel, Produktseiten und Tools sollten aber ein Open Graph Bild haben, das zur konkreten Seite passt.
Warum wird mein altes Open Graph Bild noch angezeigt?
Der häufigste Grund ist Plattform-Caching. Nutze den Facebook Sharing Debugger, den LinkedIn Post Inspector oder die X Card Tools, um die URL zu aktualisieren. Wenn die alte Datei weiter erscheint, veröffentliche das neue Bild mit neuem Dateinamen oder versionierter URL.
Was ist der Unterschied zwischen og:image und twitter:image?
og:image ist das Standardbild von Open Graph und wird von vielen Plattformen genutzt. twitter:image ist für X Cards. Wenn du twitter:image angibst, kann X dieses Bild nutzen, statt auf og:image zurückzufallen.
Sollte das JSON-LD Bild zum Open Graph Bild passen?
Es muss nicht identisch sein, sollte aber dieselbe Seitenaussage unterstützen. Such-Metadaten, Open Graph Tags, Twitter Cards und JSON-LD sollten nicht auf unpassende oder veraltete Bilder zeigen.
Wo passt PixelPress bei Open Graph Bildern dazu?
PixelPress passt nach der Entscheidung über Bildgröße, Dateiname und Aufgabe. Es kann finale Dateien lokal umwandeln und Originale unverändert lassen. Danach braucht die Seite trotzdem korrekte Metadaten und einen Linktest.