← Blog

Häufige Fehler mit Open Graph-Tags

Sogar erfahrene Entwickler machen diese OG-Tag-Fehler. Hier sind die häufigsten – und wie man sie behebt.

Überprüfen Sie Ihre OG-Tags auf Fehler

Verwenden Sie Proovd – fügen Sie eine URL ein und sehen Sie sofort, wie sie auf X, LinkedIn, Slack, Discord, WhatsApp und Reddit aussieht.

Schnelle Antwort

  • Relative URLs für og:image verwenden – Plattformen können sie nicht abrufen
  • Fehlendes twitter:card-Tag – X wird Ihre Karte nicht rendern
  • Bild zu klein für die Plattform – LinkedIn benötigt mindestens 1200×627
  • Cache wird nach Aktualisierungen nicht geleert – Plattformen speichern OG-Tags tagelang im Cache

Fehler 1: Relative URLs für og:image verwenden

Dies ist der häufigste Fehler. Entwickler schreiben:

✗ Falsch

<meta property="og:image" content="/images/preview.jpg" />

Die Crawler der Plattformen können relative URLs nicht auflösen. Sie benötigen eine absolute URL:

✓ Richtig

<meta property="og:image" content="https://yoursite.com/images/preview.jpg" />

Verwenden Sie immer https:// in Ihrer og:image URL. Dies betrifft alle Plattformen – X, LinkedIn, Discord, Slack, WhatsApp und Reddit.

Fehler 2: Fehlendes twitter:card-Tag

Viele Entwickler setzen nur Open Graph Tags und überspringen Twitter Card Tags. X/Twitter bevorzugt twitter:card und stellt Ihre Karte ohne diese Option möglicherweise nicht korrekt dar.

✗ Unvollständig

<meta property="og:image" content="https://yoursite.com/image.jpg" />

✓ Abgeschlossen

<meta property="og:image" content="https://yoursite.com/image.jpg" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:image" content="https://yoursite.com/image.jpg" />

Stellen Sie sowohl og:image als auch twitter:image für eine vollständige Abdeckung ein. Weitere Informationen finden Sie in unserem Leitfaden Open Graph vs. Twitter Card.

Fehler 3: Bild zu klein für die Plattform

Jede Plattform hat unterschiedliche Mindestbildgrößen. Ein Bild, das auf Discord (mindestens 300×300) funktioniert, funktioniert möglicherweise nicht auf LinkedIn (mindestens 1200×627).

Platform Minimum Recommended
X / Twitter800 × 4181200 × 628
LinkedIn1200 × 6271200 × 627
Discord300 × 3001200 × 630
WhatsApp300 × 1571200 × 630
Reddit120 × 1201200 × 628

Die Verwendung von 1200 × 630 als Standardgröße deckt alle Plattformen ab. Die vollständige Aufschlüsselung finden Sie in unserem Open Graph Leitfaden zur Bildgröße.

Fehler 4: Cache nach Updates nicht leeren

Sie aktualisieren Ihre OG-Tags. Auf Plattformen wird weiterhin die alte Vorschau angezeigt. Das Problem: Plattformen speichern OG-Tags im Cache und rufen sie nicht automatisch erneut ab.

Nachdem Sie Ihre Tags aktualisiert haben, müssen Sie den Cache jeder Plattform leeren:

Sehen Sie sich unsere Anleitung So löschen Sie den Open Graph Cache an, um eine vollständige Anleitung für jede Plattform zu erhalten.

Fehler 5: Fehlende og:description oder abgeschnittener Text

Einige Entwickler legen og:title und og:image fest, überspringen aber og:description. Andere schreiben Beschreibungen, die zu lang sind und abgeschnitten werden.

Best Practices:

Fehler 6: og:url wird nicht eingestellt

Ohne og:url verwenden Plattformen möglicherweise die falsche URL in der Vorschau (z. B. eine URL mit Tracking-Parametern). Legen Sie immer die kanonische URL fest:

✓ Richtig

<meta property="og:url" content="https://yoursite.com/your-page" />

Fehler 7: Verwendung des falschen Bild-MIME-Typs

Wenn Ihr Server den falschen Content-Type-Header für Ihr Bild zurückgibt (z. B. Bereitstellung eines PNG mit image/jpeg), lehnen einige Plattformen ihn ab. Stellen Sie sicher, dass Ihr Bildserver den richtigen MIME-Typ zurückgibt:

LinkedIn ist besonders streng in Bezug auf die MIME-Typvalidierung.

Fehler 8: Dynamische Seiten ohne eindeutige OG-Tags

Wenn Sie über eine SPA oder eine dynamische Website verfügen, bei der jede Seite dieselben OG-Tags (normalerweise die Homepage-Tags) verwendet, zeigen Plattformen für jede Seite dieselbe Vorschau an. Jede Seite benötigt einen eigenen eindeutigen Titel, eine eigene Beschreibung und ein eigenes Bild.

Verwenden Sie in Next.js generateMetadata(). Verwenden Sie in WordPress die Yoast/RankMath-Einstellungen pro Seite. Legen Sie in einfachem HTML Tags einzeln auf jeder Seite fest.

Quick-Fix-Checkliste

  1. Verwenden Sie absolute URLs (https://...) für alle og:image Pfade
  2. Legen Sie die Tags og: und twitter: fest
  3. Verwenden Sie Bilder mit 1200 x 630 Pixeln für universelle Kompatibilität
  4. Leeren Sie die Plattform-Caches nach dem Aktualisieren der Tags
  5. Legen Sie für jede Seite eindeutige OG-Tags fest
  6. Fügen Sie og:description (150–160 Zeichen) ein.
  7. Setzen Sie og:url auf die kanonische URL
  8. Stellen Sie sicher, dass der MIME-Typ mit dem tatsächlichen Bildformat übereinstimmt
  9. Testen Sie mit Proovd, um alle Fehler auf einmal zu erkennen

Häufig gestellte Fragen

Was ist der häufigste Open Graph-Fehler?

Verwenden einer relativen URL für og:image anstelle einer absoluten URL, die mit https://. beginnt. Plattformen können keine relativen URLs abrufen, daher wird das Bild nie in der Vorschau angezeigt.

Warum funktioniert mein OG-Image auf einer Plattform, aber nicht auf einer anderen?

Jede Plattform hat unterschiedliche Anforderungen an die Bildgröße. LinkedIn erfordert mindestens 1200 x 627, X erfordert 800 x 418 und Discord akzeptiert mindestens 300 x 300. Ein Bild, das auf einer Plattform funktioniert, ist möglicherweise zu klein für eine andere.

Wie überprüfe ich, ob meine OG-Tags Fehler enthalten?

Verwenden Sie Proovd, um eine beliebige URL einzufügen und genau zu sehen, wie sie auf allen sechs Plattformen gleichzeitig dargestellt wird.

Verwandte Artikel

Überprüfen Sie Ihre OG-Tags auf Fehler

Verwenden Sie Proovd – fügen Sie eine URL ein und sehen Sie sich die Vorschau auf X, LinkedIn, Slack, Discord, WhatsApp und Reddit an.