Metadata
og:image and Link Previews for AI-Built Sites
You paste your link and get a naked blue link or a broken card. Link previews are built from Open Graph tags in the HTML a scraper reads — and on AI-built sites those tags are often missing or trapped behind JavaScript.
By SEO Vibes8 min read
It is a small thing that looks unprofessional out of all proportion. You share your site in a Slack channel or a LinkedIn post and get a naked blue link, or a card with the wrong image and a filename for a title. The reason is almost never the social network. It is that the network’s scraper asked your page to describe itself, and your page didn’t.
How a link preview is actually built
When you paste a URL, the platform sends its own bot — Facebook’s, X’s, LinkedIn’s, Slack’s, iMessage’s — to fetch the page and read specific <meta> tags out of the <head>. Crucially, most of these scrapers do not execute JavaScript. They read the raw HTML the server returns and nothing more. That single fact explains both failure modes.
The tags are missing.If your builder didn’t add Open Graph tags and you didn’t either, there is nothing for the scraper to read. This is the default on some platforms: Lovable, for instance, does not auto-generate per-page titles, meta descriptions, Open Graph tags, or structured data — they must be explicitly configured or prompted (LOV-008). v0, by contrast, has shipped pages with Open Graph and Twitter Card metadata generated for them (V0-004) — but because those tags are set per project, the honest posture is to treat them as present and to be verified, not guaranteed on every page (V0-003).
The tags exist, but only after JavaScript runs.This is the subtler one, and it hits single-page apps specifically. A default Vite/React app ships a near-empty HTML shell whose head is populated client-side (BOLT-008). Even if you added perfect Open Graph tags in your React components, a scraper that reads only the initial HTML sees the empty shell, exactly as a non-JavaScript search crawler would (BOLT-009). And on a default Bolt build nothing fills that gap for you — Bolt adds no SEO layer of its own (BOLT-012). Your tags are real; they just aren’t where the scraper looks.
The tags that build the card
What a complete link preview needs
These belong in the server-rendered <head>, not injected later. Get the first three right and most platforms render a proper card.
- og:titleRequired
- The headline of the card. Distinct from the page's <title> if you want the shared version to read differently.
- og:descriptionRequired
- One or two sentences under the title. Written for a human deciding whether to click, not stuffed with keywords.
- og:imageRequired
- An absolute URL (https://…, not /image.png) to a 1200×630 image. A relative path is a frequent reason the image is blank.
- og:urlRecommended
- The canonical URL of the page — so shares resolve to one authoritative address rather than a preview or default subdomain.
- twitter:cardRecommended
- Set to summary_large_image for the large-image layout on X. Without it you may get the small thumbnail card, or none.
All of these are read from the raw HTML. If any is generated only client-side, most scrapers won't see it.
How to fix a blank preview
- Get the tags into the server HTML. On a server-rendered framework this is native — v0 generates Next.js apps (V0-001), and Next.js sets these tags through its Metadata API (V0-007), with a dynamically generated Open Graph image a standard pattern. On a single-page app, the tags have to be present on first response, which means pre-rendering or server-rendering the pages that get shared.
- Use an absolute image URL and the right size. Point
og:imageat a fullhttps://URL on your canonical domain, sized around 1200×630. A relative path or a preview-domain URL is a frequent cause of a missing or wrong image. - Test with the scraper, not your browser. Your browser runs JavaScript, so it will show you a preview that a scraper never sees. Fetch the raw HTML and confirm the
og:tags are in it, and use each platform’s own sharing debugger to re-scrape the URL after a change — previews are cached, so an old blank card can persist until you force a refresh.
<!-- What a scraper needs to find in the server-rendered <head> -->
<meta property="og:title" content="Riverside Dental — new patients welcome in Austin" />
<meta property="og:description" content="Same-week appointments. Most insurance accepted." />
<meta property="og:image" content="https://yoursite.com/og/home.png" />
<meta property="og:url" content="https://yoursite.com/" />
<meta name="twitter:card" content="summary_large_image" />Because a blank preview and a page missing from Google share a root cause, the same check finds both. Our free visibility scan reads your public page the way a machine does and reports what metadata is and isn’t in the HTML — no score, no email gate. For how each builder handles metadata and rendering, see the platform pages, and for the full dependency-ordered list the metadata layer sits in, the SEO checklist for AI-built websites. When the tags and the rendering need implementing in code, that is Search Foundation.
Keep reading
Related reading and next steps
- PlatformSEO for v0 sites
How v0's Next.js foundation handles metadata by default — and what still has to be verified as configured per project.
- ServiceSearch Foundation
Get Open Graph tags into the server-rendered HTML and the rendering fixed underneath them — implemented in your codebase.
- Diagnostics · 9 min readWhy Your Vibe-Coded Website Is Not Showing Up on Google
Being online and being findable are different things. The four stages of search — discovery, crawling, indexing, ranking — and where AI-built sites break.
- Platform · Lovable · 8 min readCan Google Index a Lovable Website?
Yes — but whether it's indexed depends on which of Lovable's two rendering paths your project is on, plus config Lovable doesn't set for you.
- Checklist · 11 min readSEO Checklist for AI-Built Websites
The twelve layers of SEO for an AI-built site, in dependency order — from technical access and rendering to authority and measurement.
- Platform · Bolt · 8 min readWhy Your Bolt.new Site Is Invisible to Google
A default Bolt.new build is often a Vite single-page app that ships an empty HTML shell — so crawlers see nothing. Why it happens, and the two ways to fix it.
- Indexation · 8 min readIs Your Preview URL Getting Indexed Instead of Your Real Domain?
Google ranks a *.replit.app or staging URL instead of your custom domain. Two causes — indexed preview deploys and un-retired default domains — and the fix.
See it on your own site
Run a free visibility scan
This article explains what search engines need. The scan shows you which of those things your own public page actually delivers today — no score, no email gate.
This is a narrow technical scan of the public page response. It does not measure rankings, content quality, backlinks, Google index coverage, or business opportunity.