Add Open Graph + Twitter Card tags — Windsurf

When your URL is pasted into Slack, WhatsApp, LinkedIn, or X, the preview card is built from Open Graph tags. Missing tags give you a bare URL with no image — 3-5x lower click rate.

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 Open Graph tags

1. Add <meta property="og:title">, <meta property="og:description"> and <meta property="og:image"> in <head>.
2. Use a 1200x630 image for og:image and host it under a stable URL.
3. Mirror the same values into Twitter Card meta tags (twitter:title, twitter:description, twitter:image).

Why this matters

Roughly half of the traffic to most SaaS and content sites comes from links pasted into messaging apps, Slack channels, X, LinkedIn posts, and AI chats. Every one of those surfaces renders a preview card. No og:image means no preview, which means people scroll past.

Open Graph is the single format that controls all of these previews. You write it once in the HTML head, and Facebook, LinkedIn, Slack, WhatsApp, Telegram, Discord, and Signal all use it. Twitter/X uses a very similar format (twitter:card) — mirror the OG values and you are done.

AI chat tools (ChatGPT, Claude) also fetch OG tags when rendering a link card in their response. A missing og:image makes your site look abandoned in those surfaces too.

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_outlineReferencing og:image with a relative URL — many scrapers require absolute URLs.
error_outlineUsing a 1024×1024 square image — LinkedIn and Slack crop it.
error_outlineForgetting to ship the actual image file to /public, so og:image 404s.
error_outlineUsing the same og:image on every page — fine as a fallback, but article pages deserve their own.
error_outlineSetting only og:* without twitter:* — X falls back to OG but the card format is different; cards without `twitter:card` default to a smaller layout.

How to verify the fix worked

check_circlePaste your URL into https://www.opengraph.xyz/ — must render title, description, and a correct 1200×630 image.
check_circleTest on https://cards-dev.twitter.com/validator — must show a summary_large_image card.
check_circlePaste the URL into Slack, LinkedIn, and WhatsApp — each should render the preview.
check_circle`curl -s URL | grep "og:image"` — confirms the tag renders server-side, not after JS.

Frequently asked questions

What is the correct og:image size?expand_more

1200×630 pixels, PNG or JPEG, under 1 MB. This fits LinkedIn, Slack, WhatsApp, and Facebook correctly without cropping.

Do I need both og:* and twitter:*?expand_more

Twitter/X falls back to og:* for most fields, but `twitter:card` must be set to `summary_large_image` to get the big image layout. Mirror them for safety.

Can I auto-generate og:images per page?expand_more

Yes — Next.js has `ImageResponse` for dynamic OG images, and Vercel OG is a common pattern. For static sites, a script that renders a template with the page title works.

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

Images