Open-Graph-Vorschau
See exactly how your page will look when shared on Facebook and Twitter. Fill in your OG fields and get the correct meta tags to copy into your <head> — instantly, in the browser.
Open-Graph-Felder
OG Title will appear here
OG description will appear here…
Generierte Meta-Tags
<meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" />
So verwenden Sie das Open-Graph-Vorschau-Tool
Füllen Sie die Felder auf der linken Seite aus — mindestens einen OG-Titel und eine OG-Beschreibung — und wechseln Sie dann zwischen den Facebook- und Twitter/X-Tabs, um zu sehen, wie Ihre Link-Vorschau auf jeder Plattform aussieht. Wenn Sie zufrieden sind, kopieren Sie die generierten Meta-Tags und fügen Sie sie in den <head>-Bereich Ihres HTMLs ein.
Was ist das Open-Graph-Protokoll?
Open Graph ist ein 2010 von Facebook eingeführter Metadaten-Standard, der nun von praktisch jedem sozialen Netzwerk, jeder Messaging-App und jedem Link-Aggregator unterstützt wird. Wenn jemand Ihre URL in Facebook, LinkedIn, Slack, iMessage oder Twitter einfügt, senden diese Plattformen einen Crawler, um Ihre Seite abzurufen und die og: Meta-Tags zu lesen. Ohne OG-Tags greifen Plattformen auf Schätzungen zurück — oft das falsche Bild, eine abgeschnittene Überschrift oder gar keine Beschreibung. Mit korrekten OG-Tags sieht jedes Teilen Ihres Inhalts professionell und intentional aus.
So fügen Sie diese Tags zu Ihrer Website hinzu
Fügen Sie die generierten Tags in den <head>-Bereich Ihres HTMLs ein. In Next.js verwenden Sie den eingebauten metadata-Export — das Framework schreibt die Tags automatisch. In WordPress verwalten Plugins wie Yoast SEO oder Rank Math OG-Tags über eine Benutzeroberfläche. Für statisches HTML oder andere Frameworks fügen Sie direkt in den Head-Bereich Ihres Templates ein. Verwenden Sie nach dem Deployment die plattformspezifischen Cache-Leerwerkzeuge aus den FAQs, um die Vorschau zu aktualisieren.
Häufig gestellte Fragen
Was ist das Open-Graph-Protokoll?
Open Graph (OG) ist ein von Facebook entwickeltes Metadaten-Protokoll, mit dem Sie steuern können, wie Ihre Webseiten bei der Teilung in sozialen Netzwerken erscheinen. Indem Sie og:title, og:description, og:image und og:type Meta-Tags zum <head> Ihrer Seite hinzufügen, teilen Sie Facebook, LinkedIn, Slack und anderen Plattformen genau mit, welchen Titel, welche Beschreibung und welches Bild sie in Link-Vorschaukarten anzeigen sollen — unabhängig von der tatsächlichen Überschriftenstruktur der Seite.
Was ist die empfohlene Open-Graph-Bildgröße?
Facebook und die meisten Plattformen empfehlen 1200×630 Pixel (ca. 1,91:1 Verhältnis) für og:image. Dies wird auf hochauflösenden Displays ohne Zuschneiden gut dargestellt. Für Twitter-summary_large_image-Karten funktioniert ein 16:9-Verhältnis (z.B. 1200×675 px) am besten. Halten Sie Bilder unter 8 MB und verwenden Sie JPEG oder PNG. Vermeiden Sie es, kritischen Text in das Bild einzubetten, da Plattformen es auf kleineren Viewports zuschneiden können.
Wie viele Zeichen sollten og:title und og:description haben?
Facebook zeigt og:title bis zu etwa 60 Zeichen und og:description bis zu 155 Zeichen an, bevor es abschneidet. Twitter kürzt og:title bei etwa 55–70 Zeichen und og:description bei etwa 125 Zeichen in Kartenvorschauen. Um auf der sicheren Seite zu sein, halten Sie og:title unter 60 Zeichen und og:description unter 120 Zeichen, damit beide Plattformen den vollständigen Text anzeigen, ohne in der Mitte eines Satzes abzuschneiden.
Helfen Open-Graph-Tags beim SEO?
Open-Graph-Tags beeinflussen Googles Ranking-Algorithmen nicht direkt — Google verwendet für Suchergebnisse in erster Linie den Title-Tag und die Meta-Description. OG-Tags verbessern jedoch indirekt das SEO, indem sie das Social Sharing verbessern: Ein überzeugendes og:title und ein qualitativ hochwertiges og:image führen zu mehr Klicks und Shares, was Traffic generieren und natürliche Backlinks einbringen kann. Vollständige OG-Daten helfen auch Slack, iMessage, WhatsApp und Discord, reichhaltige Vorschauen zu rendern, was die Reichweite Ihrer Inhalte erhöht.
Warum zeigt meine Social-Vorschau nach dem Update meiner Tags noch alten Inhalt?
Soziale Netzwerke cachen Link-Vorschauen aggressiv. Nach dem Update Ihrer OG-Tags müssen Sie den Cache für jede Plattform manuell leeren: Verwenden Sie Facebooks Sharing Debugger (developers.facebook.com/tools/debug), Twitters Card Validator (cards-dev.twitter.com/validator) oder LinkedIns Post Inspector (linkedin.com/post-inspector). Geben Sie Ihre URL ein und klicken Sie auf 'Scrape Again' oder 'Refresh'. Die neue Vorschau wird sich innerhalb weniger Stunden für die meisten Plattformen verbreiten.
Ähnliche Tools
Sollen Ihre Inhalte auf jeder Plattform performen?
Unsere SEO-Experten können Ihr gesamtes OnPage-Setup prüfen — Meta-Tags, Social Sharing, strukturierte Daten und mehr — und eine individuelle Wachstumsstrategie entwickeln.
Get a Free SEO Audit