Why link previews matter for your Lovable app
When you launch on X, post in a Slack community or share on LinkedIn, the preview card is the first thing people see. A clear image and title get more clicks; a blank card or the default Lovable image looks unfinished.
Social networks build that card from Open Graph meta tags in your raw HTML. They don't run JavaScript, so tags set by React after the page loads are ignored. The tags must be in index.html.
The tags every Lovable app needs
<meta property="og:title" content="MyApp – Plan meals in minutes" />
<meta property="og:description" content="Weekly meal plans and grocery lists for busy families." />
<meta property="og:image" content="https://myapp.com/og-image.png" />
<meta property="og:url" content="https://myapp.com/" />
<meta name="twitter:card" content="summary_large_image" />
<link rel="icon" href="/favicon.png" type="image/png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />Recommended image sizes
| Asset | Size | Format |
|---|---|---|
| Open Graph image (og:image) | 1200×630 px (1.91:1) | PNG or JPG |
| X large card (twitter:image) | 1200×630 px, or reuse og:image | PNG or JPG |
| Favicon | Square, 48×48 px or larger | PNG, ICO or SVG |
| Apple touch icon | 180×180 px | PNG |
How to fix it in Lovable
- Create a 1200×630 image showing your app name and what it does, and a square icon.
- Upload them to the chat and ask Lovable to save them in the
public/folder asog-image.png,favicon.pngandapple-touch-icon.png. - Ask it to update
index.html: pointog:imageandtwitter:imageto the absolute URL of the new image, replace the default title and description, and declare the new icons. - Publish, then run this preview again.
Networks cache previews: use the Facebook Sharing Debugger or the LinkedIn Post Inspector to refresh them.
Frequently asked questions
What size should an Open Graph image be?
Use 1200×630 pixels (a 1.91:1 ratio) in PNG or JPG. This size displays sharply on Facebook, LinkedIn, X and Slack. Keep text and logos away from the edges, since some networks crop slightly.
Why does my Lovable app show the Lovable image when shared?
New Lovable projects point og:image and twitter:image to Lovable's default preview image in index.html. Upload your own image to the public/ folder and update both tags with its absolute URL.
I updated my image but the old preview still shows. Why?
Social networks cache previews. Use the Facebook Sharing Debugger or the LinkedIn Post Inspector to force a refresh. Changing the image file name also helps.
Why doesn't my favicon show in Google results?
Google needs a favicon declared with a <link rel="icon"> tag, reachable by its crawler, and square (a multiple of 48×48 px is recommended). It can take a few days or weeks to update after a change.