A customer asks for a quote. You are proud of your new site, so you text them the link instead of typing out a long reply. You hit send and glance at the message.
There is no picture. Or there is a tiny gray square. The title just says “Vite + React” or the name of the builder, or simply your domain with nothing under it. On another phone, the preview shows your old site’s logo from three years ago.
Your site is good. The link makes it look unfinished. And you cannot see anything wrong on the page itself, which makes it hard to know where to start.
What is actually going on
When you paste a link into a text, a chat app or social media, something visits your page in the background to build that little card. Sometimes it is the platform’s servers, and in some messaging apps it is the sender’s own device. Either way, it does not look at your page the way a person does. It reads a few hidden tags in the page’s code and uses them to assemble the preview.
These are called Open Graph tags, a standard first created by Facebook that most platforms now read. The main ones are:
- og:title: the headline on the card.
- og:description: the line of text underneath.
- og:image: the picture.
- og:url: the main address for the page.
Some platforms also read their own variations, such as Twitter (now X) card tags, but they fall back on Open Graph in many cases. If these tags are missing, the platform guesses. Guesses usually look broken.
Why AI-built sites hit this so often
Many sites built in tools like Bolt, Lovable and other Vite or React setups are single-page apps. That means the server sends one basic HTML file for every page, and JavaScript then fills in the content in the browser.
People see the finished page. But most preview tools do not run JavaScript. They read that one starter file and stop. So every page on your site, from the home page to your services page to a specific blog post, shares whatever generic title and image was in that file. If nobody changed it, it may still say the project template name.
Preview tools read what your server sends first, not what appears after the page finishes loading.
Image problems
Even when an image tag exists, the picture can fail to show because:
- The image is too small, or the wrong shape. The recommended size is 1200 by 630 pixels.
- The image address is relative (like
/images/card.png) instead of a full address starting withhttps://. - The image is behind a login, blocked, or very large and slow to load.
- The file was renamed or deleted after the tag was written.
Caching
Platforms save a copy of your preview so they do not have to rebuild it every time. That is why an old logo can linger long after you changed it. Fixing the tags is step one. Telling the platforms to look again is step two.
What to do right now
Here is how to see what preview tools see and start fixing it.
- View the page source. In a desktop browser, use the option to view page source (not the inspector, which shows the page after JavaScript runs). Search for
og:. If you find nothing, or the same generic text on every page, you have found the problem. - Write real tags for your home page. A clear title, a one-sentence description, and a full
https://address to a 1200 by 630 image. Most builders have a place for site-wide SEO or social settings. In code-based builds, these go in the main HTML file. - Make the image work hard. Use your logo or a strong photo, with readable text kept away from the edges. Upload it somewhere public on your own site.
- Handle your other important pages. If you are on a single-page app, ask your builder or a developer about prerendering or adding per-route meta tags, so each page sends its own title and image before JavaScript runs. Prioritize pages you share most: home, services, booking, key blog posts.
- Refresh the caches. Most major social platforms offer a free sharing debugger or post inspector. Paste your URL, ask it to scrape again, and check that the new title and image appear. It also shows warnings about missing tags.
- Test in real life. Text the link to yourself and a friend on a different phone. Some messaging apps keep their own cached previews, so a brand-new test conversation gives the truest result.
When to hand it off
The home page fix is often a quick win you can do yourself. The harder part is making every page preview correctly on a single-page app, since it touches how the site is built and served. It is also easy to fix it once and have a later edit in the builder quietly overwrite it.
AftUp handles this as part of keeping your site in good shape. We write Open Graph tags for your key pages, create correctly sized preview images, set up prerendering or per-route tags where your build needs it, and refresh the platform caches so the new cards actually show up. We do this inside the tool you used, with no rebuild. See our social previews page for the details, or check pricing for which plan fits the amount of help you want.
The short version
- Link previews come from Open Graph tags, not from what people see on the page.
- Single-page apps often send one generic set of tags for every page.
- Use a 1200 by 630 image with a full
https://address. - After fixing, use the platforms’ debugging tools to clear old previews.
- Test by texting the link to a fresh conversation.
If you want to know exactly how your links look when you share them, send your URL for a free site check and we will include your previews in the report.