Open Graph Preview

Sehen Sie eine Vorschau an, wie Ihre Seite bei Freigabe auf Facebook, Twitter/X, LinkedIn und Slack aussieht. Generieren Sie Open Graph und Twitter Card Meta-Tags aus einem Formular.

og:title39/70

og:description119/160

og:image URL

Use an absolute URL. Ideal: 1200×630px JPG/PNG under 1MB.

og:url

og:site_name

og:type

Facebook

example.com

My Awesome Blog Post — A Complete Guide

Learn everything you need to know about this topic in our comprehensive guide. Perfect for beginners and experts alike.

Generated Meta Tags

<!-- Open Graph / Facebook -->
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/blog/my-post" />
<meta property="og:title" content="My Awesome Blog Post — A Complete Guide" />
<meta property="og:description" content="Learn everything you need to know about this topic in our comprehensive guide. Perfect for beginners and experts alike." />
<meta property="og:site_name" content="My Website" />

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="My Awesome Blog Post — A Complete Guide" />
<meta name="twitter:description" content="Learn everything you need to know about this topic in our comprehensive guide. Perfect for beginners and experts alike." />

OG Tag Checklist

✓og:title set (50–70 chars)

✓og:description set (120–160 chars)

○Missing or not absolute

✓og:url is absolute HTTPS URL

✓og:site_name set

✓og:type selected

So verwenden Sie Open Graph Preview

1Geben Sie Ihren Seitentitel, Beschreibung, URL und Bild-URL ein.
2Sehen Sie eine Vorschau an, wie der Link auf Facebook, Twitter/X, LinkedIn und Slack angezeigt wird.
3Kopieren Sie die generierten Meta-Tags in Ihren HTML <head>.

ZenovayAnalytics

Wissen Sie, was Ihre Besucher wirklich tun.

Besucher-Tracking in Echtzeit
Datenschutz zuerst, kein Cookie-Banner
In zwei Minuten eingerichtet

Zenovay entdecken

Häufig gestellte Fragen

Was sind Open-Graph-Tags?▾

Open-Graph (OG)-Tags sind HTML-Meta-Tags, die steuern, wie URLs auf sozialen Medien wie Facebook, LinkedIn, Twitter/X, Slack und Discord erscheinen. Von Facebook 2010 entwickelt, ist das OG-Protokoll jetzt der Standard für Link-Vorschauen im gesamten Web. Wichtige Tags: og:title (Überschrift), og:description (Zusammenfassung), og:image (Miniaturbild), og:url (kanonische URL). Ohne OG-Tags schaetzen Plattformen den Inhalt - oft schlecht. Mit richtigen OG-Tags kontrollieren Sie genau, wie Ihr Inhalt beim Teilen aussieht.

Was ist der Unterschied zwischen Open Graph und Twitter Cards?▾

Open Graph ist der allgemeine Standard, der von Facebook, LinkedIn, Slack, Discord und den meisten Plattformen verwendet wird. Twitter Cards sind Twitter/X-spezifische Meta-Tags (twitter:card, twitter:title, twitter:description, twitter:image). Die meisten Implementierungen benötigen beide. Gute Nachricht: Wenn Twitter-spezifische Tags fehlen, greift Twitter auf OG-Tags zurück. Empfehlung: beide setzen für maximale Kompatibilitaet. Twitter-Card-Typen: summary (kleines Bild), summary_large_image (vollbreites Banner - am häufigsten), app (mobile App), player (Video).

Was ist die ideale Bildgröße für Open Graph?▾

Empfohlene OG-Bildgröße: 1200x630 Pixel (Verhaeltnis 1,91:1). Minimum: 600x315 Pixel. Maximale Dateigroeße: unter 8 MB (Facebook-Limit), idealerweise unter 1 MB für schnelles Laden. Facebook schneidet Bilder ab, die das Verhaeltnis nicht erfeullen. LinkedIn bevorzugt 1200x627 Pixel. Twitter/X summary_large_image: 1200x675 Pixel (16:9-Verhaeltnis). Verwenden Sie immer absolute URLs für og:image. Fuegen Sie Alt-Text über og:image:alt für Barrierefreiheit hinzu.

Wie validiere ich meine Open-Graph-Tags?▾

Test-Tools: Facebook Sharing Debugger (developers.facebook.com/tools/debug) - URL einfügen, scrapt und zeigt Vorschau + Fehler. LinkedIn Post Inspector (linkedin.com/post-inspector) - dasselbe für LinkedIn. Twitter Card Validator (cards-dev.twitter.com/validator) - für Twitter Cards. Hinweis: Facebook und LinkedIn cachen Vorschauen aggressiv. Verwenden Sie nach dem Beheben von Tags die Schaltflaeche 'Scrape Again' des Debuggers, um den Cache zu aktualisieren.

Was ist og:type und wann sollte ich verschiedene Werte verwenden?▾

og:type teilt Plattformen mit, um welche Art von Inhalt es sich handelt. Häufigste Werte: website (Standard - Startseite oder allgemeine Seiten), article (Blogbeitraege, Nachrichtenartikel - ermöglicht article:published_time, article:author), product (E-Commerce-Artikel), video.movie/video.episode (Videoinhalte). Für die meisten Websites decken website und article 99% der Anwendungsfaelle ab.

Bild-Tools