Open Graph image not showing: fix the link preview for your app

Updated Oct 27, 2026 · Pewterkit Guides

When someone shares your link, X, LinkedIn, Slack, WhatsApp and iMessage build the preview card from Open Graph tags in your page's raw HTML. No og:image means a plain text link; an og:image from the template means your builder's screenshot or logo instead of yours. Add og:title, og:description, og:url and an og:image that is a full https:// address to a real image file, in index.html, and republish.

The tags

The Open Graph protocol's four required properties are og:title, og:type, og:image ("An image URL which should represent your object within the graph") and og:url. Width and height tags are optional extras.

<head>
  <meta property="og:type" content="website" />
  <meta property="og:title" content="Acme Rota: staff scheduling for cafes" />
  <meta property="og:description" content="Build next week's rota in five minutes." />
  <meta property="og:url" content="https://www.acmerota.com/" />
  <meta property="og:image" content="https://www.acmerota.com/og.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta name="twitter:card" content="summary_large_image" />
</head>

Lovable's docs advise: "Keep share images at 1200×630 and a few hundred KB."

Why previews break, and the fix for each

What you see Usual cause Fix
No image at all No og:image tag Add the tags above
Your builder's editor screenshot or logo The template's automatic image is still in index.html Replace it with your own image file
Template text ("Lovable Generated Project") og:title or og:description left as default Write your own
Image tag present but blank card Relative URL (/og.png), http://, or the file answers 404 Use the full https:// address of a file that loads
Right tags, old preview The app cached your earlier preview Re-share later, or use the platform's own preview or inspector tool

Two rules cover most cases: tags must be in the HTML the server sends (many preview builders read only that HTML and don't run your JavaScript), and the image address must open as an image in a new browser tab.

In Lovable, Bolt and Vite

Put the image in public/og.png so it is served at /og.png, then set the full address in og:image. In Lovable, ask in chat to "replace the og:image, og:title and og:description in index.html", or open Social & search appearance from the Publish dialog's ⋮ menu to preview the card. Republish after changes.

What Pewterkit Check looks for

A free check reads your homepage's og:image (or twitter:image), og:title and og:description. It flags a builder's automatic screenshot, template text, an invalid or non-https image address, and an image that doesn't load as an image; it then requests the image once to confirm it answers.

FAQ

Why is my OG image not showing on WhatsApp?

Most often the image address is relative or not https, the image doesn't load, or the tags are added by JavaScript after the page loads. Check the raw HTML (View Source) for a full https:// og:image that opens in a new tab.

What size should an Open Graph image be?

1200 × 630 is the size Lovable's docs recommend, kept to a few hundred KB.

Where do I put the image file?

In public/ for a Vite, Lovable or Bolt project, so public/og.png is served at /og.png. Then use the full address, such as https://www.acmerota.com/og.png, in og:image.

I fixed it but the old preview still shows. Why?

Sharing apps can keep a preview they built earlier for a while. Check the raw HTML has the new tags, then share again later or use the platform's own preview tool.

Sources

  1. The Open Graph protocol — read 27 Oct 2026: required properties, og:image, width and height
  2. Lovable docs: Automatic SEO features — read 27 Oct 2026: 1200×630 share images, Social & search appearance preview

How this page was made: drafted with AI from the sources listed, reviewed by Pewterkit. Docs checked Oct 27, 2026. Spotted something out of date? Tell us.

Related guides