Open Graph / Twitter Card / Social Preview Prüfung
Open Graph meta tags an einem Ort erzeugen, prüfen und anzeigen
Geben Sie eine URL ein. OpenGraphy lädt das ursprüngliche HTML serverseitig, analysiert Open Graph und Twitter Card, zeigt Social Cards und konkrete Verbesserungen.
Vorschau vor der Veröffentlichung prüfen
Ihre Links wirken konsistent, klar und überzeugend auf Facebook, LinkedIn, Slack und in Messenger-Apps.
Gebaut für die Orte, an denen Links wirklich geteilt werden
Sicheres Abrufen, präzise Analyse, verlässliche Vorschauen
OpenGraphy ruft Zielseiten nicht im Browser des Nutzers ab. Das Backend simuliert crawler Verhalten und prüft DNS, Weiterleitungen, private Netze, initiales HTML und Bilder.
SSRF-SchutzJeder Abruf validiert DNS, IP-Bereiche und Weiterleitungen, um localhost, private Netze und reservierte Adressen zu vermeiden.
4-Stunden-CacheMetadata und Vorschauen werden temporär in Redis gespeichert, ohne langfristige URL-Historie oder personenbezogene Daten.
DiagnosenFehlende Tags, relative Bild-URLs, Bildgröße, HTTP-Status sowie Titel- und Beschreibungslänge werden geprüft.
Jeder geteilte Link wie eine gestaltete Anzeige
Open Graph ist die gemeinsame Sprache, mit der soziale Plattformen und Messenger Seitenvorschauen lesen.
Was ist Open Graph?
OG-Tags sind metadata für crawler. Viele Plattformen lesen og:title, og:description und og:image, um Linkvorschauen zu erzeugen.
Empfohlene Bildgröße
Die sicherste Größe ist 1200 x 630 mit etwa 1.91:1. Kleine Bilder werden in Messengern schneller angezeigt.
Warum serverseitig abrufen?
Die meisten crawler führen kein JavaScript aus und warten nicht auf SPAs. Serverseitiges Abrufen ist näher an ihrer tatsächlichen Sicht.
Minimale nützliche Open Graph Tags
Beginnen Sie mit title, description, image und canonical URL. Das behebt die meisten Preview-Probleme.
<meta property="og:title" content="你的頁面標題" />
<meta property="og:description" content="一段清楚、有吸引力的頁面摘要。" />
<meta property="og:image" content="https://example.com/preview.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Example" />
<meta name="twitter:card" content="summary_large_image" />Plattformen interpretieren dieselbe metadata unterschiedlich
Facebook stützt sich auf og:title, og:description und og:image. Nach Änderungen kann der Sharing Debugger einen neuen Abruf auslösen.
X / Twitter
X kann auf OG metadata zurückfallen, aber twitter:card und twitter:image machen große Bildkarten deutlich zuverlässiger.
LinkedIn cached oft den ersten Abruf. Prüfen Sie vor der Veröffentlichung und aktualisieren Sie Änderungen mit Post Inspector.
WhatsApp / iMessage
Zu große Bilder scheitern häufiger oder werden beschnitten. Komprimieren Sie sie und geben Sie Breite und Höhe an.
Discord / Slack / Telegram
Chat-Apps bevorzugen metadata im initialen Server-HTML. Verlassen Sie sich nicht nur auf JavaScript im Frontend.
Pinterest / Reddit
Für Shops, Portfolios und Artikel helfen zusätzlich quadratische oder vertikale Varianten neben dem breiten Vorschaubild.
Integration in gängige Stacks
Next.js / Nuxt / Astro
Nutzen Sie die metadata API des Frameworks oder SSR/SSG, damit OG-Tags im vom Server gelieferten HTML stehen.
WordPress
Nutzen Sie ein SEO-Plugin oder den Head-Hook des Themes für Titel, Auszug, Beitragsbild und kanonischen Link.
Single-Page-Apps
Wenn alles im Client rendert, übersehen viele crawler die metadata. Ergänzen Sie SSR, Prerendering oder statisches HTML für Share-Seiten.
FAQ
Beeinflusst Open Graph direkt SEO-Rankings?
Meist nicht als direkter Rankingfaktor, aber es verbessert Social Clicks, Share-Qualität, Traffic, Erwähnungen und Markenpräsenz.
Warum erscheint noch das alte Bild?
Plattformen cachen Abrufe. Nutzen Sie Facebook Sharing Debugger oder LinkedIn Post Inspector und versionieren Sie Bild-URLs bei Bedarf.
Was passiert ohne OG-Tags?
Plattformen raten anhand von title, meta description oder dem ersten großen Bild. Das Ergebnis ist unvorhersehbar.
Ist Groß- und Kleinschreibung wichtig?
Ja. Verwenden Sie standardmäßige Kleinschreibung wie og:title statt OG:Title. Viele crawler sind streng.
