Zum Hauptinhalt springen
ToolsByUs

OG-Vorschau

OG-Vorschau liest Ihre Open-Graph- und Twitter-Card-Tags und zeigt die Link-Karte, die ein Crawler tatsächlich rendert – inklusive der Fallbacks: Fehlt og:title, zeigt die Karte Ihren <title>, der meist mit dem Namen der Website beginnt. Außerdem meldet sie die stillen Fehler: Eine relative Bild-URL wird schlicht nie abgerufen.

Nur lokal
Head-Markup
620 B10 ZeilenZ. 1, Sp. 1
Facebook · LinkedIn · Slack
Keine absolute Bild-URL

acme.example

Preise

Drei Tarife, keine Mindestanzahl an Plätzen und ein kostenloser Tarif, der bleibt.

X-Karte · summary

acme.example

Preise

Drei Tarife, keine Mindestanzahl an Plätzen und ein kostenloser Tarif, der bleibt.

1 kritisch1 Warnung3 Notizen

Was ist mit diesen Tags nicht in Ordnung?

Warnung · og:image:altFehlend. Der Alt-Text ist das, was ein Screen Reader für das Kartennbild ankündigt, und das, was angezeigt wird, wenn das Bild nicht geladen werden kann. Jede größere Plattform unterstützt dies.
Hinweis · twitter:cardDie Karte ist auf "summary" eingestellt, was ein kleines quadratisches Vorschaubild rendert. "summary_large_image" zeigt das Bild in voller Breite an und ist das, was die meisten Websites möchten.
Hinweis · og:image:widthBreite und Höhe sind nicht angegeben, daher muss das Bild heruntergeladen werden, um seine Form zu ermitteln. Ihre Angabe ermöglicht es dem Crawler, früher zu entscheiden, und einige Clients legen die Karte an, bevor das Bild eintrifft.
Hinweis · iconKein Favicon-Link. Browser fallen auf /favicon.ico zurück, daher ist dies nur ein Problem, wenn das Icon woanders liegt.

Wie funktioniert OG-Vorschau?

Eine Link-Karte wird vom Crawler einer anderen Person aus Tags auf Ihrer Seite gerendert, und jede Art, darin zu scheitern, geschieht lautlos. Nichts wirft einen Fehler, nichts schreibt ein Log, und die Seite sieht im Browser tadellos aus – die Karte ist nur leicht falsch, und die Klickrate liegt für immer etwas niedriger.

Die Fallback-Kette ist das, was tatsächlich gerendert wird

Plattformen verlangen kein og:title. Fehlt es, verwenden sie <title>, was auf den meisten Websites der Titel der Seite mit dem Website-Namen davor ist – die Karte liest sich dann als „Acme Analytics – Preise“, wo „Preise“ stehen sollte. Die Vorschau oben löst die Kette auf, statt nur das Vorhandene zu zeigen, und nennt zu jedem Feld die Quelle, denn „fehlend“ und „vorhanden, aber falsch“ brauchen unterschiedliche Korrekturen.

Der Fehler, der wie Erfolg aussieht

<meta property="og:image" content="/og/pricing.png"> ist gültiges HTML und vollständig kaputt. Crawler lösen relative Pfade nicht gegen die Seite auf, also wird das Bild nie abgerufen und die Karte zeigt eine graue Box. Das ist die häufigste Ursache für eine Karte, die in einer lokalen Vorschau funktioniert und in Produktion nichts zeigt – und der Grund, warum eine relative Bild-URL als kritisch gemeldet wird und nicht als Stilhinweis.

Warum hier geparst wird, statt Muster zu erkennen

Die naheliegende Implementierung ist ein regulärer Ausdruck pro Tag, und sie scheitert an der ersten echten Seite: content="a > b" enthält ein > innerhalb eines zitierten Attributs, content='It's here' enthält einen Apostroph, der einen naiven Scan vorzeitig beendet, und <meta> kann selbstschließend, ungeschlossen oder mit Attributen in beliebiger Reihenfolge vorkommen. Deshalb wird das Dokument einmal von einem Scanner durchlaufen, der Quoting und Rohtext-Elemente kennt – derselbe Ansatz, den auch die JSON- und XML-Tools hier verwenden.

Was es nicht kann, ist Ihr Bild abrufen, denn das hieße einen Netzwerk-Request von einer Seite, die keinen verspricht. Geprüft wird daher, was sich ohne einen Request prüfen lässt – ob die URL absolut ist, ob die angegebenen Maße groß genug sind, ob das Seitenverhältnis nahe an den 1.91:1 liegt, auf die jede Plattform zuschneidet, und ob Alt-Text vorhanden ist.

Head-Markup

<meta property="og:title" content="Pricing" />
<meta property="og:image" content="/static/og/pricing.png" />
<meta name="twitter:card" content="summary" />

Befunde

critical  og:image        "/static/og/pricing.png" is not an absolute URL.
                          Crawlers do not resolve relative paths.
warning   og:description  Missing. The card falls back to <meta description>.
warning   og:image:alt    Missing. Screen readers announce nothing.
info      twitter:card    "summary" renders a small square thumbnail.

Head-Markup → Befunde

Head-Markup

<meta property="og:title" content="Pricing" />
<meta property="og:image" content="/static/og/pricing.png" />
<meta name="twitter:card" content="summary" />
<title>Acme Analytics — Pricing</title>
<meta name="description" content="Pricing for Acme Analytics." />
<link rel="canonical" href="https://acme.example/pricing" />

Befunde

critical og:image       "/static/og/pricing.png" is not an absolute URL.
warning  og:description Missing.
warning  og:url         Missing.
warning  og:image:alt   Missing.
info     og:type        Missing, so it defaults to "website".
info     og:site_name   Missing.

Welche Optionen und Sonderfälle unterstützt OG-Vorschau?

Technische Referenz und Optionen
ParameterTypStandardVerhalten & Sonderfälle
og:titleerforderlichfällt auf <title> zurückDie Überschrift der Karte. Fehlt sie, nutzt die Karte Ihren <title>, der meist den Namen der Website voranstellt – dann wirkt die Karte wie die Startseite statt wie die eigentliche Seite.
og:descriptionerforderlichfällt auf die Meta-Description zurückDie zwei Zeilen unter der Überschrift. Eine Meta-Description ist für ein Suchergebnis geschrieben; der Text einer Karte richtet sich an jemanden, der gerade entscheidet, ob er klickt – und selten ist das derselbe Satz.
og:imageerforderlichkeineMuss eine absolute https-URL sein – Crawler lösen relative Pfade nicht auf. 1200×630 ist die Ausgangsgröße, von der aus jede Plattform zuschneidet; unter 600×315 wird die Karte hochskaliert und wirkt unscharf.
og:image:altempfohlenkeineWird von Screenreadern vorgelesen und angezeigt, wenn das Bild nicht lädt. Von allen großen Plattformen unterstützt und fast immer weggelassen.
og:image:width / heightempfohlenermitteltWer sie angibt, ermöglicht dem Crawler, das Layout der Karte festzulegen, bevor er das Bild lädt. Ohne sie ist der erste Abruf einer Seite ein zweiter Request nur für das Bild.
og:urlempfohlendie abgerufene URLDie kanonische Adresse der Seite. Ohne sie verteilt eine Seite, die unter zwei URLs erreichbar ist, ihre Share-Counts auf beide.
og:typeempfohlenwebsite"article" schaltet die Felder für Autor und Veröffentlichungszeitpunkt frei und ändert, wie einige Clients die Karte darstellen.
og:site_nameoptionalHostnameWird von LinkedIn und mehreren Chat-Clients über dem Titel angezeigt. Ohne sie geben sie den Hostnamen aus.
twitter:cardempfohlensummarysummary_large_image zeigt das Bild in voller Breite; summary zeigt ein kleines quadratisches Vorschaubild. Ein unbekannter Wert wird als summary behandelt.
canonicalempfohlenkeineEin <link rel="canonical"> ist kein OG-Tag und genauso wichtig: Es verhindert, dass dieselbe Seite unter zwei Adressen mit sich selbst konkurriert.

Häufig gestellte Fragen

Warum wird mein Bild in der Vorschau nicht angezeigt?

Fast immer eine relative URL. og:image muss absolut sein: https://acme.example/og/pricing.png, nicht /og/pricing.png – denn der Crawler ruft das Bild ohne Seitenkontext ab und hat keine Seite, gegen die er relative Pfade auflösen könnte. Aus genau diesem Grund wird es hier als kritisch gemeldet. Die zweithäufigste Ursache ist ein Bild hinter einem Login, die dritte ein CDN, das den User-Agent der Plattform blockiert.

Ich habe die Tags aktualisiert, aber die Karte hat sich nicht geändert. Warum?

Crawler cachen. Facebook und LinkedIn bewahren eine Karte tagelang auf, und X cached rund eine Woche lang. Im Sharing Debugger von Facebook gibt es den Button „Scrape Again“, der den Cache leert; der Post Inspector von LinkedIn erledigt dasselbe. Bis Sie das tun, sehen Sie die alten Tags – deshalb kann eine Änderung, die funktioniert hat, so aussehen, als hätte sie es nicht getan.

Welche Größe sollte das Bild haben?

1200×630 Pixel. Das ist exakt 1.91:1, das Seitenverhältnis, auf das jede Plattform zuschneidet, sodass nichts abgeschnitten wird. Alles unter 600×315 wird hochskaliert und wirkt unscharf; alles deutlich Breitere verliert seine Ränder. JPEG für Fotos, PNG für flache Grafiken und Text, und halten Sie das Bild unter etwa 1 MB – manche Clients überspringen größere Bilder, statt zu warten.

Brauche ich Twitter-Tags, wenn ich Open Graph habe?

X greift für Titel, Beschreibung und Bild auf Open Graph zurück – og:* allein erzeugt also schon eine Karte. Nur die richtige Kartenart wählt es nicht: Ohne twitter:card bekommen Sie das kleine quadratische summary statt des großen Bildes. Ein Tag extra lohnt sich, und twitter:title ist sinnvoll, wenn der Text der Karte anders sein soll als die Link-Vorschau anderswo.

Ruft dieses Tool meine Seite oder mein Bild ab?

Nein. Sie fügen das Markup ein, und es wird in dem Tab geparst – das Netzwerk-Panel zeigt nichts. Das ist eine bewusste Entscheidung und kein Mangel: Ein Tool, das Ihr Bild abruft, könnte es ausmessen – und wäre zugleich ein Server, der jede URL kennt, die Sie einfügen. Die Prüfungen hier sind genau die, die keinen Request brauchen: absolute URLs, angegebene Maße, Seitenverhältnis und Alt-Text.

Welche Plattformen lesen welche Tags?

Open Graph lesen Facebook, LinkedIn, Slack, WhatsApp, Discord, Telegram und Pinterest – und als Fallback X. Xs eigene twitter:*-Tags haben dort Vorrang, wenn sie vorhanden sind. Manche Clients haben eigene Erwartungen obendrauf: Slack möchte für seine Unfurl ein eher quadratisches Bild, und Discord zeigt bei summary-Karten ein kleines Vorschaubild und bei summary_large_image ein Banner in voller Breite.

ToolsByUs-Team · Wie wir unsere Tools prüfen