Every time your link is shared in a text, Slack, LinkedIn post or Facebook group, the platform builds a little card: an image, a title and a short description. It builds that card from a few tags in your page’s code. If those tags are missing or generic, the platform guesses, and its guesses are usually not flattering.
The tags that control your preview
- Open Graph tags: a standard created by Facebook and now used widely, including by LinkedIn, Slack, iMessage and many others. The key ones are og:title, og:description, og:image and og:url.
- X (Twitter) card tags: twitter:card sets the layout. “summary_large_image” gives you the big image version. X falls back to Open Graph for title, description and image when its own tags are missing.
The image
The recommended Open Graph image size is 1200 by 630 pixels. Use a clear image with little or no small text. Keep logos and words away from the edges, because some apps crop to a square or a narrower shape. The image must be reachable at a full public URL, starting with https, not a relative path or a file behind a login.
A preview image is a small billboard. Make it readable at thumbnail size.
Why single-page apps show one generic preview
Many AI-built sites are single-page apps. They load one HTML file and use JavaScript to show different pages. Link preview tools often don’t run JavaScript. They read the first HTML they receive, which carries one set of tags for the whole site. So your pricing page, your blog post and your homepage all share the same preview.
The fix is to serve the right tags for each page in the initial HTML. Depending on the setup, that might mean prerendering pages, using the host’s tools to inject tags per route, or moving key pages to a setup that generates real HTML. Our blog post on broken link previews walks through this.
Refreshing the cache
Platforms remember previews. After you fix your tags, the old card may stick around. Most major platforms offer a free debugger or inspector, such as Facebook’s Sharing Debugger and LinkedIn’s Post Inspector, that shows what they see and lets you ask them to fetch the page again.
Favicons and app icons
The favicon is the tiny icon in browser tabs and bookmarks. Builders often leave their own logo or a blank square. You also want an Apple touch icon, which appears when someone saves your site to their phone’s home screen, and a larger icon for Android. Each should be a clean, square version of your mark that still reads at small sizes.
What people miss
- No og:image at all, so platforms pull a random image or none.
- An image URL that only works on the old builder subdomain.
- Every page using the homepage title and description.
- Titles that read well in a browser tab but get cut off in a preview.
- Sharing a link before fixing it, then wondering why the old card persists.
- Forgetting twitter:card, so X shows a small preview instead of a large image.
- The builder’s default favicon still showing in the tab.
How AftUp handles it
When we get your site live and set up your SEO basics on any plan, we check that your main pages have proper titles, descriptions and preview tags, and that your preview image works on your real domain. Starter includes one small content change a month, which is often enough to fix a homepage preview or swap a favicon.
On Growth, we use your monthly fix hours to set up per-page previews, including on single-page apps where it takes more work, and to refresh platform caches so the new previews actually show. On Scale, new pages we build come with their own previews from the start. See pricing for plan details.
Do it yourself
- Paste your link into a private message to yourself on a couple of platforms and see what appears.
- View your page source and look for og:title, og:description, og:image and twitter:card.
- Create a 1200x630 image and upload it so it has a full https URL on your domain.
- Add or update the tags in your builder’s page settings or custom head code.
- Test a few different pages, not just the homepage.
- Run your link through the platform debuggers to refresh their cache.
- Replace the default favicon and add a home screen icon.
Curious how your links look right now? A free site check includes a look at your previews.