Findable

Why does your v0 app look broken when shared on Slack or X?

The app works perfectly in the browser, but paste the link into Slack, X, or LinkedIn and you get a blank gray card, no title, or a broken image. That's a missing Open Graph preview, and it's one of the fastest trust signals to lose before someone even clicks.

Symptoms

How to tell if this is happening to you

Pasting your app's URL into Slack, X, LinkedIn, or iMessage shows no preview card at all
The preview card shows your app's generic favicon instead of a real social image
The title and description in the preview are missing, wrong, or pulled from an unrelated default
Your og:image points to a relative path or a localhost URL that breaks outside your dev environment
Different pages of your app (pricing, blog posts, product pages) all show the exact same preview instead of page-specific content

Root cause

Why this happens with v0 and Vercel apps specifically

v0 and other AI builders scaffold a working app fast, but Open Graph and Twitter Card metadata are rarely part of the default template — they have to be added deliberately, per route, using Next.js's metadata API or a generateMetadata function.

It's invisible in normal testing because you're the one building it: you never paste your own link into Slack or X to see what a stranger sees. The gap only shows up the first time you actually share the link.

A missing or broken preview doesn't just look unpolished — on platforms where people decide whether to click based on the preview card alone, it can quietly kill click-through before the page ever loads.

The fix

What actually fixes it

1. Add page-specific title, description, and og:image via Next.js metadata (or generateMetadata for dynamic routes) on every public page — not just the homepage
2. Use a fully-qualified, absolute URL for og:image, at least 1200x630px, hosted on your production domain — never a relative path or localhost
3. Add matching twitter:card, twitter:title, twitter:description, and twitter:image tags so previews render correctly on X
4. Set a metadataBase in your root layout so relative og:image paths resolve correctly in every environment
5. Verify the live, deployed URL (not localhost) with a social preview debugger before calling it done

Copy-paste this into Cursor, Claude, or v0 to ship the fix:

og-tags-fix.prompt.md

You are fixing missing or broken Open Graph and Twitter Card preview tags on a Next.js app deployed on Vercel.

1. Add a metadataBase to the root layout pointing at the production domain
2. Add page-specific title, description, and a fully-qualified og:image (1200x630px) via metadata or generateMetadata on every public page
3. Add matching twitter:card, twitter:title, twitter:description, and twitter:image tags
4. Never use a relative path or localhost URL for og:image

Ship the diff and confirm with "curl -s https://yourapp.com | grep -i "og:image"".

curl -s https://yourapp.com | grep -i "og:image"

This is one of 43 checks in a Launch Readiness Audit.

Findable is one pillar. Search visibility, functionality, measurement, launch readiness, and the rest of trust and compliance are the other five — and most AI-built apps have gaps in more than one.

Run a free scan See all 43 checks