Open-Graph-Bild ergänzen - MetricSpot Docs

Q: Warum erscheint mein Bild nicht, obwohl ich das Tag gesetzt habe?

Drei übliche Verdächtige: (1) die URL ist relativ (/og.png) statt absolut (https://example.com/og.png) — die meisten Plattformen verlangen absolut, (2) das Bild liefert 404 oder 500, (3) die Plattform zeigt eine gecachte Vorschau aus einer früheren Version. Schick die URL durch den Facebook-Debugger und re-scrape.

Q: Brauche ich ein anderes Bild für Twitter/X?

Nur wenn du eines willst. X fällt auf og:image zurück, wenn kein twitter:image gesetzt ist, aber twitter:card sollte summary_large_image sein, um das große Karten-Layout zu bekommen. Siehe Twitter Card Tags.

Q: Was, wenn meine Seite dynamisch ist und sich der Inhalt ändert?

Generiere ein neues Bild zur Build-Zeit (Astro/Next.js — astro-og-canvas, @vercel/og) oder zur Request-Zeit (Edge Functions). Für E-Commerce sollte die Produktseite ein Produktfoto verwenden. Für Blog-Posts eine Templatkarte mit dem Beitragstitel.

Was diese Prüfung macht

Sucht <meta property="og:image" content="..."> im <head> der Seite. Die Prüfung fällt durch, wenn das Tag fehlt, wenn die URL relativ ist (muss absolut sein) oder wenn das Bild keinen 200er-Statuscode liefert.

Warum es wichtig ist

Das OG-Bild ist das mit Abstand größte visuelle Element einer geteilten Link-Karte. Facebook, LinkedIn, Slack, Discord, iMessage, WhatsApp, Telegram, Mastodon, Bluesky und die meisten RSS-Reader rendern es alle gleich: eine Karte mit Bild oben und Titel/Beschreibung darunter.

Ein Link mit einem scharfen 1200×630-Bild wird mehrere Male häufiger geklickt als derselbe Link ohne Bild. Bare-URL-Fallbacks wirken kaputt — die meisten Nutzer halten die Seite für tot.

Das OG-Bild speist außerdem Googles “Über dieses Ergebnis”-Panel und KI-Such-Zitierkarten — es fehlen zu lassen ist also auch ein SEO- und KI-Discoverability-Problem, nicht nur ein soziales.

Wie du es behebst

Setze eine absolute URL zu einem 1200×630 PNG oder JPG in den <head> der Seite:

<meta property="og:image" content="https://example.com/og/home.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="MetricSpot home page screenshot">

Die Sub-Tags :width, :height und :alt sind optional, verbessern aber das Rendering auf langsamen Verbindungen und die Barrierefreiheit für Screenreader.

Größenregeln (Facebooks Spec — alle anderen Plattformen folgen ihr):

Seitenverhältnis 1.91:1 (1200×630 ist die kanonische Größe).
Mindestens 600×315 — alles darunter wird als kleines Quadrat statt als große Karte gerendert.
Maximal 5 MB Dateigröße.
PNG für textlastige Designs, JPG für Fotos.

Dynamische OG-Bilder — automatisch ein eigenes Bild pro Beitrag generieren:

Vercel OG Image — @vercel/og, JSX → PNG an der Edge.
Astro — astro-og-canvas oder satori für Laufzeitgenerierung; zur Build-Zeit in dist/og/*.png einbacken.
WordPress — Yoast Premium, Rank Math oder ein Plugin wie “WP OG Image Auto” legen den Beitragstitel über ein Template.
Cloudinary / Imgix — Text-Overlay-Transformationen auf einem Basistemplate-Bild.

WordPress — setze das Beitragsbild, und Yoast/Rank Math nutzen es automatisch als og:image.

Vor dem Ausrollen testen — füge die URL in Facebooks Sharing Debugger und LinkedIns Post Inspector ein. Klick nach Änderungen “Re-scrape”, um den Cache zu erneuern.

Häufig gestellte Fragen

Warum erscheint mein Bild nicht, obwohl ich das Tag gesetzt habe?

Drei übliche Verdächtige: (1) die URL ist relativ (/og.png) statt absolut (https://example.com/og.png) — die meisten Plattformen verlangen absolut, (2) das Bild liefert 404 oder 500, (3) die Plattform zeigt eine gecachte Vorschau aus einer früheren Version. Schick die URL durch den Facebook-Debugger und re-scrape.

Brauche ich ein anderes Bild für Twitter/X?

Nur wenn du eines willst. X fällt auf og:image zurück, wenn kein twitter:image gesetzt ist, aber twitter:card sollte summary_large_image sein, um das große Karten-Layout zu bekommen. Siehe Twitter Card Tags.

Was, wenn meine Seite dynamisch ist und sich der Inhalt ändert?

Generiere ein neues Bild zur Build-Zeit (Astro/Next.js — astro-og-canvas, @vercel/og) oder zur Request-Zeit (Edge Functions). Für E-Commerce sollte die Produktseite ein Produktfoto verwenden. Für Blog-Posts eine Templatkarte mit dem Beitragstitel.