Lovable link preview not showing the right image: how to fix it
A Lovable link preview shows no image, a placeholder or the wrong title when the Open Graph tags are generic, missing, only set once for the whole site, or point at an image that is too big or uses a relative URL. Give each page its own og:title, og:description and an absolute og:image around 1200×630 at a few hundred KB, publish, then clear each platform's cached preview with its debugging tool.
What you'll see
You paste your link into WhatsApp, iMessage, Slack, LinkedIn or X and the card has no picture, a generic placeholder, the project's old name, or the homepage image for every page you share. Sometimes it looks right in one app and wrong in another, which is a sign of caching rather than a broken tag.
Why it happens
1. One set of tags for the whole site
If og:title and og:image are only written once in index.html, every page shares the same card. Template projects also ship with placeholder tags that nobody replaced.
2. Tags added by JavaScript after load
Most social crawlers read the HTML and do not run scripts. Tags set in the browser after the page loads are invisible to them unless the server or Lovable's crawler pre-rendering includes them in the delivered HTML.
3. The image is too heavy or not an absolute URL
Lovable's docs recommend 1200×630 at a few hundred KB and note that WhatsApp shows no preview for larger files. A path like /og.png without the domain is also ignored by several platforms.
4. The old preview is cached
Facebook, LinkedIn and messaging apps store the card the first time a link is shared. Fixing the tags does not change a cached card until the platform scrapes the page again.
How to fix it
- Check what Lovable will show before publishing: use the page selector above the preview, hover the preview icon and open the Social card. You can also open Social & search appearance from the ⋮ menu in the Publish dialog.
- Set a unique og:title and og:description for each page, and an og:image with a full https:// address on your custom domain. Save the image in public/ so it ships with the site.
- Export the share image at 1200×630 and compress it to a few hundred KB; a large PNG straight from a design tool is the usual reason WhatsApp shows nothing.
- Add twitter:card with the value summary_large_image so X shows a large card instead of a small thumbnail.
- Publish, then paste each URL into the Facebook Sharing Debugger and click Scrape Again, and into LinkedIn's Post Inspector. These refresh the cached card for those platforms.
- Run the SEO & AI scan under More > Analytics, which also reviews Open Graph previews, and fix anything it lists.
Prompt to paste into Lovable
Give every public page its own Open Graph and Twitter card tags: og:title, og:description, og:url (absolute, on https://example.com), og:image (absolute URL, 1200x630, under 300 KB, saved in /public), and twitter:card=summary_large_image. Make sure these tags are present in the HTML the server or pre-renderer delivers, not only added by JavaScript after the page loads.
How to check it's fixed
- Use View Source (not the Elements panel) on two pages and confirm the og: tags are present and different on each.
- Open the og:image address directly in a browser; it should load and the file should be a few hundred KB, not several MB.
- Share each URL in a private WhatsApp or Slack chat with yourself and check the card shows the right image and title.
What a QAlaunch scan shows for this
- Missing og:title, og:description or og:image in the rendered homepage.
- An og:image address that fails to load, reported as a failed request or broken image.
- A paid report compares titles and descriptions across up to 10 pages, so a single card reused everywhere stands out.
See exactly what a full report contains in the sample report.
Frequently asked questions
Why does the preview look right in Lovable but wrong in WhatsApp?
Either WhatsApp cached an older version, or the image is above the size it accepts. Compress the image, publish, and share the link with a harmless query string such as ?v=2 to force a fresh fetch.
Do social apps see tags on older React + Vite Lovable projects?
Lovable pre-renders older projects for verified crawlers, and social preview bots are included, so tags set per route generally reach them. Newer TanStack Start projects render the tags on the server for every request.
What size should the share image be?
1200×630 pixels is the safe standard across platforms, kept to a few hundred KB. Keep important text away from the edges, since some apps crop the card to a square.
Rather have a QA engineer test it by hand?
If this is a site you're launching or handing to a client, I'll go through it by hand, including the Lovable-specific issues a scan can't reach, like logged-in flows.
- Up to 10 key pages tested by hand, not a scan
- Every flow a customer uses: forms, sign-up, checkout, booking
- Real mobile and desktop browsers
- A written report in plain language, with screenshots
- A 15-minute call to walk you through it
- 10 years of professional QA experience
Tell me about your site and I'll reply personally, usually the same day.
No payment now. I'll confirm scope and price first.
Related fixes
- Lovable site not showing on Google: causes and fixes
- Lovable changes not showing on the live site: what to check
- Lovable custom domain not working: statuses, causes and fixes
- Lovable app shows no Supabase data: fixing Row Level Security
- Lovable login redirects to localhost: how to fix auth URLs
- Lovable app gives 404 on refresh after export: the fix per host
More for Lovable: all Lovable fixes · Lovable testing · 9 bugs every AI-built site ships with
Written by Waqas Ahmad, QA engineer with 10 years of professional testing experience. Last checked October 26, 2026.
Sources: Lovable docs: SEO, AI search and social previews · Meta for Developers: sharing FAQ for webmasters