Why your link shows no preview when you share it.

What the platform reads when you paste a link

When you share a URL, the platform sends a bot to fetch it and reads a few <head> tags defined by the Open Graph protocol. The protocol requires four: og:title, og:type, og:image and og:url. LinkedIn's guide to making your site shareable asks for title, image, description and URL, and puts numbers on the image:

• Minimum size: 1200 by 627 pixels, at a 1.91:1 ratio.
• Maximum file size: 5 MB.
• Under 401 pixels wide, it shows as a small thumbnail instead of a large card.

Meta adds two conditions on its crawler page: the tags must sit within the first megabyte of the page or they get cut off, and the content has to be readable within a few seconds.

Why AI-built sites get this wrong so often

Plenty of Lovable, Bolt and Vite sites are single-page apps: the server sends nearly empty HTML and JavaScript draws everything in the browser, titles included. Lovable's own docs are blunt about it: LinkedIn, Slack, Facebook, X and WhatsApp read Open Graph tags from the HTML, and most of them don't run JavaScript. If a script adds the tags, the bot never sees them.

Lovable fixed it in two steps. Projects created since May 13, 2026 use TanStack Start, which renders each page on the server before sending it. Older React and Vite projects get a pre-rendered copy only when the request comes from a verified bot, such as a link preview bot. If your site is older or hosted elsewhere, don't assume you get the same treatment.

The other mistake is one image for everything. Lovable recommends a different og:title, og:description and og:image on every page, images at 1200 by 630 that weigh a few hundred KB, and warns that WhatsApp shows no preview for larger files.

The tags your HTML needs

This goes in the <head> of every page, with that page's values. The image needs a full https URL:

<meta name="description" content="What visitors get, in 140 to 160 characters.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://yoursite.com/pricing">
<meta property="og:title" content="Pricing for Your Brand">
<meta property="og:description" content="The same idea as the description, for chats.">
<meta property="og:image" content="https://yoursite.com/og/pricing.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="What the image shows">
<meta name="twitter:card" content="summary_large_image">

If a builder made your site, this prompt usually does it: "Add Open Graph tags to every page (og:title, og:description, og:url and a 1200×630 og:image under 300 KB, specific to that page) and twitter:card=summary_large_image. They must be in the HTML the server sends, not added with JavaScript. Don't change anything else." For the rest worth asking each tool, see the builders guide.

How to check it without guessing

• View the source, not the inspector: Ctrl+U (Cmd+Option+U on a Mac) shows the HTML the bot gets. If og:image isn't there, the platform can't find it either.
• Use the platform's debugger: Meta's Sharing Debugger shows which tags it read and fetches the page again.
• Rename the image when you replace it: Meta caches images by URL and won't update them while the URL stays the same.
• Check your site: Slop Score flags "No preview when shared" when the homepage is missing the image or the description.

The free Slop Score looks at the homepage. Slop Score Pro checks link previews on every page of the site, along with duplicate titles and descriptions and HTML that arrives empty without JavaScript.