Add a 1200×630 Open Graph image — Windsurf

Missing or undersized og:image is why LinkedIn and Slack previews look empty. 1200×630 PNG/JPEG is the spec every social platform expects.

rocket_launch

Fixing this in Windsurf

Codeium agentic AI IDE with Cascade

Windsurf Cascade can walk the entire project and apply multi-file edits in one pass. Paste the prompt below into your Windsurf chat and the fix rolls out across the project in one pass.

Using a different tool? Pick your stack:

Lovable Cursor Bolt v0 Replit Windsurf Claude Code Base44

The prompt for Windsurf

Copy and paste this into your Windsurf chat exactly as-is.

Using Windsurf Cascade, apply these edits across the project in one pass:

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.

Why this matters

Social and chat previews are often the first impression. A well-designed OG image lifts link CTR by 30-80% on social. No image = no preview card = scrolled past.

Dynamic OG images (Next.js ImageResponse, Vercel OG) can generate per-page cards automatically from page data — high impact, low maintenance.

How to use this prompt in Windsurf

1. Open your Windsurf project.
2. Copy the prompt above with the copy button.
3. Paste into the Windsurf chat and send.
4. Review the diff, accept the changes, redeploy.
5. Verify the fix using the checklist below.

Common mistakes to avoid

error_outlineUsing a square logo as og:image — LinkedIn and Slack crop it.
error_outlineServing the image from a fragile URL (e.g., behind auth).
error_outlineForgetting the absolute URL — relative URLs break many scrapers.
error_outlineText in OG image too small to read at preview size.

How to verify the fix worked

check_circlehttps://www.opengraph.xyz/ shows the image.
check_circlePaste URL into LinkedIn/Slack/WhatsApp — preview renders.
check_circleTwitter Card Validator passes with summary_large_image.

Frequently asked questions

Dynamic or static OG images?expand_more

Static is simple and fast. Dynamic (generated per page) is better for blogs/products. Next.js ImageResponse is the standard.

JPEG or PNG?expand_more

PNG for crisp text, JPEG for photos. Keep under 1MB or some scrapers skip it.

Want all 34 prompts tailored to your Windsurf site?

Pantra scans your site in 10 seconds, detects the stack, and generates the exact prompts that apply — only the ones you actually need.

Scan my site

Related Windsurf prompts

SEO