Bilder·Cursor
BilderCursor

1200×630 Open-Graph-Bild setzen — Cursor

Fehlendes oder unterdimensioniertes og:image ist der Grund warum LinkedIn- und Slack-Previews leer aussehen. 1200×630 PNG/JPEG ist die Spec jeder Social-Plattform.

rocket_launch

In Cursor fixen

Agentischer AI-Code-Editor auf VSCode-Basis

In Cursor editierst du echte Dateien — der Fix landet per direkten Diff statt neu generiertem Projekt. Prompt unten in deinen Cursor-Chat einfügen und der Fix rollt in einem Rutsch über das ganze Projekt aus.

Anderes Tool? Wähle deinen Stack:

LovableCursorBoltv0ReplitWindsurfClaude CodeBase44

Der Prompt für Cursor

Diesen Text exakt so in deinen Cursor-Chat kopieren und einfügen.

Apply these changes to my codebase. Edit the files directly and keep existing formatting:

Add an Open Graph image

1. Create a 1200x630px image for social sharing.
2. Add <meta property="og:image" content="https://yoursite.com/og-image.png"> to <head>.
3. Host the image on your own domain, not an external CDN.

Warum das wichtig ist

Social- und Chat-Previews sind oft der erste Eindruck. Gut designtes OG-Image hebt Link-CTR auf Social um 30-80%. Kein Bild = keine Preview-Card = weggescrollt.

Dynamic OG Images (Next.js ImageResponse, Vercel OG) können per-Page-Cards automatisch aus Seiten-Daten generieren — hoher Impact, wenig Wartung.

So nutzt du diesen Prompt in Cursor

  1. 1. Dein Cursor-Projekt öffnen.
  2. 2. Prompt oben mit Copy-Button kopieren.
  3. 3. In Cursor-Chat einfügen und senden.
  4. 4. Diff reviewen, Änderungen akzeptieren, neu deployen.
  5. 5. Fix mit der Checkliste unten verifizieren.

Typische Fehler vermeiden

  • error_outlineQuadratisches Logo als og:image — LinkedIn und Slack schneiden ab.
  • error_outlineBild von fragiler URL (z.B. hinter Auth) ausliefern.
  • error_outlineAbsolute URL vergessen — relative URLs brechen viele Scraper.
  • error_outlineText im OG-Image zu klein um in Preview-Grösse zu lesen.

Wie du prüfst ob der Fix geklappt hat

  • check_circlehttps://www.opengraph.xyz/ zeigt das Bild.
  • check_circleURL in LinkedIn/Slack/WhatsApp einfügen — Preview rendert.
  • check_circleTwitter Card Validator besteht mit summary_large_image.

Häufige Fragen

Dynamic oder statisch?expand_more
Statisch ist einfach und schnell. Dynamic (pro Seite generiert) besser für Blogs/Produkte. Next.js ImageResponse ist Standard.
JPEG oder PNG?expand_more
PNG für scharfen Text, JPEG für Fotos. Unter 1MB halten oder manche Scraper skippen.

Alle 34 Prompts passend zu deiner Cursor-Site?

Pantra scannt deine Site in 10 Sekunden, erkennt den Stack und generiert genau die Prompts die passen — nur die du brauchst.

Site scannen

Ähnliche Cursor-Prompts

SEO

Open Graph + Twitter Card Tags setzen — Cursor

Prompt um og:title, og:description, og:image und Twitter-Card-Meta zu setzen — damit Links auf Slack, LinkedIn, WhatsApp, X richtig aussehen.

Technik

Hochauflösenden Favicon setzen — Cursor

Stack-spezifischer Prompt für einen Favicon der in Browser-Tabs und Google-Ergebnissen korrekt erscheint.

Bilder

Bilder zu WebP oder AVIF konvertieren — Cursor

Prompt um JPEG/PNG zu WebP oder AVIF zu konvertieren — 30-50% kleiner bei gleicher Qualität. Hilft LCP und CLS.

Bilder

Alt-Text für alle Bilder auf einmal — Cursor

Prompt der jedes <img>-Tag durchläuft und beschreibende Alt-Attribute im Bulk setzt — schnelle Alternative zum einzelnen Fixen.

Mehr im Glossar erfahrenarrow_forward