Blog / Technical Guides

Lovable Link Preview Not Showing? Fix Your og:image and Titles

By Keyona Meeks, Founder, ReRev Labs · Oct 31, 2026 · 7 min read

The short answer: When you paste a link into LinkedIn, Slack, Facebook, X or WhatsApp, the app reads the page's Open Graph tags, not your design. If the preview is blank or the same on every page, the tags are missing, generic or the same for every route. Give each page its own og:title, og:description and og:image. Size the image at 1200 by 630 and keep it small. Then re-scrape the link, because the apps keep what they saw before.

By the end of this post, you'll be able to:

  • Explain why a shared link shows the wrong preview.
  • List the tags every page needs and the image size to use.
  • Ask Lovable to set unique tags per page, and check the result in its Social preview.
  • Refresh the cached preview after you fix it.

You share your pricing page on LinkedIn. The preview shows a gray box and a generic site title. Or it shows the home page image for every page you share. The site looks fine in the browser. The problem is that the apps that build previews do not look at your site the way a browser does.

Lovable's own SEO page explains the mechanism. It says "Social platforms such as LinkedIn, Slack, Facebook, X, and WhatsApp read the Open Graph tags in your page's HTML," and "Most of them do not run JavaScript." It also says Lovable apps serve those tags to social-preview bots, but "each page still needs its own Open Graph tags." Source: Lovable's page on optimizing your app for SEO and AI search, checked October 30, 2026.

So there are three common causes:

  • The tags are missing or generic. The page lists "Missing or generic Open Graph tags, so shared links show a generic preview" as an issue. It also says "the starting metadata is generic."
  • Every page shares one set of tags. The page recommends "unique og:title, og:description, and og:image values per route." If you set the tags once for the whole site, every route shows the same preview.
  • The image is the wrong size. See the next sections.

One more point from the same page changes how you test. It says Lovable serves pre-rendered pages only to verified crawlers, and "Unverified bots and link checkers see the regular single-page app." So a random online tag checker may show you less than LinkedIn or Slack sees. Use the checks below, and treat a result from an unknown tool with care.

Which tags does every page need?

The Open Graph protocol lists four required properties for every page: og:title, og:type, og:image ("An image URL which should represent your object within the graph") and og:url ("The canonical URL of your object that will be used as its permanent ID in the graph"). Source: The Open Graph protocol, checked October 30, 2026. The protocol also defines og:image:width and og:image:height. Lovable's page adds a description tag to its advice, so set og:description too.

The protocol page does not say whether the image URL must be absolute. Every example on it uses a full URL starting with https://, so I use a full address for the image.

What size should the og:image be?

Lovable's page says: "Keep share images at 1200×630 and a few hundred KB. WhatsApp shows no preview for larger files."

Meta's documentation for link shares gives more detail. It says to use images at least 1200 by 630 pixels for the best display on high resolution devices. It says to keep the aspect ratio "as close to 1.91:1 as possible to display the full image in Feed without any cropping." The file must not exceed 8 MB, and the minimum allowed dimension is 200 by 200 pixels. Source: Meta's guide to images in link shares, checked October 30, 2026.

That is why 1200 by 630 is the safe choice. An image exported at 1920 by 1080 is 16:9, which is not 1.91:1. My reading of Meta's advice is that a feed may crop it, so put the important part of the picture near the center. I did not test how each app crops.

How do you set unique tags per page in Lovable?

Lovable's page names three places. In the Publish dialog, select Social & search appearance in the ⋮ menu. In the preview check, "The Social card shows the exact title, description, and image that social platforms read." And in the review findings, Try to fix "sends the finding to Lovable. Lovable applies the changes to your project files." The page does not say which file holds the tags, so I do not name one here.

If you would rather ask in the chat, here is a prompt you can adapt. This is my wording. I did not run it in Lovable.

Give every page route its own Open Graph tags: og:title, og:description, og:image, og:url and og:type. Use a different title and description for each page, written for that page. Use a full https:// address on my domain for each og:image. Make the images 1200 by 630 pixels. Do not change anything else. List each route and its tags when you finish.

Then read the result yourself. Open the list Lovable gives you and check that the routes are different from each other, and that each image address is a real file on your site.

How do you check the preview?

  1. Use Lovable's Social card. It shows the title, description and image that Lovable says platforms read. Do this first.
  2. Publish, then test the live address. Preview checks do not tell you what a platform fetched from your published site.
  3. Share the link where you will use it. Paste the address into LinkedIn, Slack or a private chat and look at the preview.

Meta's page describes a way to avoid the "first share shows no image" problem. It says "The crawler has to see an image at least once before it can be rendered," and you can pre-cache the address with the Sharing Debugger, force a re-scrape through the Graph API, or add og:image:width and og:image:height tags so the crawler can render the image without downloading it first. LinkedIn has a Post Inspector tool for refreshing its previews. I could not open LinkedIn's help page, so check LinkedIn's own steps.

Why does the old preview keep showing after you fix it?

The apps cache. Meta's page says images are cached by URL, so "a replacement image needs a new URL to be picked up," and that updating an image does not change previews of earlier shares. Those must be refreshed separately. It also says to keep old images in place, since existing shares may still reference them.

So when you replace a share image, give the new file a new name, for example pricing-og-v2.png, point the tag at it, publish, and then re-scrape the link in each tool you use.

What if it still does not work?

Check these in order:

  • The tags are the same on every route. Open two different pages in the Social card and compare.
  • The image address is wrong. Open the og:image address in a browser. It should show the picture and not a 404 page. A page that returns your app's shell instead of an image points to a routing problem on your host.
  • The file is too big. Keep it to a few hundred KB so WhatsApp shows it.
  • You are testing before publishing. Publish first.
  • The platform has the old copy. Use a new file name and re-scrape.
  • You are using a tool Lovable does not recognize. Unverified bots see the plain app, per Lovable's page.
  • The domain is not set up. If the live address itself fails, read how to deploy a Lovable website to your own domain.

Where does an LLM fit in this?

Lovable's AI can write the tags, and that is a good use of it. It can also copy the same tag to every page, or point to an image that does not exist. A person should open the list of routes and the image addresses and check them, because a wrong tag fails quietly. Nothing in the check itself needs a model.

Where this has limits

  • Docs change. Lovable's page, Meta's page and each platform's rules can change. The quotes above are from October 30, 2026.
  • I did not test this in Lovable. The prompt is my wording. Lovable's Social card is the check that counts.
  • Cropping differs by app. I did not test how each app crops a 1920 by 1080 image.
  • LinkedIn's steps are unconfirmed here. I could not open its help page.
  • Other tags exist. Some apps read their own tags too, such as Twitter or X card tags. This post covers Open Graph only.
  • Social previews are not search ranking. I have no data that these tags change where your page ranks in Google.

If you are moving pieces of your business onto your own accounts and want a hand, you can apply for the free rebuild on /letstalk. Bring a list of the tools you pay for and which one you would replace first. Do not send passwords or login details.

Frequently asked questions

Most often the page has no og:image, the image address is broken, or the app cached an earlier version. Check the Social card in Lovable, open the image address in a browser, and re-scrape the link.

What size should a Lovable og:image be?

Lovable's docs say 1200 by 630 and a few hundred KB. Meta recommends at least 1200 by 630 at about a 1.91:1 ratio, with a file under 8 MB.

Why is the preview the same on every page?

The tags were set once for the whole site. Each route needs its own og:title, og:description and og:image.

Do I need to edit code?

Not necessarily. Lovable names the Publish dialog, the Social card and the Try to fix button as places to work. You can also ask in the chat. Check the result before you share.

Why does an online tag checker show different results from LinkedIn?

Lovable's page says it serves pre-rendered pages only to verified crawlers, and that unverified bots and link checkers see the regular app. A generic checker may not see what the big platforms see.

How do I make the old preview go away?

Give the image a new file name, point the tag to it, publish and re-scrape the link. Meta says images are cached by URL.

Read next: Is a Lovable website good for SEO? covers what we learned fixing ours, and the same title on every page fixes the other preview problem Google shows.