Add Open Graph + Twitter Card tags — v0

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 v0

Vercel AI component and app generator

Use the App Router metadata object. `metadata.openGraph.images` takes a 1200×630 PNG in /public.

Using a different tool? Pick your stack:

Lovable Cursor Bolt v0 Replit Windsurf Claude Code Base44

The prompt for v0

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

Regenerate my v0 component / page with these fixes applied:

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 v0

1. Open your v0 project.
2. Copy the prompt above with the copy button.
3. Paste into the v0 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 v0 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 v0 prompts

Images