Insights › Builder guides

Why your Lovable app's link previews are blank

You share your Lovable app on Twitter or in a group chat and the link unfurls as a blank card — no title, no image, no description. Here's why it happens, which tags fix it, and how to make every share show a real preview.

Aug 8, 2026 · 5 min read

The short version

When you paste a link into Twitter, Slack, Discord or iMessage, those platforms fetch the page's HTML and look for Open Graph and Twitter Card tags to build a preview. A Lovable app serves an empty shell before JavaScript runs, so the scraper finds no tags — and the link unfurls blank. The fix is to put those tags in the HTML the server sends, before any JavaScript loads.

What the scraper looks for

When someone pastes your URL into a platform that shows link previews, the platform's scraper makes a GET request to your URL and reads the <head> of the raw HTML response. It does not execute JavaScript. The tags it looks for, in priority order:

Open Graph: og:title, og:description, og:image, og:url. These power previews on iMessage, Slack, Discord, LinkedIn and Facebook.
Twitter Card: twitter:card, twitter:title, twitter:description, twitter:image. Twitter uses OG tags as a fallback, but explicit Twitter tags give you control over the card type (summary_large_image for a full-width image).
Standard meta: <title> and <meta name="description">. Used as fallbacks when OG tags are absent.

If none of these tags are in the raw HTML — which is the case for every client-rendered Lovable app by default — the scraper falls back to showing just the bare URL. No preview, no image, no context.

The minimum set of tags

For a working preview on every major platform, your raw HTML needs at least these in the <head>, served by the server (not injected by JavaScript):

html

<title>Tabby — split expenses with friends</title>
<meta name="description" content="Track shared bills, settle up in a tap, no signup for guests.">

<meta property="og:title" content="Tabby — split expenses with friends">
<meta property="og:description" content="Track shared bills, settle up in a tap.">
<meta property="og:image" content="https://tabby.app/og.png">
<meta property="og:url" content="https://tabby.app">
<meta property="og:type" content="website">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Tabby — split expenses with friends">
<meta name="twitter:description" content="Track shared bills, settle up in a tap.">
<meta name="twitter:image" content="https://tabby.app/og.png">

The image matters more than you think

The og:image is the visual hook that makes someone stop scrolling and click. A few rules that make the difference between a preview that draws the eye and one that gets scrolled past:

1200×630 pixels. This is the ratio every platform crops to. Smaller images get upscaled and look blurry; wrong ratios get cropped awkwardly.
Under 5 MB and under 1 MB for Twitter. Twitter's card validator rejects images over 1 MB silently — it just shows no image.
Absolute URL. https://yourapp.com/og.png, not /og.png. A relative URL won't resolve when the scraper fetches your page.
The URL must return an image, not a redirect or a 404. Test it by pasting the image URL directly into a browser.
Don't reuse your favicon. A tiny square blown up to 1200×630 looks like a mistake. Use a real social card — title, logo and a short tagline in a single image.

How to get these tags into the raw HTML

The hard constraint is that the tags must be in the server's first response — before JavaScript runs in the browser. For a Lovable app, this usually means one of:

1
Use a pre-render service or SSR adapter
If your app is on Netlify, Vercel or Cloudflare Pages, enable their SSR or pre-rendering option for the public routes. This injects the metadata into the static HTML at build or request time.
2
Set tags in the build output
If your app is purely static, add the tags directly to index.html in your build output. Lovable's export gives you a static folder — edit the <head> in the built files before deploying.
3
Use a serverless function as a middleware
Intercept requests to your public routes, fetch the page, inject the OG tags into the <head>, and return the modified HTML. This works without changing the app itself.

How to test

1
View Page Source (Cmd+U)
Search for og:title in the raw HTML. If it's absent, the scraper can't see it — even if the rendered page has it.
2
Use each platform's debugger
Twitter Card Validator (cards-dev.twitter.com/validator), LinkedIn Post Inspector, and Facebook Sharing Debugger all fetch your URL and show exactly what tags they found.
3
Test on the actual platform
Paste the URL into a draft post on Twitter, Slack or Discord. Some platforms cache previews aggressively — the debugger is the source of truth.

Actuant checks every one of these tags in the raw HTML your server returns: Open Graph title, description, image and URL; Twitter card type, title, description and image; and whether the image URL actually resolves. Each check is pass or fail with the exact tag to add.

Keep reading

Why your Lovable app isn't showing up on Google

A Lovable app renders in the browser, so it looks live — but Google and ChatGPT often see a blank page. Here's what they actually receive, how to check it in 30 seconds, and the five fixes in the order that matters.

Canonical tags: the rules that actually matter

A canonical tag tells Google which URL is the real one when a page is reachable at several addresses. Get it wrong and you split your ranking signals or deindex the wrong page. Here are the seven rules, and how generated apps break them.