Open-Graph-Kern-Tags ergänzen

Q: Was, wenn meine Seite bereits einen ` ` und eine Meta-Description hat?

Suchmaschinen lesen und . Social-Plattformen lesen og:title und og:description. Das sind getrennte Felder mit getrennten Absichten (Such-Snippet vs. Share-Vorschau) — dupliziere sie lieber, statt die OG-Varianten wegzulassen.

Was diese Prüfung macht

Durchsucht den <head> der Seite nach vier meta-Tags: og:title, og:description, og:image und og:url. Das sind die minimalen Open-Graph-Properties, die jede größere Social-, Messaging- und Chat-Plattform liest, wenn jemand deinen Link einfügt.

Warum es wichtig ist

Fehlen die Tags, fällt das Link-Unfurl auf Facebook, LinkedIn, X, Slack, Discord, iMessage, WhatsApp und Telegram auf eine nackte URL mit höchstens einem gescrapten Seitentitel zurück — kein Vorschaubild, keine Beschreibung. Die Klickrate auf eine vorschaulose Karte ist ein Bruchteil derjenigen mit einem 1200×630-Bild.

Open Graph ist außerdem die Datenbasis für Googles “Über dieses Ergebnis”-Panel und für KI-Such-Zitierkarten. Eine Seite ohne OG-Tags taucht als reiner Link auf, während Konkurrenten als vollwertige Karten erscheinen.

Wie du es behebst

Setze die vier Tags in den <head> jeder öffentlichen Seite. Die Werte können deinen <title> und deine Meta-Description spiegeln, sollten aber fürs Social-Umfeld geschärft sein — etwas klickfreudiger, ein handverlesenes Bild.

<head>
  <meta property="og:title" content="Kostenloses SEO-Audit in 60 Sekunden — MetricSpot">
  <meta property="og:description" content="Sieh, was KI-Agenten und Google auf deiner Seite sehen. 91 Prüfungen, ohne Anmeldung.">
  <meta property="og:image" content="https://metricspot.com/og/home.png">
  <meta property="og:url" content="https://metricspot.com/">
  <meta property="og:type" content="website">
</head>

Astro / Next.js — Werte pro Seite aus dem Frontmatter generieren:

---
const { title, description, ogImage } = Astro.props;
const url = Astro.url.href;
---
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={new URL(ogImage, Astro.site).href} />
<meta property="og:url" content={url} />

WordPress — Yoast SEO, Rank Math und SEOPress geben diese Tags alle automatisch aus. Öffne eines davon, setze die Social-Defaults unter SEO → Social und überschreibe sie bei Bedarf pro Beitrag.

Bildregeln. PNG oder JPG, ≥1200×630 (1.91:1), unter 5 MB. Größe und Format im Detail siehe Seite Open-Graph-Bild.

Vor dem Ausrollen testen — füge die URL in Facebooks Sharing Debugger und LinkedIns Post Inspector ein und klicke “Scrape Again”, um den Cache zu leeren.

Häufig gestellte Fragen

Brauche ich sowohl Open Graph als auch Twitter Card Tags?

X (formerly Twitter) fällt auf Open Graph zurück, wenn keine twitter:-Tags vorhanden sind — OG allein deckt also den größten Teil ab. Twitter Card Tags solltest du nur ergänzen, wenn du auf X ein anderes Bild oder eine andere Zusammenfassung brauchst — siehe Twitter Card Tags.

Was, wenn meine Seite bereits einen `<title>` und eine Meta-Description hat?

Suchmaschinen lesen <title> und <meta name="description">. Social-Plattformen lesen og:title und og:description. Das sind getrennte Felder mit getrennten Absichten (Such-Snippet vs. Share-Vorschau) — dupliziere sie lieber, statt die OG-Varianten wegzulassen.

Warum sieht meine Vorschau nach dem Hinzufügen der Tags immer noch falsch aus?

Facebook, LinkedIn und Slack cachen gescrapte Vorschauen aggressiv — manchmal wochenlang. Schick die URL durch den Debugger der jeweiligen Plattform und klicke “Re-scrape”. Deine Änderungen erscheinen erst, wenn der Cache geleert ist.